/*
 * Tabs Component
 * Reusable tabbed interface
 */

@layer components {
  .tabs {
    margin-block: var(--space-4);
  }

  .tabs__header {
    display: flex;
    gap: var(--space-2);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-4);
  }

  .tab {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-secondary);
    transition: all 0.2s;
    margin-bottom: -2px;
  }

  .tab:hover {
    color: var(--color-text);
  }

  .tab--active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
    font-weight: 500;
  }

  .tabs__content {
    position: relative;
  }

  .tabs__panel {
    display: none;
  }

  .tabs__panel--active {
    display: block;
  }
}