/**
 * Sparkles Toggle Component Styles
 * Toggle switches for settings, preferences, and binary choices
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== TOGGLE BASE ========== */
.sparkles-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    outline: 2px solid #0000;
    outline-offset: 2px;
    border-radius: var(--radius-full);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}

.sparkles-toggle-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ========== TOGGLE TRACK ========== */
.sparkles-toggle-track,
.sparkles-toggle-thumb {
    border-radius: var(--radius-full);
}

.sparkles-toggle-track {
    position: relative;
    background-color: var(--gray-300);
    border-width: 2px;
    border-color: #0000;
}

.sparkles-toggle:hover .sparkles-toggle-track {
    --tw-bg-opacity: 1;
    background-color: rgba(156,163,175,var(--tw-bg-opacity,1));
}

.sparkles-toggle-disabled:hover .sparkles-toggle-track {
    background-color: var(--gray-300);
}

.sparkles-toggle-checked .sparkles-toggle-track {
    background-color: var(--color-primary);
}

.sparkles-toggle-checked:hover .sparkles-toggle-track {
    background-color: var(--color-primary-dark);
}

.sparkles-toggle-checked.sparkles-toggle-disabled:hover .sparkles-toggle-track {
    background-color: var(--color-primary);
}

/* ========== TOGGLE THUMB ========== */
.sparkles-toggle-thumb {
    position: absolute;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sparkles-toggle-checked .sparkles-toggle-thumb {
    --tw-translate-x: 100%;
}

/* ========== TOGGLE SIZES ========== */
.sparkles-toggle-sm .sparkles-toggle-track {
    height: 18px;
    width: 2rem;
}

.sparkles-toggle-sm .sparkles-toggle-thumb {
    width: 0.875rem;
    height: 0.875rem;
}

.sparkles-toggle-md .sparkles-toggle-track {
    width: 2.75rem;
    height: 1.5rem;
}

.sparkles-toggle-md .sparkles-toggle-thumb {
    width: 1.25rem;
    height: 1.25rem;
}

.sparkles-toggle-lg .sparkles-toggle-track {
    width: 3.5rem;
    height: 2rem;
}

.sparkles-toggle-lg .sparkles-toggle-thumb {
    width: 58.333333%;
}

/* ========== TOGGLE VARIANTS ========== */
.sparkles-toggle-primary.sparkles-toggle-checked .sparkles-toggle-track {
    background-color: var(--color-primary);
}

.sparkles-toggle-success.sparkles-toggle-checked .sparkles-toggle-track {
    --tw-bg-opacity: 1;
    background-color: var(--color-success);
}

.sparkles-toggle-warning.sparkles-toggle-checked .sparkles-toggle-track {
    --tw-bg-opacity: 1;
    background-color: rgba(245,158,11,var(--tw-bg-opacity,1));
}

.sparkles-toggle-error.sparkles-toggle-checked .sparkles-toggle-track {
    --tw-bg-opacity: 1;
    background-color: rgba(239,68,68,var(--tw-bg-opacity,1));
}

/* ========== TOGGLE WITH LABELS ========== */
.sparkles-toggle-with-labels {
    gap: .75rem;
}

.sparkles-toggle-label,
.sparkles-bulk-actions-info,
.sparkles-step-title,
.sparkles-social-share-text .sparkles-social-btn-text,
.sparkles-blog-card .sparkles-read-more {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.sparkles-toggle-label,
.sparkles-bulk-actions-info,
.sparkles-step-title {
    color: var(--gray-700);
}

.sparkles-toggle-label {
    white-space: nowrap;
}

.sparkles-toggle-checked .sparkles-toggle-label {
    
    color: var(--color-primary);
}

/* ========== TOGGLE WITH ICONS ========== */
.sparkles-toggle-thumb-icon {
    font-size: .75rem;
    line-height: 1rem;
    color: var(--gray-600);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}

.sparkles-toggle-checked .sparkles-toggle-thumb-icon {
    
    color: var(--color-primary);
}

/* Small icons for small toggles */
.sparkles-toggle-sm .sparkles-toggle-thumb-icon {
    font-size: 8px;
}

.sparkles-toggle-lg .sparkles-toggle-thumb-icon {
    font-size: .875rem;
    line-height: 1.25rem;
}

/* ========== ANIMATED TOGGLES ========== */
.sparkles-toggle-animated .sparkles-toggle-track {
    transition: all .3s ease-out;
}

.sparkles-toggle-animated .sparkles-toggle-thumb {
    transition: all .3s ease-out;
}

.sparkles-toggle-animated.sparkles-toggle-checked .sparkles-toggle-thumb {
    animation: sparkles-toggle-bounce 0.3s ease-out;
}

/* ========== TOGGLE GROUP ========== */
.sparkles-toggle-group,
.showcase-flex-wrap {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Container query anchors for toggle layouts */
:where(.sparkles-toggle-group, .sparkles-toggle-card) {
    container-type: inline-size;
}

.sparkles-toggle-group-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.sparkles-recent-activity-content,
.sparkles-rating-bar,
.sparkles-reviewer-info,
.sparkles-toggle-group-item {
    gap: .75rem;
}

.sparkles-toggle-group-vertical .sparkles-toggle-group-item {
    width: 100%;
}

.sparkles-toggle-group-label {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
}

/* ========== TOGGLE CARD STYLE ========== */
.sparkles-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-width: 1px;
    border-color: var(--gray-200);
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}

.sparkles-toggle-card:hover {
    border-color: var(--gray-300);
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}

.sparkles-toggle-card.sparkles-toggle-checked {
    border-color: var(--color-primary);
    background-color: var(--color-accent);
}

.sparkles-toggle-card-content {
    flex: 1 1 0%;
    min-width: 0;
}

.sparkles-toggle-card-title,
.sparkles-recommendations__pricing-total .sparkles-recommendations__pricing-label {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--gray-900);
}

.sparkles-toggle-card-title {
    margin-bottom: .25rem;
}

.sparkles-toggle-card-description {
    font-size: .875rem;
    line-height: 1.25;
    color: var(--gray-600);
}

.sparkles-toggle-card-toggle {
    margin-left: 1rem;
    flex-shrink: 0;
}

/* ========== PREMIUM TOGGLE STYLE ========== */
.sparkles-toggle-premium .sparkles-toggle-track {
    border-color: var(--color-primary);
    border-width: 1px;
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--gray-100) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--gray-100)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: var(--gray-200) var(--tw-gradient-to-position);
}

.sparkles-toggle-premium.sparkles-toggle-checked .sparkles-toggle-track {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

.sparkles-toggle-premium .sparkles-toggle-thumb {
    border-color: var(--color-primary);
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-width: 1px;
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
}

.sparkles-toggle-premium.sparkles-toggle-checked .sparkles-toggle-thumb {
    background-color: var(--color-primary);
    color: white;
}

/* ========== SWITCH STYLE VARIANTS ========== */
.sparkles-toggle-ios .sparkles-toggle-track {
    border-width: 0;
    background-color: var(--gray-200);
}

.sparkles-toggle-ios.sparkles-toggle-checked .sparkles-toggle-track {
    --tw-bg-opacity: 1;
    background-color: var(--color-success);
}

.sparkles-toggle-ios .sparkles-toggle-thumb {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
}

.sparkles-toggle-material .sparkles-toggle-track {
    border-radius: 7px;
    --tw-bg-opacity: 1;
    background-color: rgba(0,0,0,var(--tw-bg-opacity,1));
    --tw-bg-opacity: 0.4;
}

.sparkles-toggle-material.sparkles-toggle-checked .sparkles-toggle-track {
    --tw-bg-opacity: 1;
    background-color: rgba(124,58,237,var(--tw-bg-opacity,1));
    --tw-bg-opacity: 0.5;
}

.sparkles-toggle-material .sparkles-toggle-thumb {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); /* Keep raw for complex material design shadow */ width: 1.25rem; height: 1.25rem; background-color: var(--gray-50);
}

.sparkles-toggle-material.sparkles-toggle-checked .sparkles-toggle-thumb {
    --tw-bg-opacity: 1;
    background-color: rgba(124,58,237,var(--tw-bg-opacity,1));
}

/* ========== LOADING STATE ========== */
.sparkles-toggle-loading .sparkles-toggle-thumb {
    position: relative;
    overflow: hidden;
}

.sparkles-toggle-loading .sparkles-toggle-thumb::after {
    content: '';
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: sparkles-toggle-loading 1.5s infinite;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

/* ========== RESPONSIVE DESIGN ========== */
@container (max-width: 768px) {
    .sparkles-toggle-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sparkles-toggle-card,
    .sparkles-table-controls,
    .sparkles-pagination {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
    
    .sparkles-toggle-card-title {
        font-size: .875rem;
        line-height: 1.25rem;
    }
    
    .sparkles-toggle-card-description {
        font-size: .75rem;
        line-height: 1rem;
    }
}

/* ========== ACCESSIBILITY ========== */
.sparkles-toggle:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .sparkles-toggle-track,
    .sparkles-toggle-thumb,
    .sparkles-toggle-animated .sparkles-toggle-track,
    .sparkles-toggle-animated .sparkles-toggle-thumb {
        transition-property: none;
    }
    
    .sparkles-toggle-animated.sparkles-toggle-checked .sparkles-toggle-thumb {
        animation: none;
    }
    
    .sparkles-toggle-loading .sparkles-toggle-thumb::after {
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .sparkles-toggle-track {
        border-width: 2px;
        border-style: solid;
    }
    
    .sparkles-toggle-thumb {
        border-width: 1px;
        border-style: solid;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .sparkles-toggle-track {
        --tw-bg-opacity: 1;
        background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
        border-width: 2px;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
    }
    
    .sparkles-toggle-thumb {
        --tw-bg-opacity: 1;
        background-color: rgba(0,0,0,var(--tw-bg-opacity,1));
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
    }
    
    .sparkles-toggle-checked .sparkles-toggle-track {
        --tw-bg-opacity: 1;
        background-color: rgba(0,0,0,var(--tw-bg-opacity,1));
    }
    
    .sparkles-toggle-checked .sparkles-toggle-thumb {
        --tw-bg-opacity: 1;
        background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    }
}