@layer components {
    /* Wrapper */
    .rtds-toggle {
        display: block;
    }

    /* =====================
       Form variant
       ===================== */

    .rtds-toggle__label {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-3);
        cursor: pointer;
    }

    .rtds-toggle__text {
        font-size: var(--fontsize-text-base);
        color: var(--color-content-01, var(--color-neutral-900));
        line-height: 1.5;
    }

    .rtds-toggle__text abbr {
        text-decoration: none;
    }

    .rtds-toggle__control {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* Visually hidden but accessible and focusable — label wraps the control so clicks on __lever activate the input */
    .rtds-toggle__input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* Visual track */
    .rtds-toggle__lever {
        display: inline-block;
        position: relative;
        flex-shrink: 0;
        width: var(--spacing-11);
        height: var(--spacing-6);
        border-radius: 9999px;
        background-color: var(--color-neutral-700);
        pointer-events: none;
        transition: background-color 150ms ease;
    }

    /* Knob */
    .rtds-toggle__lever::before {
        content: '';
        position: absolute;
        top: 50%;
        left: var(--spacing-0-5);
        transform: translateY(-50%);
        width: var(--spacing-5);
        height: var(--spacing-5);
        border-radius: 9999px;
        background-color: var(--color-neutral-50);
        transition: left 150ms ease;
        z-index: 1;
    }

    /* Icon inside knob via mask — x-mark (off) default */
    .rtds-toggle__lever::after {
        content: '';
        position: absolute;
        top: 50%;
        /* Center of knob in off state: edge-offset + half-knob-width */
        left: calc(var(--spacing-0-5) + var(--spacing-5) / 2);
        transform: translate(-50%, -50%);
        width: var(--spacing-3-5);
        height: var(--spacing-3-5);
        background-color: var(--color-content-01, var(--color-neutral-900));
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 5L15 15M15 5L5 15'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 5L15 15M15 5L5 15'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        pointer-events: none;
        transition: left 150ms ease, background-color 150ms ease;
        z-index: 2;
    }

    /* Form: checked */
    .rtds-toggle__input:checked ~ .rtds-toggle__lever {
        background-color: var(--color-button-primary, var(--color-primary-500));
    }

    .rtds-toggle__input:checked ~ .rtds-toggle__lever::before {
        left: calc(var(--spacing-11) - var(--spacing-5) - var(--spacing-0-5));
    }

    /* Icon switches to check, moves with knob to right position */
    .rtds-toggle__input:checked ~ .rtds-toggle__lever::after {
        left: calc(var(--spacing-11) - var(--spacing-5) - var(--spacing-0-5) + var(--spacing-5) / 2);
        background-color: var(--color-button-primary, var(--color-primary-500));
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10L8 14L16 6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10L8 14L16 6'/%3E%3C/svg%3E");
    }

    /* Form: focus ring on lever */
    .rtds-toggle__input:focus-visible ~ .rtds-toggle__lever {
        outline: 2px solid var(--color-focusring);
        outline-offset: 2px;
    }

    /* Form: disabled */
    .rtds-toggle__input:disabled ~ .rtds-toggle__lever {
        opacity: 0.4;
    }

    .rtds-toggle__label:has(.rtds-toggle__input:disabled) {
        cursor: not-allowed;
    }

    /* Form: state labels */
    .rtds-toggle__state-on,
    .rtds-toggle__state-off {
        font-size: var(--fontsize-text-sm);
        color: var(--color-content-02, var(--color-neutral-700));
        margin-left: var(--spacing-2);
    }

    .rtds-toggle__input:checked ~ .rtds-toggle__state-off { display: none; }
    .rtds-toggle__input:not(:checked) ~ .rtds-toggle__state-on { display: none; }

    /* Form: error */
    .rtds-toggle__error {
        display: block;
        color: var(--color-content-warn, var(--color-warn-dark));
        font-size: var(--fontsize-text-sm);
        margin-top: var(--spacing-1);
    }

    /* =====================
       Button variant
       ===================== */

    .rtds-toggle__switch {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-3);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: var(--color-content-01, var(--color-neutral-900));
        font-size: var(--fontsize-text-base);
        line-height: 1.5;
    }

    /* Button: checked */
    .rtds-toggle__switch[aria-checked="true"] .rtds-toggle__lever {
        background-color: var(--color-button-primary, var(--color-primary-500));
    }

    .rtds-toggle__switch[aria-checked="true"] .rtds-toggle__lever::before {
        left: calc(var(--spacing-11) - var(--spacing-5) - var(--spacing-0-5));
    }

    .rtds-toggle__switch[aria-checked="true"] .rtds-toggle__lever::after {
        left: calc(var(--spacing-11) - var(--spacing-5) - var(--spacing-0-5) + var(--spacing-5) / 2);
        background-color: var(--color-button-primary, var(--color-primary-500));
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10L8 14L16 6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10L8 14L16 6'/%3E%3C/svg%3E");
    }

    /* Button: focus ring on lever */
    .rtds-toggle__switch:focus-visible .rtds-toggle__lever {
        outline: 2px solid var(--color-focusring);
        outline-offset: 2px;
    }

    /* Button: disabled */
    .rtds-toggle__switch:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    /* Button: state labels */
    .rtds-toggle__switch[aria-checked="true"] .rtds-toggle__state-off { display: none; }
    .rtds-toggle__switch[aria-checked="false"] .rtds-toggle__state-on { display: none; }
}