/*
 * Nav Item
 *
 * Measured from Figma `Nav Item` (70:22078): Default, Hover and Current.
 *
 * NO BACKGROUND ON HOVER — TEXT AND ICON RECOLOUR ONLY
 *
 * Unlike every other interactive surface in this system (Button, Menu Item,
 * Table Row all paint `surface/hover` underneath), Nav Item's hover is
 * `text/interactive/hover` and `icon/interactive/hover` and nothing else — no
 * fill, no border. Reproduced as measured, not "fixed" to match the others:
 * a primary nav bar sitting directly on the header's own surface has nothing
 * to contrast a hover fill against without inventing a colour Figma never
 * specified.
 *
 * A FOCUS RING FIGMA DOESN'T SHOW, ADDED ANYWAY
 *
 * Figma has no third state for keyboard focus. Every other interactive
 * component in the system has one, so the same outline treatment is added
 * here for the same reason Input's disabled state was — an interaction a
 * real browser can reach that the static variant set doesn't enumerate isn't
 * optional just because Figma has no swatch for it.
 */
.ion-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-family-sans);
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-line-height);

  /* Figma binds `font/weight/medium` in every state; this read regular from
     the July package merge until 0.76.0. */
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-nav-item__icon,
.ion-nav-item__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--icon-tertiary);
  transition: color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-nav-item__icon svg,
.ion-nav-item__chevron svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.ion-nav-item:focus-visible,
.ion-nav-item[data-focused='true'] {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: 2px;
}

/*
 * CURRENT — THE TABS UNDERLINE, NOT THE SIDEBAR FILL
 *
 * Sidebar marks its current row with `surface/selected`, but NavItem never
 * fills (see above), so it takes the other current state the system already
 * has: Tabs' underline — `text/default` over a `border-width/thick` rule in
 * `border/primary`. The rule is an inset shadow, not a border, so the current
 * item is exactly as tall as the rest and a nav bar does not jump when the
 * page changes. The weight does not change either, for the same reason.
 *
 * Colour alone would not do: `text/secondary` to `text/default` is a step a
 * reader can miss. The rule is the part that is not colour.
 */
.ion-nav-item--current {
  color: var(--text-default);
  box-shadow: inset 0 calc(-1 * var(--border-width-thick)) 0
    var(--border-primary);
}

.ion-nav-item--current .ion-nav-item__icon {
  color: var(--icon-primary);
}

/* Forced colours drop box-shadow, which would erase the indicator entirely. */
@media (forced-colors: active) {
  .ion-nav-item--current {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-thick);
    text-underline-offset: var(--spacing-4);
  }
}

.ion-nav-item--disabled,
.ion-nav-item[data-disabled='true'] {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.ion-nav-item--disabled .ion-nav-item__icon,
.ion-nav-item--disabled .ion-nav-item__chevron,
.ion-nav-item[data-disabled='true'] .ion-nav-item__icon,
.ion-nav-item[data-disabled='true'] .ion-nav-item__chevron {
  color: var(--icon-disabled);
}

/*
 * Every hover selector excludes disabled with one `:not()` argument list,
 * rather than relying on disabled simply appearing earlier in the file. Both
 * states target the same nested icon/chevron element at equal specificity
 * (one qualifier + one descendant), so without the exclusion, source order
 * alone would decide the winner — fragile, and the same shape of bug
 * Checkbox's disabled/checked conflict already was. Excluding disabled from
 * hover directly means the two can never collide regardless of file order;
 * disabled is written above only because it is the simpler selector and
 * stylelint wants specificity to read non-decreasing top to bottom.
 */
@media (hover: hover) {
  .ion-nav-item:hover:not(.ion-nav-item--disabled, [data-disabled='true']) {
    color: var(--text-interactive-hover);
  }

  .ion-nav-item:hover:not(.ion-nav-item--disabled, [data-disabled='true'])
    .ion-nav-item__icon,
  .ion-nav-item:hover:not(.ion-nav-item--disabled, [data-disabled='true'])
    .ion-nav-item__chevron {
    color: var(--icon-interactive-hover);
  }
}

.ion-nav-item[data-hovered='true']:not(
    .ion-nav-item--disabled,
    [data-disabled='true']
  ) {
  color: var(--text-interactive-hover);
}

.ion-nav-item[data-hovered='true']:not(
    .ion-nav-item--disabled,
    [data-disabled='true']
  )
  .ion-nav-item__icon,
.ion-nav-item[data-hovered='true']:not(
    .ion-nav-item--disabled,
    [data-disabled='true']
  )
  .ion-nav-item__chevron {
  color: var(--icon-interactive-hover);
}