.tabs {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
//   border-bottom: 1px solid var(--color-border);
//   background: var(--color-bg);
  padding: var(--space-2) var(--space-2) 0;
  
  &__item {
    margin: 0;
  }
  
  &__link {
    display: block;
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    color: var(--color-text);
    position: relative;
    transition: var(--transition);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--bg-subtle);
    margin-bottom: -1px;
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-sm);
    
    &:hover {
      color: var(--color-primary);
      background: var(--bg-subtle-hover);
      transform: translateY(-1px);
    }
    
    &--active {
      color: var(--color-primary);
      background: var(--color-bg);
      border-color: var(--color-border);
      border-bottom-color: var(--color-bg);
      box-shadow: var(--shadow-sm);
      
      &:hover {
        color: var(--color-primary);
        transform: none;
      }
    }
  }
}

// Dark theme support
[data-theme="dark"] {
  .tabs {
    background: var(--color-bg);
    border-bottom-color: var(--color-gray-200);
    
    &__link {
      color: var(--color-text);
      background: var(--bg-subtle);
      border-color: var(--color-gray-200);
      
      &:hover {
        color: var(--color-primary);
        background: var(--bg-subtle-hover);
      }
      
      &--active {
        color: var(--color-primary);
        background: var(--color-bg);
        border-color: var(--color-gray-200);
        border-bottom-color: var(--color-bg);
        
        &:hover {
          color: var(--color-primary);
        }
      }
    }
  }
} 