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

// Tokens available globally via main application styles

.ui-select {
  display: flex;
  flex-direction: column;
  gap: $semantic-spacing-micro-tight; // 0.25rem
  
  &--full-width {
    width: 100%;
  }
}

.select-label {
  font-family: $semantic-typography-font-family-sans;
  font-weight: $semantic-typography-font-weight-medium;
  color: $semantic-color-text-primary;
  font-size: $semantic-typography-font-size-sm;
  line-height: $semantic-typography-line-height-normal;
  margin-bottom: $semantic-spacing-micro-tight; // 0.25rem
}

.select-required {
  color: $semantic-color-danger;
  margin-left: $semantic-spacing-micro-tight; // 0.125rem
}

.select-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: $semantic-spacing-micro-tight; // 0.25rem
}

.select-field {
  appearance: none;
  font-family: $semantic-typography-font-family-sans;
  font-weight: $semantic-typography-font-weight-normal;
  background-color: $semantic-color-surface-primary;
  border-radius: $semantic-border-radius-md;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  cursor: pointer;
  padding-right: $semantic-spacing-10; // 2.5rem - space for arrow
  
  // Size variants
  .ui-select--small & {
    height: $semantic-spacing-8; // 2rem
    padding: 0 $semantic-spacing-3; // 0.75rem
    padding-right: $semantic-spacing-8; // 2rem
    font-size: $semantic-typography-font-size-sm;
  }
  
  .ui-select--medium & {
    height: $semantic-spacing-micro-tight; // 2.5rem
    padding: 0 $semantic-spacing-3; // 0.75rem
    padding-right: $semantic-spacing-micro-tight; // 2.5rem
    font-size: $semantic-typography-font-size-md;
  }
  
  .ui-select--large & {
    height: $semantic-spacing-12; // 3rem
    padding: 0 $semantic-spacing-4; // 1rem
    padding-right: $semantic-spacing-12; // 3rem
    font-size: $semantic-typography-font-size-lg;
  }
  
  // Variant styles - Outlined
  .ui-select--outlined & {
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    background-color: transparent;
    
    &:hover:not(:disabled) {
      border-color: $semantic-color-border-focus;
    }
    
    &:focus {
      border-color: $semantic-color-interactive-primary;
      box-shadow: 0 0 0 1px $semantic-color-interactive-primary;
    }
  }
  
  // Variant styles - Filled
  .ui-select--filled & {
    border: none;
    background-color: $semantic-color-surface-elevated;
    
    &:hover:not(:disabled) {
      background-color: $semantic-color-surface-interactive;
    }
    
    &:focus {
      background-color: $semantic-color-surface-primary;
      box-shadow: inset 0 -2px 0 $semantic-color-interactive-primary;
    }
  }
  
  // States
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: $semantic-color-surface-disabled;
    color: $semantic-color-text-disabled;
  }
  
  // Option styling
  option {
    background-color: $semantic-color-surface-primary;
    color: $semantic-color-text-primary;
    padding: $semantic-spacing-2; // 0.5rem
    
    &:disabled {
      color: $semantic-color-text-disabled;
    }
  }
  
  // Error state
  &--error {
    .ui-select--outlined & {
      border-color: $semantic-color-danger;
      
      &:focus {
        border-color: $semantic-color-danger;
        box-shadow: 0 0 0 1px $semantic-color-danger;
      }
    }
    
    .ui-select--filled & {
      background-color: rgba($semantic-color-danger, 0.08);
      
      &:focus {
        box-shadow: inset 0 -2px 0 $semantic-color-danger;
      }
    }
  }
}

// Custom arrow icon
.select-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: $semantic-color-text-secondary;
  transition: transform 150ms ease;
  
  .ui-select--small & {
    right: $semantic-spacing-2; // 0.5rem
    
    svg {
      width: 10px;
      height: 6px;
    }
  }
  
  .ui-select--medium & {
    right: $semantic-spacing-3; // 0.75rem
    
    svg {
      width: 12px;
      height: 8px;
    }
  }
  
  .ui-select--large & {
    right: $semantic-spacing-4; // 1rem
    
    svg {
      width: 14px;
      height: 10px;
    }
  }
}

.select-field:focus + .select-arrow {
  color: $semantic-color-interactive-primary;
  transform: translateY(-50%) rotate(180deg);
}

.select-field:disabled + .select-arrow {
  color: $semantic-color-text-disabled;
}

// Helper and error text
.select-helper-text {
  font-family: $semantic-typography-font-family-sans;
  font-size: $semantic-typography-font-size-xs;
  color: $semantic-color-text-secondary;
  line-height: $semantic-typography-line-height-normal;
}

.select-error-text {
  font-family: $semantic-typography-font-family-sans;
  font-size: $semantic-typography-font-size-xs;
  color: $semantic-color-danger;
  line-height: $semantic-typography-line-height-normal;
}

// Disabled state for wrapper
.ui-select--disabled {
  .select-label {
    color: $semantic-color-text-disabled;
  }
}