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

.ui-range-slider {
  // Core Structure
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;

  // Sizing variants
  &--sm {
    .ui-range-slider__track {
      height: 4px;
    }
    
    .ui-range-slider__thumb {
      width: 16px;
      height: 16px;
    }
    
    .ui-range-slider__label {
      font-size: $semantic-typography-font-size-xs;
    }
  }

  &--md {
    .ui-range-slider__track {
      height: 6px;
    }
    
    .ui-range-slider__thumb {
      width: 20px;
      height: 20px;
    }
    
    .ui-range-slider__label {
      font-size: $semantic-typography-font-size-xs;
    }
  }

  &--lg {
    .ui-range-slider__track {
      height: 8px;
    }
    
    .ui-range-slider__thumb {
      width: 24px;
      height: 24px;
    }
    
    .ui-range-slider__label {
      font-size: $semantic-typography-font-size-sm;
    }
  }

  // Color variants
  &--primary {
    .ui-range-slider__fill {
      background: $semantic-color-primary;
    }
    
    .ui-range-slider__thumb {
      border-color: $semantic-color-primary;
      
      &:hover {
        border-color: $semantic-color-primary;
        box-shadow: 0 0 0 8px rgba($semantic-color-primary, 0.1);
      }
      
      &:focus {
        border-color: $semantic-color-primary;
        box-shadow: 0 0 0 4px rgba($semantic-color-primary, 0.2);
      }
    }
  }

  &--secondary {
    .ui-range-slider__fill {
      background: $semantic-color-secondary;
    }
    
    .ui-range-slider__thumb {
      border-color: $semantic-color-secondary;
      
      &:hover {
        border-color: $semantic-color-secondary;
        box-shadow: 0 0 0 8px rgba($semantic-color-secondary, 0.1);
      }
      
      &:focus {
        border-color: $semantic-color-secondary;
        box-shadow: 0 0 0 4px rgba($semantic-color-secondary, 0.2);
      }
    }
  }

  &--success {
    .ui-range-slider__fill {
      background: $semantic-color-success;
    }
    
    .ui-range-slider__thumb {
      border-color: $semantic-color-success;
      
      &:hover {
        border-color: $semantic-color-success;
        box-shadow: 0 0 0 8px rgba($semantic-color-success, 0.1);
      }
    }
  }

  &--warning {
    .ui-range-slider__fill {
      background: $semantic-color-warning;
    }
    
    .ui-range-slider__thumb {
      border-color: $semantic-color-warning;
      
      &:hover {
        border-color: $semantic-color-warning;
        box-shadow: 0 0 0 8px rgba($semantic-color-warning, 0.1);
      }
    }
  }

  &--danger {
    .ui-range-slider__fill {
      background: $semantic-color-danger;
    }
    
    .ui-range-slider__thumb {
      border-color: $semantic-color-danger;
      
      &:hover {
        border-color: $semantic-color-danger;
        box-shadow: 0 0 0 8px rgba($semantic-color-danger, 0.1);
      }
    }
  }

  // State variants
  &--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    
    .ui-range-slider__thumb {
      cursor: not-allowed;
      pointer-events: none;
    }
    
    .ui-range-slider__input {
      cursor: not-allowed;
    }
  }

  // Label positioning
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $semantic-spacing-component-sm;
  }

  &__label {
    color: $semantic-color-text-primary;
    font-size: $semantic-typography-font-size-sm;
    font-weight: $semantic-typography-font-weight-medium;
    
    &--disabled {
      color: $semantic-color-text-tertiary;
    }
  }

  &__value-display {
    color: $semantic-color-text-secondary;
    font-size: $semantic-typography-font-size-xs;
    font-weight: $semantic-typography-font-weight-medium;
    min-width: 40px;
    text-align: right;
  }

  // Slider container
  &__container {
    position: relative;
    padding: $semantic-spacing-component-sm 0;
  }

  // Track (background)
  &__track {
    position: relative;
    width: 100%;
    height: 6px;
    background: $semantic-color-surface-secondary;
    border-radius: $semantic-border-radius-xl;
    overflow: hidden;
  }

  // Fill (progress)
  &__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: $semantic-color-primary;
    border-radius: inherit;
    transition: width $semantic-motion-duration-fast $semantic-easing-standard;
  }

  // Native input (hidden but functional)
  &__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    
    &:focus {
      outline: none;
    }
    
    &:disabled {
      cursor: not-allowed;
    }
  }

  // Visual thumb
  &__thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: $semantic-color-surface-primary;
    border: 2px solid $semantic-color-primary;
    border-radius: 50%;
    cursor: pointer;
    transition: all $semantic-motion-duration-fast $semantic-easing-standard;
    z-index: 2;
    
    &:hover {
      box-shadow: 0 0 0 8px rgba($semantic-color-primary, 0.1);
      border-color: $semantic-color-primary;
    }
    
    &:focus,
    &--focused {
      box-shadow: 0 0 0 4px rgba($semantic-color-primary, 0.2);
      border-color: $semantic-color-primary;
    }
    
    &:active,
    &--dragging {
      box-shadow: 0 0 0 8px rgba($semantic-color-primary, 0.15);
      transform: translate(-50%, -50%) scale(1.1);
    }
  }

  // Tick marks (optional)
  &__ticks {
    display: flex;
    justify-content: space-between;
    margin-top: $semantic-spacing-component-xs;
    padding: 0 10px; // Offset for thumb width
  }

  &__tick {
    width: 2px;
    height: 8px;
    background: $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-xs;
    
    &--major {
      height: 12px;
      background: $semantic-color-border-primary;
    }
  }

  // Tick labels
  &__tick-labels {
    display: flex;
    justify-content: space-between;
    margin-top: $semantic-spacing-component-xs;
    padding: 0 10px; // Offset for thumb width
  }

  &__tick-label {
    font-size: $semantic-typography-font-size-xs;
    color: $semantic-color-text-tertiary;
    text-align: center;
    min-width: 20px;
  }

  // Helper text
  &__helper-text {
    margin-top: $semantic-spacing-component-xs;
    font-size: $semantic-typography-font-size-xs;
    color: $semantic-color-text-secondary;
    
    &--error {
      color: $semantic-color-danger;
    }
  }

  // Range variant (dual thumb)
  &--range {
    .ui-range-slider__fill {
      left: auto;
      right: auto;
    }
  }

  // Vertical orientation
  &--vertical {
    flex-direction: row;
    align-items: center;
    height: 200px;
    width: auto;
    
    .ui-range-slider__container {
      width: auto;
      height: 100%;
      padding: 0 $semantic-spacing-component-sm;
    }
    
    .ui-range-slider__track {
      width: 6px;
      height: 100%;
    }
    
    .ui-range-slider__fill {
      width: 100%;
      height: auto;
      bottom: 0;
      top: auto;
    }
    
    .ui-range-slider__thumb {
      left: 50%;
      top: auto;
      transform: translate(-50%, 50%);
    }
    
    .ui-range-slider__input {
      width: 100%;
      height: 100%;
    }
  }

  // Dark mode support
  :host-context(.dark-theme) & {
    .ui-range-slider__track {
      background: $semantic-color-surface-secondary;
    }
    
    .ui-range-slider__thumb {
      background: $semantic-color-surface-primary;
      border-color: $semantic-color-primary;
    }
    
    .ui-range-slider__label {
      color: $semantic-color-text-primary;
    }
  }
}

// Responsive design
@media (max-width: $semantic-breakpoint-sm - 1) {
  .ui-range-slider {
    &--lg {
      .ui-range-slider__thumb {
        width: 20px;
        height: 20px;
      }
      
      .ui-range-slider__track {
        height: 6px;
      }
    }
  }
}