@use 'ui-design-system/src/styles/semantic/index' as *;

// Tokens available globally via main application styles

// ==========================================================================
// SWITCH COMPONENT STYLES
// ==========================================================================
// Modern switch implementation using design tokens
// Follows Material Design 3 principles with semantic token system
// ==========================================================================

.switch-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  
  // Size variants
  &.switch-wrapper--sm {
    gap: $semantic-spacing-component-xs;
  }
  
  &.switch-wrapper--md {
    gap: $semantic-spacing-component-sm;
  }
  
  &.switch-wrapper--lg {
    gap: $semantic-spacing-component-md;
  }
  
  // State variants
  &.switch-wrapper--disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  
  &.switch-wrapper--focused {
    .switch__track {
      box-shadow: $semantic-shadow-button-focus;
    }
  }
}

.switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  
  // Size-specific gaps
  &.switch--sm {
    gap: $semantic-spacing-component-sm;
  }
  
  &.switch--md {
    gap: $semantic-spacing-component-md;
  }
  
  &.switch--lg {
    gap: $semantic-spacing-component-lg;
  }
  
  &.switch--disabled {
    cursor: not-allowed;
  }
}

.switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  
  // Focus visible for keyboard navigation
  &:focus-visible + .switch__track {
    outline: $semantic-border-width-2 solid $semantic-color-brand-primary;
    outline-offset: 2px;
  }
}

.switch__track {
  position: relative;
  border-radius: $semantic-border-radius-full;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  cursor: pointer;
  
  // Size variants
  &.switch__track--sm {
    width: 32px;
    height: 18px;
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    background-color: $semantic-color-surface-secondary;
  }
  
  &.switch__track--md {
    width: 44px;
    height: 24px;
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    background-color: $semantic-color-surface-secondary;
  }
  
  &.switch__track--lg {
    width: 56px;
    height: 32px;
    border: $semantic-border-width-2 solid $semantic-color-border-primary;
    background-color: $semantic-color-surface-secondary;
  }
  
  // Checked state - variant colors
  &.switch__track--checked {
    border-color: $semantic-color-brand-primary;
    background-color: $semantic-color-brand-primary;
    
    .switch-wrapper--primary & {
      border-color: $semantic-color-brand-primary;
      background-color: $semantic-color-brand-primary;
    }
    
    .switch-wrapper--secondary & {
      border-color: $semantic-color-text-secondary;
      background-color: $semantic-color-text-secondary;
    }
    
    .switch-wrapper--success & {
      border-color: $semantic-color-success;
      background-color: $semantic-color-success;
    }
    
    .switch-wrapper--warning & {
      border-color: $semantic-color-warning;
      background-color: $semantic-color-warning;
    }
    
    .switch-wrapper--danger & {
      border-color: $semantic-color-danger;
      background-color: $semantic-color-danger;
    }
  }
  
  // Hover states
  &:hover:not(.switch__track--disabled) {
    border-color: $semantic-color-border-focus;
    
    &.switch__track--checked {
      .switch-wrapper--primary & {
        background-color: $semantic-color-brand-secondary;
        border-color: $semantic-color-brand-secondary;
      }
      
      .switch-wrapper--secondary & {
        opacity: 0.9;
      }
      
      .switch-wrapper--success & {
        opacity: 0.9;
      }
      
      .switch-wrapper--warning & {
        opacity: 0.9;
      }
      
      .switch-wrapper--danger & {
        opacity: 0.9;
      }
    }
  }
  
  // Disabled state
  &.switch__track--disabled {
    background-color: $semantic-color-surface-disabled;
    border-color: $semantic-color-border-disabled;
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.switch__thumb {
  position: absolute;
  top: 50%;
  border-radius: $semantic-border-radius-full;
  background-color: $semantic-color-surface-primary;
  box-shadow: $semantic-shadow-elevation-1;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  transform: translateY(-50%);
  
  // Size variants - unchecked position
  &.switch__thumb--sm {
    width: 14px;
    height: 14px;
    left: 2px;
  }
  
  &.switch__thumb--md {
    width: 20px;
    height: 20px;
    left: 2px;
  }
  
  &.switch__thumb--lg {
    width: 26px;
    height: 26px;
    left: 3px;
  }
  
  // Checked position
  &.switch__thumb--checked {
    &.switch__thumb--sm {
      left: 16px; // 32px - 14px - 2px
    }
    
    &.switch__thumb--md {
      left: 22px; // 44px - 20px - 2px
    }
    
    &.switch__thumb--lg {
      left: 27px; // 56px - 26px - 3px
    }
  }
  
  // Hover enhancement
  .switch__track:hover &:not(.switch__thumb--disabled) {
    box-shadow: $semantic-shadow-elevation-2;
    
    &.switch__thumb--checked {
      box-shadow: $semantic-shadow-elevation-3;
    }
  }
  
  // Disabled state
  &.switch__thumb--disabled {
    background-color: $semantic-color-surface-disabled;
    box-shadow: none;
  }
}

.switch__label {
  color: $semantic-color-text-primary;
  font-weight: $semantic-typography-font-weight-medium;
  line-height: $semantic-typography-line-height-tight;
  
  // Size variants
  &.switch__label--sm {
    font-size: $semantic-typography-font-size-sm;
  }
  
  &.switch__label--md {
    font-size: $semantic-typography-font-size-md;
  }
  
  &.switch__label--lg {
    font-size: $semantic-typography-font-size-lg;
  }
  
  // Disabled state
  &.switch__label--disabled {
    color: $semantic-color-text-disabled;
  }
  
  .switch__required-indicator {
    color: $semantic-color-danger;
    margin-left: 2px;
  }
}

.switch__helper-text {
  font-size: $semantic-typography-font-size-xs;
  color: $semantic-color-text-secondary;
  line-height: $semantic-typography-line-height-tight;
  margin-top: $semantic-spacing-component-xs;
  
  .switch-wrapper--sm & {
    margin-left: 40px; // Align with switch track
  }
  
  .switch-wrapper--md & {
    margin-left: 52px; // Align with switch track
  }
  
  .switch-wrapper--lg & {
    margin-left: 64px; // Align with switch track
  }
}

// ==========================================================================
// RESPONSIVE DESIGN
// ==========================================================================

@media (max-width: $semantic-breakpoint-md - 1) {
  .switch-wrapper {
    // Larger touch targets on mobile
    &.switch-wrapper--sm {
      .switch__track--sm {
        width: 36px;
        height: 20px;
      }
      
      .switch__thumb--sm {
        width: 16px;
        height: 16px;
        
        &.switch__thumb--checked {
          left: 18px; // 36px - 16px - 2px
        }
      }
    }
    
    &.switch-wrapper--md {
      .switch__track--md {
        width: 48px;
        height: 26px;
      }
      
      .switch__thumb--md {
        width: 22px;
        height: 22px;
        
        &.switch__thumb--checked {
          left: 24px; // 48px - 22px - 2px
        }
      }
    }
  }
}

// ==========================================================================
// ACCESSIBILITY ENHANCEMENTS
// ==========================================================================

// Reduced motion preference
@media (prefers-reduced-motion: reduce) {
  .switch__track,
  .switch__thumb {
    transition: none !important;
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .switch__track {
    border-width: $semantic-border-width-2;
    
    &.switch__track--checked {
      border-width: $semantic-border-width-2;
    }
  }
  
  .switch__thumb {
    box-shadow: 0 0 0 1px $semantic-color-text-primary;
  }
}

// Focus visible for keyboard navigation
.switch__input:focus-visible + .switch__track {
  outline: $semantic-border-width-2 solid $semantic-color-brand-primary;
  outline-offset: 2px;
}

// Active state for better touch feedback
.switch:active:not(.switch--disabled) {
  .switch__thumb:not(.switch__thumb--disabled) {
    transform: translateY(-50%) scale(1.1);
  }
}