/* ============================================================
   Switch — token-driven system setting on/off control
   Wider track and smoother travel than Toggle for a more
   deliberate, stateful interaction feel.
   Variants: default | outlined | filled
   States:   checked | disabled | error | focus
   ============================================================ */

/* --- Wrapper --- */

.ui-switch-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- Label layout --- */

.ui-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.ui-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* --- Track (wider than Toggle for deliberate feel) --- */

.switch-track {
    width: 48px;
    height: 26px;
    background: var(--switch-background, var(--meb-border-subtle));
    border: 1px solid var(--switch-border, var(--meb-border-subtle));
    border-radius: 999px;
    position: relative;
    transition: background 180ms ease, border-color 180ms ease;
}

/* --- Thumb (larger to match wider track) --- */

.switch-thumb {
    width: 22px;
    height: 22px;
    background: var(--switch-foreground, var(--meb-text-inverse));
    border-radius: 999px;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 180ms ease;
}

/* --- Checked state --- */

.ui-switch input:checked + .switch-track {
    background: var(--switch-background-active, var(--meb-accent-primary));
    border-color: var(--switch-border-active, var(--meb-border-accent));
}

.ui-switch input:checked + .switch-track .switch-thumb {
    transform: translateX(22px);
}

/* --- Label text --- */

.switch-label {
    color: var(--switch-text, var(--meb-text-default));
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    user-select: none;
}

/* --- Error message --- */

.switch-error {
    color: var(--switch-border-error, var(--meb-accent-danger));
    font-size: var(--text-xs);
    margin-top: 2px;
}

/* ============================================================
   Variants
   ============================================================ */

.ui-switch-wrapper.variant-default .switch-track {
    background: var(--switch-background, var(--meb-border-subtle));
}

.ui-switch-wrapper.variant-outlined .switch-track {
    background: transparent;
    border: 1px solid var(--switch-border, var(--meb-border-subtle));
}

.ui-switch-wrapper.variant-filled .switch-track {
    background: var(--switch-background, var(--meb-surface-input-filled));
}

/* ============================================================
   Focus state
   ============================================================ */

.ui-switch input:focus-visible + .switch-track {
    box-shadow: var(--switch-focus-shadow, var(--meb-button-primary-focus-shadow));
}

/* ============================================================
   Disabled state
   ============================================================ */

.ui-switch-wrapper.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================
   Error state
   ============================================================ */

.ui-switch-wrapper.error .switch-track {
    border-color: var(--switch-border-error, var(--meb-accent-danger));
}