/**
 * @fileoverview Tabs Component Styles
 * @description Material Design 3 style tabs with panel switching.
 * Implements animated transitions and active state indicators.
 *
 * @module tabs
 * @version 1.0.1
 */

/* ==========================================================================
   TABS COMPONENT (BEM)
   Block: .tabs
   ========================================================================== */

/**
 * Tabs container.
 * Uses flexbox column layout with Material Design elevation.
 */
.tabs {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* ======================================================================
   Elements
   ====================================================================== */

/**
 * Tabs header container.
 * Contains tab items and provides border separation from content.
 */
.tabs__header {
  display: flex;
  position: relative;
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 0.0625rem solid var(--md-sys-color-outline-variant);
}

/**
 * Individual tab item.
 * Clickable button that activates a corresponding panel.
 */
.tabs__item {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 3rem;
  padding: 0.875rem 1rem;
  flex: 1 0 0;
  align-self: stretch;
  gap: 0.25rem;

  border: none;
  background: transparent;

  font: var(--md-text-title-small);
  letter-spacing: var(--md-letter-spacing-title-small);
  color: var(--md-sys-color-on-surface-variant);

  cursor: pointer;

  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.tabs__item:hover {
  background-color: rgba(29, 27, 32, 0.08);
  color: var(--md-sys-color-on-surface);
}

/**
 * Tab label text container.
 * Provides positioning context for active indicator.
 */
.tabs__label {
    position: relative;
    display: inline-block;
}

/**
 * Tab indicator (unused in current implementation).
 * Reserved for future animated indicator bar.
 */
.tabs__indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Tabs content container.
 * Wraps all tab panels and provides consistent padding.
 */
.tabs__content {
    padding: 24px;
}

/**
 * Tab panel container.
 * Hidden by default, shown when active.
 */
.tabs__panel {
    display: none;
}

/* ======================================================================
   Modifiers
   ====================================================================== */

/**
 * Active tab item.
 * Uses primary color and shows bottom indicator line.
 */
.tabs__item--active {
  color: var(--md-sys-color-primary);
}

.tabs__item--active:hover {
  background-color: rgba(103, 80, 164, 0.08);
  color: var(--md-sys-color-primary);
}

.tabs__item--active .tabs__label::after {
  content: '';
  position: absolute;
  bottom: -0.875rem;
  left: 2px;
  right: 2px;
  min-width: 24px;
  height: 0.1875rem;
  background: var(--md-sys-color-primary);
  border-radius: 6.25rem 6.25rem 0 0;
}

/**
 * Active tab panel.
 * Displayed with fade-in animation when activated.
 */
.tabs__panel--active {
    display: block;
    animation: tabs-fade-in 0.2s ease;
}

/* ======================================================================
   Animations
   ====================================================================== */

/**
 * Fade-in animation for tab panels.
 * Provides smooth transition when switching between tabs.
 */
@keyframes tabs-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}