// Switch Component Styles
// Uses CSS variables for animation control via AnimationBuilder
// Integrates with Glow wrapper for mouse-following highlight effect

.hi-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.hi-switch-label:has(.hi-switch-disabled) {
    cursor: not-allowed;
}

// Wrapper that positions glow behind the switch
.hi-switch-glow-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
}

// Switch-specific glow wrapper - must override default glow radius
.hi-switch-label .hi-switch-glow.hi-glow-wrapper {
    position: absolute;
    inset: -4px;
    border-radius: 6px !important;
    overflow: visible;
    z-index: 0;
}

// Ensure glow overlay also uses switch radius
.hi-switch-label .hi-switch-glow::before {
    border-radius: 6px;
}

// Very subtle glow for switch - preserves background colors while keeping mouse-follow effect
.hi-switch-label .hi-switch-glow.hi-glow-dim::before {
    --hi-glow-opacity: 0.015;
    --hi-glow-spread: 2.5;
}

.hi-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: var(--hi-color-border, #d1d5db);
    border: 1.5px solid transparent;
    border-radius: 9999px;
    transition: background-color var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease),
                border-color var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease),
                box-shadow var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease),
                filter var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease);
    vertical-align: middle;
    z-index: 1;
    box-sizing: border-box;
}

.hi-switch-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3px;
    box-sizing: border-box;
}

.hi-switch-sm { height: 20px; min-width: 36px; }
.hi-switch-md { height: 26px; min-width: 48px; }
.hi-switch-lg { height: 32px; min-width: 60px; }

.hi-switch-text-variant.hi-switch-sm { min-width: 44px; }
.hi-switch-text-variant.hi-switch-md { min-width: 56px; }
.hi-switch-text-variant.hi-switch-lg { min-width: 72px; }

.hi-switch-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hi-surface, #FFFFFF);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease),
                background-color var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease),
                box-shadow var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease);
    flex-shrink: 0;
    box-sizing: border-box;
}

.hi-switch-sm .hi-switch-thumb { width: 14px; height: 14px; }
.hi-switch-md .hi-switch-thumb { width: 20px; height: 20px; }
.hi-switch-lg .hi-switch-thumb { width: 26px; height: 26px; }

.hi-switch-text-variant .hi-switch-thumb { padding: 0 4px; }
.hi-switch-sm.hi-switch-text-variant .hi-switch-thumb { width: auto; min-width: 18px; }
.hi-switch-md.hi-switch-text-variant .hi-switch-thumb { width: auto; min-width: 24px; }
.hi-switch-lg.hi-switch-text-variant .hi-switch-thumb { width: auto; min-width: 30px; }

.hi-switch-checked .hi-switch-track {
    justify-content: flex-end;
}

.hi-switch-sm.hi-switch-checked .hi-switch-thumb { transform: translateX(16px); }
.hi-switch-md.hi-switch-checked .hi-switch-thumb { transform: translateX(22px); }
.hi-switch-lg.hi-switch-checked .hi-switch-thumb { transform: translateX(28px); }

.hi-switch-text-variant.hi-switch-checked .hi-switch-thumb { transform: translateX(0); }

// Default checked state - Success color with glow
.hi-switch-checked {
    background-color: var(--hi-success, #10B981);
    border-color: var(--hi-success, #10B981);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.12);
}

.hi-switch-checked .hi-switch-thumb {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 4px rgba(16, 185, 129, 0.25);
}

// Hover with  brightness + glow boost
.hi-switch-checked:hover:not(.hi-switch-disabled) {
    filter: brightness(1.06);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35), inset 0 0 4px rgba(255, 255, 255, 0.18);
}

// Unchecked hover - subtle border glow ( style)
.hi-switch:hover:not(.hi-switch-disabled):not(.hi-switch-checked) {
    border-color: var(--hi-color-primary, var(--hi-primary, #FFB3A7));
    box-shadow: 0 0 8px var(--hi-glow-primary-sm, rgba(255, 179, 167, 0.15));
}

.hi-switch-disabled {
    opacity: 0.4;
    pointer-events: none;
}

// Color variants with glow
.hi-switch-color-primary.hi-switch-checked {
    background-color: var(--hi-color-primary, #1890ff);
    border-color: var(--hi-color-primary, #1890ff);
    box-shadow: 0 0 6px rgba(24, 144, 255, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.12);
}
.hi-switch-color-secondary.hi-switch-checked {
    background-color: var(--hi-secondary, #4B5CC4);
    border-color: var(--hi-secondary, #4B5CC4);
    box-shadow: 0 0 6px rgba(75, 92, 196, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.12);
}
.hi-switch-color-danger.hi-switch-checked {
    background-color: var(--hi-danger, #EF4444);
    border-color: var(--hi-danger, #EF4444);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.12);
}
.hi-switch-color-warning.hi-switch-checked {
    background-color: var(--hi-warning, #FBBF24);
    border-color: var(--hi-warning, #FBBF24);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.12);
}
.hi-switch-color-info.hi-switch-checked {
    background-color: var(--hi-info, #065279);
    border-color: var(--hi-info, #065279);
    box-shadow: 0 0 6px rgba(6, 82, 121, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.12);
}

.hi-switch-color-primary .hi-switch-thumb-dot { background-color: var(--hi-color-primary, #1890ff); }
.hi-switch-color-secondary .hi-switch-thumb-dot { background-color: var(--hi-secondary, #4B5CC4); }
.hi-switch-color-danger .hi-switch-thumb-dot { background-color: var(--hi-danger, #EF4444); }
.hi-switch-color-warning .hi-switch-thumb-dot { background-color: var(--hi-warning, #FBBF24); }
.hi-switch-color-info .hi-switch-thumb-dot { background-color: var(--hi-info, #065279); }

.hi-switch-color-primary .hi-switch-thumb-text,
.hi-switch-color-primary .hi-switch-thumb-icon { color: var(--hi-color-primary, #1890ff); }
.hi-switch-color-secondary .hi-switch-thumb-text,
.hi-switch-color-secondary .hi-switch-thumb-icon { color: var(--hi-secondary, #4B5CC4); }
.hi-switch-color-danger .hi-switch-thumb-text,
.hi-switch-color-danger .hi-switch-thumb-icon { color: var(--hi-danger, #EF4444); }
.hi-switch-color-warning .hi-switch-thumb-text,
.hi-switch-color-warning .hi-switch-thumb-icon { color: var(--hi-warning, #FBBF24); }
.hi-switch-color-info .hi-switch-thumb-text,
.hi-switch-color-info .hi-switch-thumb-icon { color: var(--hi-info, #065279); }

// Thumb dot (default variant)
.hi-switch-thumb-dot {
    width: 8px;
    height: 8px;
    background-color: var(--hi-color-border, #bfbfbf);
    border-radius: 50%;
    transition: background-color var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease);
}

.hi-switch-sm .hi-switch-thumb-dot { width: 6px; height: 6px; }
.hi-switch-lg .hi-switch-thumb-dot { width: 10px; height: 10px; }

.hi-switch-checked .hi-switch-thumb-dot {
    background-color: var(--hi-success, #10B981);
}

// Color-specific thumb dot for checked state (inherits switch color)
.hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-color-primary, #1890ff); }
.hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-secondary, #4B5CC4); }
.hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-danger, #EF4444); }
.hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-warning, #FBBF24); }
.hi-switch-color-info.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-info, #065279); }

// Thumb text (text variant)
.hi-switch-thumb-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--hi-color-border, #bfbfbf);
    white-space: nowrap;
    line-height: 1;
    transition: color var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease);
}

.hi-switch-sm .hi-switch-thumb-text { font-size: 9px; }
.hi-switch-lg .hi-switch-thumb-text { font-size: 13px; }

.hi-switch-checked .hi-switch-thumb-text {
    color: var(--hi-success, #10B981);
}

// Thumb icon (icon variant)
.hi-switch-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hi-color-border, #bfbfbf);
    transition: color var(--hi-duration-fast, 0.2s) var(--hi-ease-smooth, ease);
}

.hi-switch-sm .hi-switch-thumb-icon svg { width: 10px; height: 10px; }
.hi-switch-md .hi-switch-thumb-icon svg { width: 14px; height: 14px; }
.hi-switch-lg .hi-switch-thumb-icon svg { width: 18px; height: 18px; }

.hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-success, #10B981);
}

// Color-specific thumb text/icon for checked state
.hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-text,
.hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-icon { color: var(--hi-color-primary, #1890ff); }
.hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-text,
.hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-icon { color: var(--hi-secondary, #4B5CC4); }
.hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-text,
.hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-icon { color: var(--hi-danger, #EF4444); }
.hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-text,
.hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-icon { color: var(--hi-warning, #FBBF24); }
.hi-switch-color-info.hi-switch-checked .hi-switch-thumb-text,
.hi-switch-color-info.hi-switch-checked .hi-switch-thumb-icon { color: var(--hi-info, #065279); }

// Thumb image (custom variant)
.hi-switch-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

// Label text
.hi-switch-text {
    font-size: 14px;
    color: var(--hi-color-text-primary, #333);
    line-height: 1.5;
}

// Dark theme - all using CSS variables for consistency
[data-theme="dark"] .hi-switch,
[data-theme="tairitsu"] .hi-switch {
    background-color: rgba(240, 240, 245, 0.12);
}

[data-theme="dark"] .hi-switch-thumb,
[data-theme="tairitsu"] .hi-switch-thumb {
    background-color: var(--hi-background, #161823);
}

[data-theme="dark"] .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-thumb-dot {
    background-color: var(--hi-text-disabled, #6B7280);
}

[data-theme="dark"] .hi-switch-checked,
[data-theme="tairitsu"] .hi-switch-checked {
    background-color: var(--hi-success, #0EB840);
}

// Color variants in dark theme
[data-theme="dark"] .hi-switch-color-primary.hi-switch-checked,
[data-theme="tairitsu"] .hi-switch-color-primary.hi-switch-checked { background-color: var(--hi-primary, #144A74); }
[data-theme="dark"] .hi-switch-color-secondary.hi-switch-checked,
[data-theme="tairitsu"] .hi-switch-color-secondary.hi-switch-checked { background-color: var(--hi-secondary, #FFC773); }
[data-theme="dark"] .hi-switch-color-danger.hi-switch-checked,
[data-theme="tairitsu"] .hi-switch-color-danger.hi-switch-checked { background-color: var(--hi-danger, #FF4C00); }
[data-theme="dark"] .hi-switch-color-warning.hi-switch-checked,
[data-theme="tairitsu"] .hi-switch-color-warning.hi-switch-checked { background-color: var(--hi-warning, #FFA631); }
[data-theme="dark"] .hi-switch-color-info.hi-switch-checked,
[data-theme="tairitsu"] .hi-switch-color-info.hi-switch-checked { background-color: var(--hi-info, #144A74); }

// Thumb dot colors in dark theme for checked state
[data-theme="dark"] .hi-switch-checked .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-success, #0EB840); }
[data-theme="dark"] .hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-primary, #144A74); }
[data-theme="dark"] .hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-secondary, #FFC773); }
[data-theme="dark"] .hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-danger, #FF4C00); }
[data-theme="dark"] .hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-warning, #FFA631); }
[data-theme="dark"] .hi-switch-color-info.hi-switch-checked .hi-switch-thumb-dot,
[data-theme="tairitsu"] .hi-switch-color-info.hi-switch-checked .hi-switch-thumb-dot { background-color: var(--hi-info, #144A74); }

// Thumb text/icon in dark theme - unchecked state
[data-theme="dark"] .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-thumb-icon {
    color: var(--hi-text-disabled, #6B7280);
}

// Thumb text/icon in dark theme - checked state
[data-theme="dark"] .hi-switch-checked .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-checked .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-checked .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-success, #0EB840);
}

// Dark theme checked text/icon per color variant
[data-theme="dark"] .hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-color-primary.hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-primary, #144A74);
}
[data-theme="dark"] .hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-color-secondary.hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-secondary, #FFC773);
}
[data-theme="dark"] .hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-color-danger.hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-danger, #FF4C00);
}
[data-theme="dark"] .hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-color-warning.hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-warning, #FFA631);
}
[data-theme="dark"] .hi-switch-color-info.hi-switch-checked .hi-switch-thumb-text,
[data-theme="dark"] .hi-switch-color-info.hi-switch-checked .hi-switch-thumb-icon,
[data-theme="tairitsu"] .hi-switch-color-info.hi-switch-checked .hi-switch-thumb-text,
[data-theme="tairitsu"] .hi-switch-color-info.hi-switch-checked .hi-switch-thumb-icon {
    color: var(--hi-info, #144A74);
}

[data-theme="dark"] .hi-switch-text,
[data-theme="tairitsu"] .hi-switch-text {
    color: var(--hi-text-primary, #F0F0F5);
}

// Focus state for accessibility
.hi-switch-label:focus-within .hi-switch {
    outline: 2px solid var(--hi-color-primary, #1890ff);
    outline-offset: 2px;
}
