.dark-mode-toggle--pill {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

/* Sizes */
.dark-mode-toggle--sm {
    width: 52px;
    height: 28px;
    padding: 2px;
}

.dark-mode-toggle--md {
    width: 64px;
    height: 34px;
    padding: 3px;
}

.dark-mode-toggle--lg {
    width: 76px;
    height: 40px;
    padding: 3px;
}

/* Icons */
.dark-mode-toggle__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    transition: color var(--transition);
}

/* Layer — icons above or below knob */
.dark-mode-toggle--icons-above .dark-mode-toggle__icon { z-index: 2; }
.dark-mode-toggle--icons-above .dark-mode-toggle__knob { z-index: 1; }
.dark-mode-toggle--icons-below .dark-mode-toggle__icon { z-index: 0; }
.dark-mode-toggle--icons-below .dark-mode-toggle__knob { z-index: 1; }

.dark-mode-toggle--sm .dark-mode-toggle__icon {
    width: 14px;
    height: 14px;
}

.dark-mode-toggle--md .dark-mode-toggle__icon {
    width: 16px;
    height: 16px;
}

.dark-mode-toggle--lg .dark-mode-toggle__icon {
    width: 20px;
    height: 20px;
}

.dark-mode-toggle--sm .dark-mode-toggle__icon--sun  { left: 6px; }
.dark-mode-toggle--sm .dark-mode-toggle__icon--moon { right: 6px; }
.dark-mode-toggle--md .dark-mode-toggle__icon--sun  { left: 8px; }
.dark-mode-toggle--md .dark-mode-toggle__icon--moon { right: 8px; }
.dark-mode-toggle--lg .dark-mode-toggle__icon--sun  { left: 9px; }
.dark-mode-toggle--lg .dark-mode-toggle__icon--moon { right: 9px; }

/* Knob */
.dark-mode-toggle__knob {
    position: absolute;
    border-radius: var(--radius-full);
    background: var(--color-text);
    transition: transform var(--transition), background var(--transition);
}

.dark-mode-toggle--sm .dark-mode-toggle__knob {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
}

.dark-mode-toggle--md .dark-mode-toggle__knob {
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
}

.dark-mode-toggle--lg .dark-mode-toggle__knob {
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
}

/* Dark state — knob slides right */
body.dark .dark-mode-toggle--sm .dark-mode-toggle__knob { transform: translateX(24px); }
body.dark .dark-mode-toggle--md .dark-mode-toggle__knob { transform: translateX(30px); }
body.dark .dark-mode-toggle--lg .dark-mode-toggle__knob { transform: translateX(36px); }

@media (prefers-color-scheme: dark) {
    body:not(.light):not(.dark) .dark-mode-toggle--sm .dark-mode-toggle__knob { transform: translateX(24px); }
    body:not(.light):not(.dark) .dark-mode-toggle--md .dark-mode-toggle__knob { transform: translateX(30px); }
    body:not(.light):not(.dark) .dark-mode-toggle--lg .dark-mode-toggle__knob { transform: translateX(36px); }
}

/* Icon highlight — below: active icon uses text color */
.dark-mode-toggle--icons-below :is(body:not(.dark)) .dark-mode-toggle__icon--sun {
    color: var(--color-text);
}

.dark-mode-toggle--icons-below :is(body.dark) .dark-mode-toggle__icon--moon {
    color: var(--color-text);
}

/* Icon highlight — above: icon over knob uses background color for contrast */
body:not(.dark) .dark-mode-toggle--icons-above .dark-mode-toggle__icon--sun {
    color: var(--color-background);
}

body:not(.dark) .dark-mode-toggle--icons-above .dark-mode-toggle__icon--moon {
    color: var(--color-muted);
}

body.dark .dark-mode-toggle--icons-above .dark-mode-toggle__icon--moon {
    color: var(--color-background);
}

body.dark .dark-mode-toggle--icons-above .dark-mode-toggle__icon--sun {
    color: var(--color-muted);
}