/**
 * Toggle Switch Component
 * Pixel-perfect implementation based on Figma design
 */

.toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: none;
    padding: 0;
    background: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

.toggle:focus,
.toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle__track {
    position: relative;
    display: block;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
}

/* Neon Theme - On State */
.toggle__track--on {
    background-color: var(--color-content-a40); /* rgba(255, 255, 255, 0.4) */
}

/* Neon Theme - Off State */
.toggle__track--off {
    background-color: var(--color-subaccent); /* #00FF00 */
}

/* Calm Theme - On State */
[data-theme="calm"] .toggle__track--on {
    background-color: var(--color-content-a40); /* rgba(16, 15, 16, 0.4) */
}

/* Calm Theme - Off State */
[data-theme="calm"] .toggle__track--off {
    background-color: var(--color-accent); /* #0000FF */
}

/* Thumb (Handle) */
.toggle__thumb {
    position: absolute;
    top: 50%;
    left: 17px;
    width: 20px;
    height: 12px;
    border-radius: 6px;
    transition: left 0.2s ease, background-color 0.2s ease;
    transform: translateY(-50%);
    background-color: var(--color-solid-dark); /* #100F10 */
}

/* Neon Theme - On State Thumb */
.toggle__track--on .toggle__thumb {
    transform: translateY(-50%);
    left: 1px;
    background-color: var(--color-solid-dark); /* #100F10 */
}

/* Neon Theme - Off State Thumb */
.toggle__track--off .toggle__thumb {
    transform: translateY(-50%);
    left: 17px;
    background-color: var(--color-solid-dark); /* #100F10 */
}

/* Calm Theme - Thumb */
[data-theme="calm"] .toggle__thumb {
    background-color: var(--color-solid-light); /* #FFFFFF */
}


/* Disabled State */
.toggle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle--disabled .toggle__track {
    pointer-events: none;
}