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

// Tokens available globally via main application styles

.ui-tab-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  
  &--full-width .tab-list {
    width: 100%;
    
    .tab-button {
      flex: 1;
    }
  }
}

.tab-list {
  display: flex;
  align-items: center;
  position: relative;
  
  // Line variant (default)
  .ui-tab-group--line & {
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-primary;
    gap: 0;
  }
  
  // Pills variant
  .ui-tab-group--pills & {
    background-color: $semantic-color-surface-elevated;
    padding: $semantic-spacing-1; // 0.25rem
    border-radius: $semantic-border-radius-lg;
    gap: $semantic-spacing-1; // 0.25rem
  }
  
  // Cards variant
  .ui-tab-group--cards & {
    gap: $semantic-spacing-1; // 0.25rem
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-primary;
  }
}

.tab-button {
  display: flex;
  align-items: center;
  gap: $semantic-spacing-2; // 0.5rem
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: $semantic-typography-font-family-sans;
  font-weight: $semantic-typography-font-weight-medium;
  color: $semantic-color-text-secondary;
  transition: all $semantic-motion-duration-normal $semantic-motion-easing-ease-out;
  position: relative;
  outline: none;
  
  // Size variants
  .ui-tab-group--small & {
    padding: $semantic-spacing-2 $semantic-spacing-3; // 0.5rem 0.75rem
    font-size: $semantic-typography-font-size-sm;
    line-height: $semantic-typography-line-height-tight;
    min-height: $semantic-spacing-8; // 2rem
  }
  
  .ui-tab-group--medium & {
    padding: $semantic-spacing-3 $semantic-spacing-4; // 0.75rem 1rem
    font-size: $semantic-typography-font-size-md;
    line-height: $semantic-typography-line-height-normal;
    min-height: $semantic-spacing-10; // 2.5rem
  }
  
  .ui-tab-group--large & {
    padding: $semantic-spacing-4 $semantic-spacing-6; // 1rem 1.5rem
    font-size: $semantic-typography-font-size-lg;
    line-height: $semantic-typography-line-height-normal;
    min-height: $semantic-spacing-12; // 3rem
  }
  
  // Line variant styling
  .ui-tab-group--line & {
    border-radius: 0;
    margin-bottom: -1px;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background-color: transparent;
      transition: background-color $semantic-motion-duration-normal $semantic-motion-easing-ease;
    }
    
    &:hover:not(:disabled) {
      color: $semantic-color-interactive-primary;
      background-color: $semantic-color-surface-hover;
    }
    
    &--active {
      color: $semantic-color-interactive-primary;
      
      &::after {
        background-color: $semantic-color-interactive-primary;
      }
    }
  }
  
  // Pills variant styling
  .ui-tab-group--pills & {
    border-radius: $semantic-border-radius-md;
    
    &:hover:not(:disabled) {
      background-color: $semantic-color-surface-hover;
      color: $semantic-color-text-primary;
    }
    
    &--active {
      background-color: $semantic-color-surface-primary;
      color: $semantic-color-interactive-primary;
      box-shadow: $semantic-shadow-button-hover;
    }
  }
  
  // Cards variant styling
  .ui-tab-group--cards & {
    border: $semantic-border-width-1 solid transparent;
    border-radius: $semantic-border-radius-md $semantic-border-radius-md 0 0;
    margin-bottom: -1px;
    
    &:hover:not(:disabled) {
      background-color: $semantic-color-surface-hover;
      color: $semantic-color-text-primary;
    }
    
    &--active {
      background-color: $semantic-color-surface-primary;
      color: $semantic-color-interactive-primary;
      border-color: $semantic-color-border-primary;
      border-bottom-color: $semantic-color-surface-primary;
    }
  }
  
  // Focus state
  &:focus-visible {
    outline: 2px solid $semantic-color-interactive-primary;
    outline-offset: 2px;
  }
  
  // Disabled state
  &:disabled,
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.tab-icon {
  flex-shrink: 0;
  
  .ui-tab-group--small & {
    font-size: $semantic-typography-font-size-xs;
  }
  
  .ui-tab-group--medium & {
    font-size: $semantic-typography-font-size-sm;
  }
  
  .ui-tab-group--large & {
    font-size: $semantic-typography-font-size-md;
  }
}

.tab-label {
  white-space: nowrap;
  user-select: none;
}

.tab-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: $semantic-spacing-5; // 1.25rem
  height: $semantic-spacing-5; // 1.25rem
  background-color: $semantic-color-interactive-primary;
  color: $semantic-color-on-brand-primary;
  border-radius: $semantic-border-radius-full;
  font-size: $semantic-typography-font-size-xs;
  font-weight: $semantic-typography-font-weight-semibold;
  line-height: 1;
  padding: 0 $semantic-spacing-1; // 0 0.25rem
  
  .ui-tab-group--small & {
    min-width: $semantic-spacing-4; // 1rem
    height: $semantic-spacing-4; // 1rem
    font-size: $semantic-typography-font-size-xs;
  }
  
  .ui-tab-group--large & {
    min-width: $semantic-spacing-6; // 1.5rem
    height: $semantic-spacing-6; // 1.5rem
    font-size: $semantic-typography-font-size-sm;
  }
}

.tab-panels {
  padding-top: $semantic-spacing-4; // 1rem
  
  .ui-tab-group--pills & {
    padding-top: $semantic-spacing-6; // 1.5rem
  }
}

// Responsive design
@media (max-width: 768px) {
  .tab-list {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
  .tab-button {
    white-space: nowrap;
    flex-shrink: 0;
    
    .ui-tab-group--small & {
      padding: $semantic-spacing-1-5 $semantic-spacing-2-5; // 0.375rem 0.625rem
    }
    
    .ui-tab-group--medium & {
      padding: $semantic-spacing-2 $semantic-spacing-3; // 0.5rem 0.75rem
    }
    
    .ui-tab-group--large & {
      padding: $semantic-spacing-3 $semantic-spacing-4; // 0.75rem 1rem
    }
  }
}