@layer components {
.dark-mode-toggle--pill {
    position: relative;
    display: flex;
    align-items: center;
    border: none;
    border-radius: var(--radius-full);
    background: var(--toggle-bg, var(--color-surface));
    box-shadow: inset 0 0 0 var(--button-border-width, 1px) var(--button-border-color, var(--color-border));
    cursor: pointer;
    transition: background var(--transition-speed), box-shadow var(--transition-speed);
}

.dark-mode-toggle--no-bg {
    --toggle-bg: transparent;
}

.dark-mode-toggle--no-border {
    box-shadow: none;
}

.dark-mode-toggle--pill:hover {
    background: color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text));
}

.dark-mode-toggle--pill {
    --_fr-color: var(--toggle-focus-ring-color, var(--form-focus-ring-color, var(--color-border)));
    --_fr-width: var(--toggle-focus-ring-width, var(--form-focus-ring-width, 2px));
    --_fr-offset: var(--toggle-focus-ring-offset, var(--form-focus-ring-offset, 0px));
    --_fr-style: var(--toggle-focus-ring-style, var(--form-focus-ring-style, solid));
    --_fr-speed: var(--toggle-focus-ring-speed, var(--form-focus-ring-speed, 150ms));
    outline: var(--_fr-width) var(--_fr-style) transparent;
    outline-offset: var(--_fr-offset);
    transition: background var(--transition-speed), box-shadow var(--transition-speed), outline-color var(--_fr-speed);
}

[data-focus-ring="keyboard"] .dark-mode-toggle--pill:focus-visible {
    outline-color: var(--_fr-color);
}

[data-focus-ring="always"] .dark-mode-toggle--pill:focus {
    outline-color: var(--_fr-color);
}

/* 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-speed);
}

/* 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: 10px; }
.dark-mode-toggle--lg .dark-mode-toggle__icon--moon { right: 10px; }

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

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

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

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

/* 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); }

/* Auto dark toggle handled in css-vars.php when auto_dark_mode enabled */

/* 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);
}
}