/* ==========================================================================
   Wenrexa Toggle Switch Component
   Pure CSS toggle that works as checkbox
   ========================================================================== */

:root {
    /* Toggle colors */
    --wen-toggle-bg-off: #39393d;
    --wen-toggle-bg-on: #30d158;
    --wen-toggle-bg-disabled: #1c1c1e;
    --wen-toggle-thumb: #ffffff;
    --wen-toggle-thumb-shadow: rgba(0, 0, 0, 0.3);
    /* Text colors */
    --wen-toggle-text: #ffffff;
    --wen-toggle-text-secondary: rgba(255, 255, 255, 0.6);
    --wen-toggle-text-disabled: rgba(255, 255, 255, 0.3);
    /* Sizes - Medium (default) */
    --wen-toggle-width: 51px;
    --wen-toggle-height: 31px;
    --wen-toggle-thumb-size: 27px;
    --wen-toggle-thumb-offset: 2px;
    /* Animation */
    --wen-toggle-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Toggle Container
   ========================================================================== */

.wen-toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wen-toggle--label-left {
    flex-direction: row-reverse;
}

.wen-toggle--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ==========================================================================
   Hidden Input (but accessible)
   ========================================================================== */

.wen-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

    /* Focus visible for accessibility */
    .wen-toggle__input:focus-visible + .wen-toggle__track {
        outline: 2px solid #0a84ff;
        outline-offset: 2px;
    }

/* ==========================================================================
   Track (the pill-shaped background)
   ========================================================================== */

.wen-toggle__track {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--wen-toggle-width);
    height: var(--wen-toggle-height);
    background: var(--wen-toggle-bg-off);
    border-radius: calc(var(--wen-toggle-height) / 2);
    cursor: pointer;
    transition: background-color var(--wen-toggle-transition);
    flex-shrink: 0;
}

/* Checked state */
.wen-toggle__input:checked + .wen-toggle__track {
    background: var(--wen-toggle-bg-on);
}

/* Disabled state */
.wen-toggle__input:disabled + .wen-toggle__track {
    background: var(--wen-toggle-bg-disabled);
    cursor: not-allowed;
}

/* Hover effect */
.wen-toggle__track:hover {
    filter: brightness(1.1);
}

.wen-toggle__input:disabled + .wen-toggle__track:hover {
    filter: none;
}

/* Active/pressed effect */
.wen-toggle__track:active .wen-toggle__thumb {
    width: calc(var(--wen-toggle-thumb-size) + 4px);
}

/* ==========================================================================
   Thumb (the sliding circle)
   ========================================================================== */

.wen-toggle__thumb {
    position: absolute;
    left: var(--wen-toggle-thumb-offset);
    width: var(--wen-toggle-thumb-size);
    height: var(--wen-toggle-thumb-size);
    background: var(--wen-toggle-thumb);
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--wen-toggle-thumb-shadow);
    transition: transform var(--wen-toggle-transition), width var(--wen-toggle-transition);
    pointer-events: none;
}

/* Checked - move thumb to right */
.wen-toggle__input:checked + .wen-toggle__track .wen-toggle__thumb {
    transform: translateX(calc(var(--wen-toggle-width) - var(--wen-toggle-thumb-size) - var(--wen-toggle-thumb-offset) * 2));
}

/* Active/pressed - stretch thumb */
.wen-toggle__track:active .wen-toggle__thumb {
    width: calc(var(--wen-toggle-thumb-size) + 4px);
}

/* When checked and active, adjust position for stretched thumb */
.wen-toggle__input:checked + .wen-toggle__track:active .wen-toggle__thumb {
    transform: translateX(calc(var(--wen-toggle-width) - var(--wen-toggle-thumb-size) - var(--wen-toggle-thumb-offset) * 2 - 4px));
}

/* ==========================================================================
   Label
   ========================================================================== */

.wen-toggle__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    padding-top: 4px; /* Align with toggle center */
}

.wen-toggle--disabled .wen-toggle__label {
    cursor: not-allowed;
}

.wen-toggle__label-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--wen-toggle-text);
    line-height: 1.4;
}

.wen-toggle--disabled .wen-toggle__label-text {
    color: var(--wen-toggle-text-disabled);
}

/* Count badge */
.wen-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wen-toggle-text-secondary);
}

/* Hint text */
.wen-toggle__hint {
    display: block;
    font-size: 12px;
    color: var(--wen-toggle-text-secondary);
    line-height: 1.4;
}

.wen-toggle--disabled .wen-toggle__hint {
    color: var(--wen-toggle-text-disabled);
}

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

/* Small */
.wen-toggle--sm {
    --wen-toggle-width: 40px;
    --wen-toggle-height: 24px;
    --wen-toggle-thumb-size: 20px;
    --wen-toggle-thumb-offset: 2px;
    gap: 10px;
}

    .wen-toggle--sm .wen-toggle__label {
        padding-top: 2px;
    }

    .wen-toggle--sm .wen-toggle__label-text {
        font-size: 13px;
    }

    .wen-toggle--sm .wen-toggle__hint {
        font-size: 11px;
    }

/* Large */
.wen-toggle--lg {
    --wen-toggle-width: 60px;
    --wen-toggle-height: 36px;
    --wen-toggle-thumb-size: 32px;
    --wen-toggle-thumb-offset: 2px;
    gap: 14px;
}

    .wen-toggle--lg .wen-toggle__label {
        padding-top: 6px;
    }

    .wen-toggle--lg .wen-toggle__label-text {
        font-size: 15px;
    }

/* ==========================================================================
   No Label Variant
   ========================================================================== */

.wen-toggle--no-label .wen-toggle__label {
    display: none;
}

/* ==========================================================================
   Color Variants (optional, can be added via wrapper-class)
   ========================================================================== */

/* Blue variant */
.wen-toggle--blue .wen-toggle__input:checked + .wen-toggle__track {
    background: #0a84ff;
}

/* Red/Danger variant */
.wen-toggle--danger .wen-toggle__input:checked + .wen-toggle__track {
    background: #ff453a;
}

/* Orange/Warning variant */
.wen-toggle--warning .wen-toggle__input:checked + .wen-toggle__track {
    background: #ff9f0a;
}

/* Purple variant */
.wen-toggle--purple .wen-toggle__input:checked + .wen-toggle__track {
    background: #bf5af2;
}

/* ==========================================================================
   Integration with existing forms
   ========================================================================== */

/* When used inside .wenrexa-toggle-row */
.wenrexa-toggle-row .wen-toggle {
    margin-left: auto;
}

/* When used inside Bootstrap form-check */
.form-check .wen-toggle {
    padding-left: 0;
}

/* ==========================================================================
   Dark/Light Theme Support
   ========================================================================== */

/* Light theme override (add class to parent) */
.wen-theme-light .wen-toggle,
[data-theme="light"] .wen-toggle {
    --wen-toggle-bg-off: #e5e5ea;
    --wen-toggle-bg-disabled: #f2f2f7;
    --wen-toggle-text: #1c1c1e;
    --wen-toggle-text-secondary: rgba(60, 60, 67, 0.6);
    --wen-toggle-text-disabled: rgba(60, 60, 67, 0.3);
    --wen-toggle-thumb-shadow: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes wen-toggle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(48, 209, 88, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0);
    }
}

/* Optional: pulse animation on change */
.wen-toggle--animate .wen-toggle__input:checked + .wen-toggle__track {
    animation: wen-toggle-pulse 0.5s ease-out;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wen-toggle__track {
        border: 1px solid #000;
        background: transparent !important;
    }

    .wen-toggle__input:checked + .wen-toggle__track {
        background: #000 !important;
    }

    .wen-toggle__thumb {
        background: #fff;
        border: 1px solid #000;
    }
}