/*
 * Tabs
 *
 * Geometry measured from Figma `Tabs Item` (156:259) and `Tabs` (157:126).
 * Both types share padding, gap and height; only radius and the selected
 * indicator differ, so size lives on the item and type lives on the track.
 *
 * Size is a set of slots defaulting to medium — a size modifier reassigns five
 * variables rather than restating five declarations, and the icon rule needs no
 * per-size override.
 *
 * Vertical is STRUCTURAL ONLY. `--vertical` stacks the track and stretches the
 * items, which is what the word means and needs no design input. Its
 * decoration does: the underline rule is a `border-bottom` and the pill track's
 * padding is written for the horizontal axis, and which edge the underline
 * moves to is Figma's call, not this file's. Until that is specified, a
 * vertical track is correctly stacked, correctly navigable and correctly
 * announced, but wears the horizontal type styling.
 */

/* Track */
.ion-tabs__track {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ion-tabs__track--vertical {
  flex-direction: column;
  align-items: stretch;
}

.ion-tabs__track--underline.ion-tabs__track--horizontal {
  display: inline-flex;
  gap: var(--spacing-4);
  border-bottom: var(--border-width-default) solid var(--border-default);
}

.ion-tabs__track--pill.ion-tabs__track--horizontal {
  display: inline-flex;
  gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-4);
  background-color: var(--surface-muted);

  /* `radius/full` — Figma's pill track is fully rounded, not an 8px rect. */
  border-radius: var(--radius-full);
}

/* Item */
.ion-tabs__item {
  --ion-tabs-item-size: var(--spacing-40);
  --ion-tabs-item-padding-x: var(--spacing-16);
  --ion-tabs-item-padding-y: var(--spacing-8);
  --ion-tabs-item-gap: var(--spacing-8);
  --ion-tabs-icon-size: var(--spacing-20);

  /*
   * Typography follows the Figma text styles: Body/Small Emphasis at Small,
   * Body/Default Emphasis at Medium, Body/Large Emphasis at Large. Emphasis is
   * the medium weight, which is why font-weight is size-invariant here.
   */
  --ion-tabs-item-font-size: var(--type-body);
  --ion-tabs-item-line-height: var(--type-body-line-height);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ion-tabs-item-size);
  padding: var(--ion-tabs-item-padding-y) var(--ion-tabs-item-padding-x);
  gap: var(--ion-tabs-item-gap);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--ion-tabs-item-font-size);
  line-height: var(--ion-tabs-item-line-height);
  background-color: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    color var(--ion-duration-base) var(--ion-ease-out),
    background-color var(--ion-duration-base) var(--ion-ease-out),
    border-color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-tabs__item--sm {
  --ion-tabs-item-size: var(--spacing-32);
  --ion-tabs-item-padding-x: var(--spacing-12);
  --ion-tabs-item-padding-y: var(--spacing-6);
  --ion-tabs-item-gap: var(--spacing-6);
  --ion-tabs-icon-size: var(--icon-size-sm);
  --ion-tabs-item-font-size: var(--type-body-sm);
  --ion-tabs-item-line-height: var(--type-body-sm-line-height);
}

.ion-tabs__item--lg {
  --ion-tabs-item-size: var(--spacing-48);
  --ion-tabs-item-padding-x: var(--spacing-20);
  --ion-tabs-item-padding-y: var(--spacing-8);
  --ion-tabs-item-gap: var(--spacing-8);
  --ion-tabs-icon-size: var(--spacing-20);
  --ion-tabs-item-font-size: var(--type-body-lg);
  --ion-tabs-item-line-height: var(--type-body-lg-line-height);
}

/* Underline item */
.ion-tabs__item--underline {
  color: var(--text-tertiary);
  border-bottom: var(--border-width-thick) solid transparent;

  /*
   * Figma draws the indicator as an INSIDE stroke, so it does not add height.
   * Absorbing it into the bottom padding keeps the item at exactly its token
   * height instead of 2px taller than every other variant.
   */
  padding-bottom: calc(
    var(--ion-tabs-item-padding-y) - var(--border-width-thick)
  );

  /* Overlap the track's own border so the indicator replaces it rather than
     stacking below it. */
  margin-bottom: calc(-1 * var(--border-width-default));
}

/*
 * Hover is declared twice, as on Button: `:hover` is pointer-guarded because
 * native hover latches on touch, and `[data-hovered]` comes from React Aria's
 * useHover, which is already pointer-aware.
 */
@media (hover: hover) {
  .ion-tabs__item--underline:hover {
    color: var(--text-default);
  }
}

.ion-tabs__item--underline[data-hovered='true'] {
  color: var(--text-default);
}

.ion-tabs__item--underline[data-selected='true'] {
  color: var(--text-default);
  border-bottom-color: var(--border-primary);
}

/* Pill item */
.ion-tabs__item--pill {
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
}

@media (hover: hover) {
  .ion-tabs__item--pill:hover {
    color: var(--text-default);
    background-color: var(--surface-hover);
  }
}

.ion-tabs__item--pill[data-hovered='true'] {
  color: var(--text-default);
  background-color: var(--surface-hover);
}

.ion-tabs__item--pill[data-selected='true'] {
  color: var(--text-default);
  background-color: var(--surface-default);
}

/*
 * Selected *and* hovered — a composed state, which is why the token is named
 * `hover-selected` in vocabulary order rather than `selected-hover`.
 */
@media (hover: hover) {
  .ion-tabs__item--pill[data-selected='true']:hover {
    background-color: var(--surface-page);
  }
}

.ion-tabs__item--pill[data-selected='true'][data-hovered='true'] {
  background-color: var(--surface-page);
}

/*
 * Focus ring.
 *
 * Figma draws a 2px `border/brand/default/focus` stroke offset 2px outside the
 * item, with a transparent gap. `outline` + `outline-offset` reproduces that
 * exactly; a box-shadow cannot, because the gap would have to be painted in the
 * backdrop colour and these items sit on a coloured pill track.
 *
 * Tabs previously borrowed Button's ring tokens. It has its own now.
 */
.ion-tabs__item:focus-visible,
.ion-tabs__item[data-focused='true'] {
  outline: var(--border-width-thick) solid var(--ring-focus);
  outline-offset: var(--border-width-thick);
}

/* Underline items are square, but Figma rounds their focus ring to 8px. */
.ion-tabs__item--underline:focus-visible,
.ion-tabs__item--underline[data-focused='true'] {
  border-radius: var(--radius-md);
}

/* Disabled */
.ion-tabs__item[data-disabled='true'] {
  color: var(--text-disabled);
  cursor: not-allowed;
  background-color: transparent;
}

.ion-tabs__item--underline[data-disabled='true'] {
  border-bottom-color: transparent;
}

/* Icons — one rule for every size; the slot is reassigned by the modifier. */
.ion-tabs__item svg {
  width: var(--ion-tabs-icon-size);
  height: var(--ion-tabs-icon-size);
  flex-shrink: 0;
}

/* Panel */
.ion-tabs__panel:focus-visible {
  outline: var(--border-width-thick) solid var(--ring-focus);
  outline-offset: var(--border-width-thick);
}

/*
 * Forced colours draw a transparent border in the system text colour, so every
 * underline tab would wear the selected tab's line and nothing would say which
 * is chosen. Unselected, the line is the page's own colour; the selected one
 * is Highlight, set in the shared block in index.css.
 */
@media (forced-colors: active) {
  .ion-tabs__item--underline {
    border-bottom-color: Canvas;
  }
}