/* ==========================================================================
   MOLECULES / tabs / tabs.css
   --------------------------------------------------------------------------
   STYLES:  underline (default), pill, bordered
   LAYOUTS: horizontal (default), vertical

   HTML PATTERN:
     <div class="tabs" role="tablist" aria-label="Pengaturan akun">
       <button class="tab tab-active" role="tab"
               aria-selected="true" aria-controls="panel-umum" id="tab-umum">
         Umum
       </button>
       <button class="tab" role="tab"
               aria-selected="false" aria-controls="panel-keamanan" id="tab-keamanan">
         Keamanan
       </button>
     </div>

     <div class="tab-panel" id="panel-umum" role="tabpanel"
          aria-labelledby="tab-umum">Konten Umum</div>
     <div class="tab-panel" id="panel-keamanan" role="tabpanel"
          aria-labelledby="tab-keamanan" hidden>Konten Keamanan</div>
   ========================================================================== */

/* Container */
.tabs {
  display:   flex;
  flex-wrap: wrap;
  gap:       0;
  border-bottom: 1px solid var(--color-border-default);
  position:  relative;
}

/* Individual tab */
.tab {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--size-200);
  padding:        var(--size-300) var(--size-400);
  font-size:      var(--text-label-size);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-secondary);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  margin-bottom:  -1px;   /* overlap container border */
  cursor:         pointer;
  white-space:    nowrap;
  transition:
    color        var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
  user-select:    none;
}

.tab:hover:not(.tab-active):not(:disabled) {
  color:         var(--color-text-primary);
  border-color:  var(--color-border-strong);
}

.tab-active {
  color:        var(--color-brand);
  border-color: var(--color-brand);
  font-weight:  var(--font-weight-semibold);
}

.tab:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: -2px;
  border-radius:  var(--radius-sm) var(--radius-sm) 0 0;
}

.tab:disabled,
.tab[aria-disabled="true"] {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Tab icon */
.tab > svg { flex-shrink: 0; width: var(--size-icon-md); height: var(--size-icon-md); }

/* Tab badge */
.tab-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  min-width:        18px;
  height:           18px;
  padding-inline:   var(--size-100);
  background:       var(--color-bg-sunken);
  color:            var(--color-text-secondary);
  border-radius:    var(--radius-full);
  font-size:        10px;
  font-weight:      var(--font-weight-bold);
  line-height:      1;
}
.tab-active .tab-badge {
  background: var(--color-brand-subtle);
  color:      var(--color-brand);
}


/* ------------------------------------------------------------------
   PILL STYLE
   ------------------------------------------------------------------ */
.tabs-pill {
  border-bottom: none;
  gap:           var(--size-100);
  padding:       var(--size-100);
  background:    var(--color-bg-sunken);
  border-radius: var(--radius-lg);
  display:       inline-flex;
}

.tabs-pill .tab {
  border:        none;
  border-radius: var(--radius-md);
  padding:       var(--size-200) var(--size-400);
  margin:        0;
}

.tabs-pill .tab-active {
  background:  var(--color-bg-surface);
  color:       var(--color-text-primary);
  box-shadow:  var(--shadow-sm);
}

.tabs-pill .tab:hover:not(.tab-active) {
  background: rgba(0,0,0,0.04);
  color:      var(--color-text-primary);
  border:     none;
}

/* ------------------------------------------------------------------
   VERTICAL STYLE
   ------------------------------------------------------------------ */
.tabs-vertical {
  flex-direction: column;
  border-bottom:  none;
  border-right:   1px solid var(--color-border-default);
  width:          fit-content;
}

.tabs-vertical .tab {
  border-bottom:  none;
  border-right:   2px solid transparent;
  border-radius:  var(--radius-sm) 0 0 var(--radius-sm);
  margin-bottom:  0;
  margin-right:   -1px;
  text-align:     left;
  width:          100%;
}

.tabs-vertical .tab-active {
  border-right-color: var(--color-brand);
  background:         var(--color-brand-subtle);
}


/* ------------------------------------------------------------------
   TAB PANEL
   ------------------------------------------------------------------ */
.tab-panel {
  padding-top: var(--size-600);
  outline:     none;
}

.tab-panel:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}