@layer components {
/* =============================================================================
   @elements/style — tabs

   Underline tabs. Toggle .is-active on the current tab.

     <div class="tabs">
       <div class="tab-list">
         <button class="tab is-active">General</button>
         <button class="tab">Billing</button>
       </div>
       <div class="tab-panel">…</div>
     </div>
============================================================================= */

.tabs {
  display:        flex;
  flex-direction: column;
}

.tab-list {
  display:       flex;
  gap:           var(--space-1);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
}

.tab {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2-5) var(--space-4);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--ink-soft);
  background:      transparent;
  border:          none;
  border-bottom:   2px solid transparent;
  border-radius:   0;
  margin-bottom:   -1px;
  cursor:          pointer;
  transition:      var(--transition-colors);
  box-shadow:      none;
}

.tab:hover {
  color:      var(--ink);
  background: transparent;
}

.tab.is-active {
  color:         var(--ink);
  border-bottom-color: var(--accent);
  background:    transparent;
}

.tab:focus-visible {
  outline:        none;
  box-shadow:     var(--focus-ring);
  border-radius:  var(--radius-sm);
}

.tab-panel {
  padding-block: var(--space-5);
}

}