/* ===== OO Switch =====
   Tokens: theme1.css
   ===================== */

.oo-switch {
    position: relative;
    outline: none;
    display: inline-flex;
}

    .oo-switch .form--label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        margin: 0;
        user-select: none;
    }

.oo-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
    margin: 0;
}

.oo-switch input:disabled {
    cursor: not-allowed;
}

/* ── Track ── */

.oo-switch .oo-switch--track {
    flex-shrink: 0;
    position: relative;
    width: 2.2rem;
    height: 1rem;
    background: var(--oo-gray-300);
    border-radius: var(--oo-radius-full);
    transition: background var(--oo-transition);
}

/* ── Thumb ── */

.oo-switch .oo-switch--track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0rem;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--oo-gray-50);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(-50%);
    transition: left var(--oo-transition), background var(--oo-transition);
}

/* Hover */
.oo-switch input:not(:disabled):hover + .oo-switch--track::after {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* Checked */
.oo-switch input:checked + .oo-switch--track {
    background: var(--oo-primary);
}

.oo-switch input:checked + .oo-switch--track::after {
    left: calc(2.2rem - 1.2rem - 0rem);
}

/* Disabled */
.oo-switch input:disabled + .oo-switch--track {
    opacity: 0.5;
}

/* Focus-Ring */
.oo-switch input:focus-visible + .oo-switch--track {
    outline: 2px solid var(--oo-primary);
    outline-offset: 2px;
}

/* ── Label-Text-Position ── */

.oo-switch .form--label-text.LabelLinks {
    order: -1;
}

/* ── Size Varianten ── */

.oo-switch.oo-size-xs .oo-switch--track {
    width: 1.4rem;
    height: 0.75rem;
}

.oo-switch.oo-size-xs .oo-switch--track::after {
    width: 0.9rem;
    height: 0.9rem;
}

.oo-switch.oo-size-xs input:checked + .oo-switch--track::after {
    left: calc(1.4rem - 0.9rem);
}

.oo-switch.oo-size-sm .oo-switch--track {
    width: 1.7rem;
    height: 0.85rem;
}

.oo-switch.oo-size-sm .oo-switch--track::after {
    width: 1.05rem;
    height: 1.05rem;
}

.oo-switch.oo-size-sm input:checked + .oo-switch--track::after {
    left: calc(1.7rem - 1.05rem);
}

.oo-switch.oo-size-md .oo-switch--track {
    width: 2.2rem;
    height: 1rem;
}

.oo-switch.oo-size-md .oo-switch--track::after {
    width: 1.2rem;
    height: 1.2rem;
}

.oo-switch.oo-size-md input:checked + .oo-switch--track::after {
    left: calc(2.2rem - 1.2rem);
}

.oo-switch.oo-size-lg .oo-switch--track {
    width: 2.2rem;
    height: 1.1rem;
}

.oo-switch.oo-size-lg .oo-switch--track::after {
    width: 1.3rem;
    height: 1.3rem;
}

.oo-switch.oo-size-lg input:checked + .oo-switch--track::after {
    left: calc(2.2rem - 1.3rem);
}

.oo-switch.oo-size-xl .oo-switch--track {
    width: 2.3rem;
    height: 1.2rem;
}

.oo-switch.oo-size-xl .oo-switch--track::after {
    width: 1.45rem;
    height: 1.45rem;
}

.oo-switch.oo-size-xl input:checked + .oo-switch--track::after {
    left: calc(2.3rem - 1.45rem);
}

/* ── Validation Tooltip ── */

.oo-switch.invalid:hover .oo-validation-tooltip {
    display: block;
}