/* ============================================================
   W6 Toggle Theme (stabil: Bullet IM Track, keine Bewegung)
   ------------------------------------------------------------
   Fixes:
   - Bullet sitzt IM Track (rechts im Button), nicht außerhalb
   - Hover: KEIN transform/Bewegung, nur leichte Farbänderung
   - Active: Bullet wandert im Track nach rechts
   - State via .is-active oder data-w6-toggle-state="1"
   - Theme via [data-wiso-theme="..."]
   ============================================================ */

/* ---------- Base Button ---------- */
.w6-toolbar-toggle.w6-toggle-theme {
    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Size */
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    /* Typography */
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    /* Reset */
    border: 1px solid transparent;
    outline: none;
    appearance: none;
    /* Behavior */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* IMPORTANT: no movement on hover */
    transform: none !important;
    /* Smooth but stable */
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

    .w6-toolbar-toggle.w6-toggle-theme .w6-toolbar-toggle__text {
        font-size: 12px;
        opacity: 0.95;
        white-space: nowrap;
    }

    /* ---------- Track (rechts) ---------- */
    .w6-toolbar-toggle.w6-toggle-theme::after {
        content: "";
        display: inline-block;
        width: 36px;
        height: 18px;
        border-radius: 999px;
        position: relative; /* Anchor for bullet */
        border: 1px solid transparent;
        /* Stabil: keine Layout/Position transition */
        transition: background-color 160ms ease, border-color 160ms ease;
    }

    /* ---------- Bullet/Thumb (IM Track) ---------- */
    .w6-toolbar-toggle.w6-toggle-theme::before {
        content: "";
        position: absolute;
        /* Bullet size */
        width: 14px;
        height: 14px;
        border-radius: 50%;
        /* Default position: LEFT inside track */
        left: 0;
        /* Center vertically inside track */
        top: 50%;
        transform: translate(2px, -50%); /* 2px inside padding */
        /* Visual */
        box-shadow: none;
        /* Smooth slide */
        transition: transform 180ms ease, background-color 160ms ease, box-shadow 160ms ease;
    }

/* ------------------------------------------------------------
   Anchor bullet correctly:
   We must ensure the pseudo-element is positioned relative to
   the button AND aligned to the track area.
   -> We create a stable "track area" by giving the button
      a positioning context and reserving space for the track.
------------------------------------------------------------ */
.w6-toolbar-toggle.w6-toggle-theme {
    position: relative; /* bullet absolute uses this */
    padding-right: 52px; /* reserve fixed space for track (36 + gaps) */
}

    /* Place the track at far right with absolute positioning to avoid layout drift */
    .w6-toolbar-toggle.w6-toggle-theme::after {
        position: absolute;
        right: 10px; /* match horizontal padding */
        top: 50%;
        transform: translateY(-50%);
    }

    /* Place bullet relative to track position (same right/top), then slide within */
    .w6-toolbar-toggle.w6-toggle-theme::before {
        right: 10px; /* start from same anchor as track */
        top: 50%;
        /* left is not used because we anchor with right */
        left: auto;
        /* "Off" position = inside track on the left side:
       track width 36, bullet 14 => travel ~ (36-14)=22
       we use translateX to move within track */
        transform: translate(calc(-36px + 16px), -50%); /* left padding inside track */
    }

    /* Active => bullet to the right inside track */
    .w6-toolbar-toggle.w6-toggle-theme.is-active::before,
    .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::before {
        transform: translate(-2px, -50%); /* right padding inside track */
    }

    /* ---------- Focus ---------- */
    .w6-toolbar-toggle.w6-toggle-theme:focus-visible {
        box-shadow: 0 0 0 3px rgba(11, 79, 158, 0.35);
    }

/* ============================================================
   THEME: LIGHT
   ============================================================ */
[data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06);
}

    /* Hover: only slight color change, NO movement */
    [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme:hover {
        background: #f7f9fc;
        border-color: rgba(15, 23, 42, 0.18);
    }

    /* Track */
    [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme::after {
        background: rgba(15, 23, 42, 0.08);
        border-color: rgba(15, 23, 42, 0.18);
    }

    /* Bullet */
    [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme::before {
        background: #ffffff;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.12);
    }

    /* Active */
    [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme.is-active,
    [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"] {
        border-color: rgba(11, 79, 158, 0.30);
    }

        [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme.is-active::after,
        [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::after {
            background: rgba(11, 79, 158, 0.16);
            border-color: rgba(11, 79, 158, 0.40);
        }

        [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme.is-active::before,
        [data-wiso-theme="light"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::before {
            background: #0b4f9e;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 14px rgba(11, 79, 158, 0.25);
        }

/* ============================================================
   THEME: DARK
   ============================================================ */
[data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme {
    color: rgba(255, 255, 255, 0.92);
    background: #111c33;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 10px 22px rgba(0, 0, 0, 0.22);
}

    /* Hover: only slight color change */
    [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme:hover {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.16);
    }

    /* Track */
    [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme::after {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.16);
    }

    /* Bullet */
    [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme::before {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 8px 14px rgba(0, 0, 0, 0.28);
    }

    /* Active */
    [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme.is-active,
    [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"] {
        border-color: rgba(11, 79, 158, 0.55);
    }

        [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme.is-active::after,
        [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::after {
            background: rgba(11, 79, 158, 0.26);
            border-color: rgba(11, 79, 158, 0.70);
        }

        [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme.is-active::before,
        [data-wiso-theme="dark"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::before {
            background: #0b4f9e;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.30), 0 10px 18px rgba(11, 79, 158, 0.28);
        }

/* ============================================================
   THEME: CONTRAST-LIGHT
   ============================================================ */
[data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme {
    color: #000;
    background: #fff;
    border-color: #000;
    box-shadow: none;
}

    [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme:hover {
        background: #f4f4f4;
    }

    [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme::after {
        background: #fff;
        border-color: #000;
    }

    [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme::before {
        background: #000;
        box-shadow: none;
    }

    [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme.is-active,
    [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"] {
        border-color: #0b4f9e;
    }

        [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme.is-active::after,
        [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::after {
            border-color: #0b4f9e;
            background: rgba(11, 79, 158, 0.10);
        }

        [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme.is-active::before,
        [data-wiso-theme="contrast-light"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::before {
            background: #0b4f9e;
        }

/* ============================================================
   THEME: CONTRAST-DARK
   ============================================================ */
[data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme {
    color: #fff;
    background: #0b1220;
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: none;
}

    [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme:hover {
        background: #0f172a;
    }

    [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme::after {
        background: #0b1220;
        border-color: rgba(255, 255, 255, 0.75);
    }

    [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme::before {
        background: #fff;
        box-shadow: none;
    }

    [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme.is-active,
    [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"] {
        border-color: #0b4f9e;
    }

        [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme.is-active::after,
        [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::after {
            background: rgba(11, 79, 158, 0.18);
            border-color: #0b4f9e;
        }

        [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme.is-active::before,
        [data-wiso-theme="contrast-dark"] .w6-toolbar-toggle.w6-toggle-theme[data-w6-toggle-state="1"]::before {
            background: #0b4f9e;
        }

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .w6-toolbar-toggle.w6-toggle-theme,
    .w6-toolbar-toggle.w6-toggle-theme::before,
    .w6-toolbar-toggle.w6-toggle-theme::after {
        transition: none !important;
    }
}