/* src/components/basic/XWUIInputSwitch/XWUIInputSwitch.css */
/**
 * XWUIInputSwitch Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.xwui-switch-label-start {
    flex-direction: row-reverse;
}

.xwui-switch-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Track */
.xwui-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-control, 999px);
    background: var(--xwui-switch-unchecked-bg, var(--border-color, #dee2e6));
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

/* Track with custom content (no thumb) */
.xwui-switch-track-content {
    justify-content: space-between;
    padding: 2px 4px;
}

/* Thumb - Clear circle styling matching slider tooltip
 *
 * Off sits at the inline START of the track and on at the inline END, so an
 * Arabic (RTL) switch slides right-to-left like the label row around it. The
 * thumb therefore moves on `inset-inline-start`, never on a transform: there
 * is no logical translate, and the old physical 2px left offset plus a
 * positive translateX slid an RTL switch the LTR way (xwerp-web Phase 0 gap
 * 100). The price is a small relayout per frame of the 0.2s slide instead of
 * a composited one - under 1 ms of layout for the whole slide in Chromium when
 * this changed - and a switch that slides the wrong way in Arabic is the
 * larger defect. */
.xwui-switch-thumb {
    position: absolute;
    border-radius: 50%;
    background: var(--text-inverse, #ffffff);
    border: 2px solid var(--border-color, #dee2e6);
    box-shadow: var(--shadow-thumb);
    transition: inset-inline-start 0.2s ease, box-shadow 0.2s ease;
}

/* Size variants */
:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-track {
    width: 32px;
    height: 18px;
}

:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-thumb {
    width: 14px;
    height: 14px;
    inset-inline-start: 2px;
}

:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    inset-inline-start: 16px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-track {
    width: 44px;
    height: 24px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-thumb {
    width: 20px;
    height: 20px;
    inset-inline-start: 2px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    inset-inline-start: 22px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-input:checked + .xwui-switch-track-content .xwui-switch-content-checked {
    inset-inline: auto 4px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-track {
    width: 56px;
    height: 30px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-thumb {
    width: 26px;
    height: 26px;
    inset-inline-start: 2px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    inset-inline-start: 28px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-input:checked + .xwui-switch-track-content .xwui-switch-content-checked {
    inset-inline: auto 4px;
}

/* Checked state */
.xwui-switch-input:checked + .xwui-switch-track {
    background: var(--xwui-switch-checked-bg, var(--accent-primary, #4f46e5));
    box-shadow: var(--glow-switch-track-checked, none);
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    background: var(--xwui-switch-checked-thumb, var(--text-inverse, #ffffff));
    border-color: var(--xwui-switch-checked-thumb-border, var(--accent-primary, #4f46e5));
    box-shadow: var(--glow-switch-thumb-checked);
}

/* Focus state */
.xwui-switch-input:focus-visible + .xwui-switch-track {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: 2px;
}

.xwui-switch-input:focus-visible + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-focus);
}

/* Hover state */
.xwui-switch:hover .xwui-switch-track {
    background: var(--border-strong, #adb5bd);
}

.xwui-switch:hover .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-hover);
}

.xwui-switch:hover .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-hover, #4338ca);
    box-shadow: var(--glow-switch-track-checked, none);
}

.xwui-switch:hover .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-hover-checked);
}

/* Color variants */
.xwui-switch-success .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-success, #10b981);
}

.xwui-switch-success .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-success, #10b981);
    box-shadow: var(--glow-switch-success-thumb);
}

.xwui-switch-success:hover .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-success-hover, #059669);
}

.xwui-switch-success:hover .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-success-thumb-hover);
}

.xwui-switch-warning .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-warning, #f59e0b);
}

.xwui-switch-warning .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-warning, #f59e0b);
    box-shadow: var(--glow-switch-warning-thumb);
}

.xwui-switch-error .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-error, #ef4444);
}

.xwui-switch-error .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-error, #ef4444);
    box-shadow: var(--glow-switch-error-thumb);
}

/* Custom content (icons, emojis, text) */
.xwui-switch-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-user-select: none;
            user-select: none;
    line-height: 1;
    flex-shrink: 0;
}

/* The faces stand in for the thumb, so they follow it: the off face at the
 * inline start, the on face at the inline end. Each face states BOTH inline
 * sides (`inset-inline: <start> <end>`) so the side it is not on is an
 * explicit auto: a face whose width is auto and which is pinned on both sides
 * stretches across the track instead of sitting at its edge. */
.xwui-switch-content-unchecked {
    opacity: 1;
    position: absolute;
    inset-inline: 4px auto;
    top: 50%;
    transform: translateY(-50%);
}

.xwui-switch-content-checked {
    opacity: 0;
    position: absolute;
    inset-inline: auto 4px;
    top: 50%;
    transform: translateY(-50%);
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-content-unchecked {
    opacity: 0;
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-content-checked {
    opacity: 1;
    position: absolute;
    inset-inline: auto 4px;
    transform: translateY(-50%);
}

/* Size adjustments for custom content */
:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-content {
    font-size: 10px;
    min-width: 14px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-content {
    font-size: 12px;
    min-width: 18px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-content {
    font-size: 14px;
    min-width: 22px;
}

/* Text content */
.xwui-switch-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-switch-label {
    font-size: var(--xwui-field-label-size, var(--font-size-sm, 0.875rem));
    font-weight: var(--xwui-field-label-weight, var(--font-weight-medium, 500));
    color: var(--xwui-field-label-color, var(--text-primary));
    line-height: var(--xwui-field-label-line-height, 1.5);
    font-family: var(--xwui-field-label-family, var(--font-label-family, var(--font-family-base, sans-serif)));
}

.xwui-switch-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Multi-state switch */
.xwui-switch-multi {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    position: relative; /* For tooltip positioning */
}

.xwui-switch-track-multi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-control, 999px);
    background: var(--border-color, #dee2e6);
    border: 1px solid var(--border-strong, #adb5bd);
    transition: background 0.2s ease;
}

.xwui-switch-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-control, 999px);
    background: transparent;
    cursor: pointer;
    /* Narrow transition to the properties that actually change - previously
     * `all 0.2s ease` forced the browser to consider every property as
     * potentially animating on every state change, which compounded with
     * the moving-thumb transform animation and caused the laggy feel
     * users reported. Only color and background transition now. */
    transition: color 0.15s ease, background-color 0.15s ease;
    color: var(--text-secondary, #6c757d);
    min-width: var(--xwui-switch-height-md);
    height: var(--xwui-switch-height-md);
    min-height: var(--xwui-switch-height-md);
    line-height: var(--xwui-control-line-height, 1);
    box-sizing: border-box;
}

.xwui-switch-option:hover:not(:disabled) {
    background: var(--overlay-xs);
    color: var(--text-primary, #212529);
}

.xwui-switch-option-selected {
    /* The pill here is painted with --accent-primary (a saturated brand color
       like indigo/blue/purple). Its foreground must contrast with the PILL,
       not with the page - so we use --accent-primary-fg (falls back to white,
       which every brand accent is designed to pair with).
       Previously this used --text-inverse, which flips to dark on dark themes
       → dark icon on purple pill, ~1.7:1 contrast, unreadable. */
    background: var(--accent-primary, #4f46e5);
    color: var(--accent-primary-fg, #ffffff);
    box-shadow: var(--shadow-thumb);
}

.xwui-switch-option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.xwui-switch-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Size variants for multi-state */
:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-option {
    padding: 0 8px;
    min-width: var(--xwui-switch-height-sm);
    height: var(--xwui-switch-height-sm);
    min-height: var(--xwui-switch-height-sm);
    font-size: var(--xwui-size-font-sm, 12px);
}

:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-option-icon {
    width: 16px;
    height: 16px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-option {
    padding: 0 10px;
    min-width: var(--xwui-switch-height-md);
    height: var(--xwui-switch-height-md);
    min-height: var(--xwui-switch-height-md);
    font-size: var(--xwui-size-font-md, 14px);
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-option-icon {
    width: 20px;
    height: 20px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-option {
    padding: 0 14px;
    min-width: var(--xwui-switch-height-lg);
    height: var(--xwui-switch-height-lg);
    min-height: var(--xwui-switch-height-lg);
    font-size: var(--xwui-size-font-lg, 16px);
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-option-icon {
    width: 24px;
    height: 24px;
}

/* ── Multi switch: moving-thumb highlight (binary-switch-like UX) ────── */

/* When moving-thumb is active, the track becomes the positioning context
   for the absolutely-positioned thumb circle. */
.xwui-switch-moving-thumb .xwui-switch-track-multi {
    position: relative;
}

/* The moving thumb: a pill that slides behind the selected option.
 *
 * Performance notes:
 *   • Only `transform` is transitioned - `width` is snapped instantly.
 *     Transitioning width costs a layout pass every frame; translating
 *     a promoted element is GPU-composited and essentially free.
 *   • `will-change: transform` hints the browser to promote this node
 *     to its own compositing layer upfront so the first slide doesn't
 *     stutter while the layer is created mid-animation.
 *   • The JS uses translate3d() (not translateX) so compositing kicks
 *     in even on browsers that only promote 3D-transformed layers.
 *
 * The `-no-transition` modifier class is set by the TS side on the very
 * first position-set after mount - without this, the thumb would animate
 * from its default (transform: none, so left edge = padding edge) to the
 * active option's offsetLeft, which looks like the thumb "flies in" on
 * page load.
 */
.xwui-switch-multi-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    /* left MUST be 0 so that `transform: translate3d(target.offsetLeft, …)`
     * lands the thumb's left edge exactly on the option's left edge.
     *
     * Both `offsetLeft` (on the JS side) and an abs-positioned element's
     * `left` (on the CSS side) are measured from the offsetParent's padding
     * edge. A non-zero CSS `left` therefore *adds* to the transform and
     * shifts the thumb that same amount to the right of the option it's
     * supposed to cover. The previous `left: 2px` produced a 2-pixel
     * rightward offset on every position - visible as the thumb sitting
     * slightly clipped-right over each icon.
     *
     * This is the one PHYSICAL offset in the file, on purpose, and it is
     * already right in RTL: offsetLeft is measured from the physical left in
     * both directions, so the physical `left` it pairs with must stay. An
     * `inset-inline-start` here would anchor an RTL thumb on the right edge
     * and then push it further right by the option's left offset. */
    left: 0;
    width: 36px; /* overridden inline to match selected option (snapped) */
    border-radius: var(--radius-control, 999px);
    background: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-thumb);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.xwui-switch-multi-thumb-no-transition {
    transition: none !important;
}

/* In moving-thumb mode, the selected option shows text/icon in the inverse
   color but DOES NOT paint its own pill background - the thumb handles that. */
.xwui-switch-moving-thumb .xwui-switch-option {
    position: relative;
    z-index: 1;
    background: transparent !important;
    box-shadow: none !important;
}
.xwui-switch-moving-thumb .xwui-switch-option-selected {
    /* The thumb behind this option is painted with --accent-primary; the icon
       must contrast with the thumb (saturated accent color), not with the page
       background. See `.xwui-switch-option-selected` above for full rationale. */
    background: transparent !important;
    color: var(--accent-primary-fg, #ffffff);
}
.xwui-switch-moving-thumb .xwui-switch-option:hover:not(:disabled) {
    background: transparent !important;
}

/* ── Compact multi switch (single visible option, cycles on press) ───── */

.xwui-switch-compact .xwui-switch-track-multi {
    /* The single option is itself the pill; no separate thumb needed. */
    padding: 2px;
    min-width: 40px;
}

.xwui-switch-compact .xwui-switch-option {
    /* In compact, the visible option is the pill - match the binary-switch feel. */
    border-radius: var(--radius-control, 999px);
    cursor: pointer;
}

/* Slight press-feedback so it feels clickable */
.xwui-switch-compact .xwui-switch-option:active:not(:disabled) {
    transform: scale(0.96);
    transition: transform 0.12s ease;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Generated shared control scale: tools/build-styles/control-size-contract.mjs */
:is(.xwui-switch.xwui-switch-xxxxs,.xwui-switch.xwui-switch-4xs) { --xwui-control-height: var(--xwui-switch-height-xxxxs); --xwui-control-font-size: var(--xwui-size-font-xxxxs); }
:is(.xwui-switch.xwui-switch-xxxxs,.xwui-switch.xwui-switch-4xs) { min-height: var(--xwui-switch-height-xxxxs); align-items: center; }
:is(.xwui-switch.xwui-switch-xxxxs,.xwui-switch.xwui-switch-4xs) .xwui-switch-track { width: calc(var(--xwui-switch-height-xxxxs) * 1.1); height: calc(var(--xwui-switch-height-xxxxs) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-xxxxs,.xwui-switch.xwui-switch-4xs) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xxxxs) * .5); height: calc(var(--xwui-switch-height-xxxxs) * .5); inset-inline-start: calc(var(--xwui-switch-height-xxxxs) * .05); }
:is(.xwui-switch.xwui-switch-xxxxs,.xwui-switch.xwui-switch-4xs).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xxxxs) * .55); }
:is(.xwui-switch.xwui-switch-xxxs,.xwui-switch.xwui-switch-3xs) { --xwui-control-height: var(--xwui-switch-height-xxxs); --xwui-control-font-size: var(--xwui-size-font-xxxs); }
:is(.xwui-switch.xwui-switch-xxxs,.xwui-switch.xwui-switch-3xs) { min-height: var(--xwui-switch-height-xxxs); align-items: center; }
:is(.xwui-switch.xwui-switch-xxxs,.xwui-switch.xwui-switch-3xs) .xwui-switch-track { width: calc(var(--xwui-switch-height-xxxs) * 1.1); height: calc(var(--xwui-switch-height-xxxs) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-xxxs,.xwui-switch.xwui-switch-3xs) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xxxs) * .5); height: calc(var(--xwui-switch-height-xxxs) * .5); inset-inline-start: calc(var(--xwui-switch-height-xxxs) * .05); }
:is(.xwui-switch.xwui-switch-xxxs,.xwui-switch.xwui-switch-3xs).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xxxs) * .55); }
:is(.xwui-switch.xwui-switch-xxs,.xwui-switch.xwui-switch-2xs,.xwui-switch.xwui-switch-tiny) { --xwui-control-height: var(--xwui-switch-height-xxs); --xwui-control-font-size: var(--xwui-size-font-xxs); }
:is(.xwui-switch.xwui-switch-xxs,.xwui-switch.xwui-switch-2xs,.xwui-switch.xwui-switch-tiny) { min-height: var(--xwui-switch-height-xxs); align-items: center; }
:is(.xwui-switch.xwui-switch-xxs,.xwui-switch.xwui-switch-2xs,.xwui-switch.xwui-switch-tiny) .xwui-switch-track { width: calc(var(--xwui-switch-height-xxs) * 1.1); height: calc(var(--xwui-switch-height-xxs) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-xxs,.xwui-switch.xwui-switch-2xs,.xwui-switch.xwui-switch-tiny) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xxs) * .5); height: calc(var(--xwui-switch-height-xxs) * .5); inset-inline-start: calc(var(--xwui-switch-height-xxs) * .05); }
:is(.xwui-switch.xwui-switch-xxs,.xwui-switch.xwui-switch-2xs,.xwui-switch.xwui-switch-tiny).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xxs) * .55); }
.xwui-switch.xwui-switch-xs { --xwui-control-height: var(--xwui-switch-height-xs); --xwui-control-font-size: var(--xwui-size-font-xs); }
.xwui-switch.xwui-switch-xs { min-height: var(--xwui-switch-height-xs); align-items: center; }
.xwui-switch.xwui-switch-xs .xwui-switch-track { width: calc(var(--xwui-switch-height-xs) * 1.1); height: calc(var(--xwui-switch-height-xs) * .6); box-sizing: border-box; }
.xwui-switch.xwui-switch-xs .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xs) * .5); height: calc(var(--xwui-switch-height-xs) * .5); inset-inline-start: calc(var(--xwui-switch-height-xs) * .05); }
.xwui-switch.xwui-switch-xs.xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xs) * .55); }
:is(.xwui-switch.xwui-switch-sm,.xwui-switch.xwui-switch-s,.xwui-switch.xwui-switch-small) { --xwui-control-height: var(--xwui-switch-height-sm); --xwui-control-font-size: var(--xwui-size-font-sm); }
:is(.xwui-switch.xwui-switch-sm,.xwui-switch.xwui-switch-s,.xwui-switch.xwui-switch-small) { min-height: var(--xwui-switch-height-sm); align-items: center; }
:is(.xwui-switch.xwui-switch-sm,.xwui-switch.xwui-switch-s,.xwui-switch.xwui-switch-small) .xwui-switch-track { width: calc(var(--xwui-switch-height-sm) * 1.1); height: calc(var(--xwui-switch-height-sm) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-sm,.xwui-switch.xwui-switch-s,.xwui-switch.xwui-switch-small) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-sm) * .5); height: calc(var(--xwui-switch-height-sm) * .5); inset-inline-start: calc(var(--xwui-switch-height-sm) * .05); }
:is(.xwui-switch.xwui-switch-sm,.xwui-switch.xwui-switch-s,.xwui-switch.xwui-switch-small).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-sm) * .55); }
:is(.xwui-switch.xwui-switch-md,.xwui-switch.xwui-switch-m,.xwui-switch.xwui-switch-medium) { --xwui-control-height: var(--xwui-switch-height-md); --xwui-control-font-size: var(--xwui-size-font-md); }
:is(.xwui-switch.xwui-switch-md,.xwui-switch.xwui-switch-m,.xwui-switch.xwui-switch-medium) { min-height: var(--xwui-switch-height-md); align-items: center; }
:is(.xwui-switch.xwui-switch-md,.xwui-switch.xwui-switch-m,.xwui-switch.xwui-switch-medium) .xwui-switch-track { width: calc(var(--xwui-switch-height-md) * 1.1); height: calc(var(--xwui-switch-height-md) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-md,.xwui-switch.xwui-switch-m,.xwui-switch.xwui-switch-medium) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-md) * .5); height: calc(var(--xwui-switch-height-md) * .5); inset-inline-start: calc(var(--xwui-switch-height-md) * .05); }
:is(.xwui-switch.xwui-switch-md,.xwui-switch.xwui-switch-m,.xwui-switch.xwui-switch-medium).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-md) * .55); }
:is(.xwui-switch.xwui-switch-lg,.xwui-switch.xwui-switch-l,.xwui-switch.xwui-switch-large) { --xwui-control-height: var(--xwui-switch-height-lg); --xwui-control-font-size: var(--xwui-size-font-lg); }
:is(.xwui-switch.xwui-switch-lg,.xwui-switch.xwui-switch-l,.xwui-switch.xwui-switch-large) { min-height: var(--xwui-switch-height-lg); align-items: center; }
:is(.xwui-switch.xwui-switch-lg,.xwui-switch.xwui-switch-l,.xwui-switch.xwui-switch-large) .xwui-switch-track { width: calc(var(--xwui-switch-height-lg) * 1.1); height: calc(var(--xwui-switch-height-lg) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-lg,.xwui-switch.xwui-switch-l,.xwui-switch.xwui-switch-large) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-lg) * .5); height: calc(var(--xwui-switch-height-lg) * .5); inset-inline-start: calc(var(--xwui-switch-height-lg) * .05); }
:is(.xwui-switch.xwui-switch-lg,.xwui-switch.xwui-switch-l,.xwui-switch.xwui-switch-large).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-lg) * .55); }
.xwui-switch.xwui-switch-xl { --xwui-control-height: var(--xwui-switch-height-xl); --xwui-control-font-size: var(--xwui-size-font-xl); }
.xwui-switch.xwui-switch-xl { min-height: var(--xwui-switch-height-xl); align-items: center; }
.xwui-switch.xwui-switch-xl .xwui-switch-track { width: calc(var(--xwui-switch-height-xl) * 1.1); height: calc(var(--xwui-switch-height-xl) * .6); box-sizing: border-box; }
.xwui-switch.xwui-switch-xl .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xl) * .5); height: calc(var(--xwui-switch-height-xl) * .5); inset-inline-start: calc(var(--xwui-switch-height-xl) * .05); }
.xwui-switch.xwui-switch-xl.xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xl) * .55); }
:is(.xwui-switch.xwui-switch-xxl,.xwui-switch.xwui-switch-2xl) { --xwui-control-height: var(--xwui-switch-height-xxl); --xwui-control-font-size: var(--xwui-size-font-xxl); }
:is(.xwui-switch.xwui-switch-xxl,.xwui-switch.xwui-switch-2xl) { min-height: var(--xwui-switch-height-xxl); align-items: center; }
:is(.xwui-switch.xwui-switch-xxl,.xwui-switch.xwui-switch-2xl) .xwui-switch-track { width: calc(var(--xwui-switch-height-xxl) * 1.1); height: calc(var(--xwui-switch-height-xxl) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-xxl,.xwui-switch.xwui-switch-2xl) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xxl) * .5); height: calc(var(--xwui-switch-height-xxl) * .5); inset-inline-start: calc(var(--xwui-switch-height-xxl) * .05); }
:is(.xwui-switch.xwui-switch-xxl,.xwui-switch.xwui-switch-2xl).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xxl) * .55); }
:is(.xwui-switch.xwui-switch-xxxl,.xwui-switch.xwui-switch-3xl) { --xwui-control-height: var(--xwui-switch-height-xxxl); --xwui-control-font-size: var(--xwui-size-font-xxxl); }
:is(.xwui-switch.xwui-switch-xxxl,.xwui-switch.xwui-switch-3xl) { min-height: var(--xwui-switch-height-xxxl); align-items: center; }
:is(.xwui-switch.xwui-switch-xxxl,.xwui-switch.xwui-switch-3xl) .xwui-switch-track { width: calc(var(--xwui-switch-height-xxxl) * 1.1); height: calc(var(--xwui-switch-height-xxxl) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-xxxl,.xwui-switch.xwui-switch-3xl) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xxxl) * .5); height: calc(var(--xwui-switch-height-xxxl) * .5); inset-inline-start: calc(var(--xwui-switch-height-xxxl) * .05); }
:is(.xwui-switch.xwui-switch-xxxl,.xwui-switch.xwui-switch-3xl).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xxxl) * .55); }
:is(.xwui-switch.xwui-switch-xxxxl,.xwui-switch.xwui-switch-4xl) { --xwui-control-height: var(--xwui-switch-height-xxxxl); --xwui-control-font-size: var(--xwui-size-font-xxxxl); }
:is(.xwui-switch.xwui-switch-xxxxl,.xwui-switch.xwui-switch-4xl) { min-height: var(--xwui-switch-height-xxxxl); align-items: center; }
:is(.xwui-switch.xwui-switch-xxxxl,.xwui-switch.xwui-switch-4xl) .xwui-switch-track { width: calc(var(--xwui-switch-height-xxxxl) * 1.1); height: calc(var(--xwui-switch-height-xxxxl) * .6); box-sizing: border-box; }
:is(.xwui-switch.xwui-switch-xxxxl,.xwui-switch.xwui-switch-4xl) .xwui-switch-thumb { width: calc(var(--xwui-switch-height-xxxxl) * .5); height: calc(var(--xwui-switch-height-xxxxl) * .5); inset-inline-start: calc(var(--xwui-switch-height-xxxxl) * .05); }
:is(.xwui-switch.xwui-switch-xxxxl,.xwui-switch.xwui-switch-4xl).xwui-switch-checked .xwui-switch-thumb { inset-inline-start: calc(100% - var(--xwui-switch-height-xxxxl) * .55); }