/*
 * Tabs — horizontal sub-navigation within a page (e.g. a VAT return's
 * Momsangivelse / Listeangivelse, a report's variants). Plain links; the
 * active tab carries `aria-current="page"` (or `.tab--active`).
 */

@layer components {
  .tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin: 0 0 var(--space-6);
    overflow-x: auto;
  }

  .tab {
    padding: var(--space-2-5) var(--space-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-body);
    font-weight: 500;
    font-size: var(--text-sm);
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
  }

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

  .tab--active,
  .tab[aria-current="page"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }
}