/* The header's section navigation.
 *
 * Not `Tab`: that component is a 40px pill built for switching content sets
 * inside a page, and four of them in a product header read as four buttons
 * competing with the page's own actions. This is the rail the design chose
 * instead (handoff MEET-NOW-AND-NAVIGATION, MN-A): plain text, and the active
 * section marked by a 2px rule landing on the header hairline that is already
 * drawn. Structure out of rules, not fills.
 *
 * `Tab` keeps its job - the tab strips inside the scheduling editor and the
 * bookings list still use it.
 */

.nav-rail {
  display: flex;
  align-items: stretch;
  column-gap: 26px;
  align-self: stretch;
}

/* 68px, because this header is border-box: its 1px bottom border is inside
   the 68px, so an item of the same height has its bottom edge exactly on the
   hairline. A content-box header would want 70px. Get this wrong by a pixel
   and the rule floats above the line, which is the whole idea of the
   component gone. */
.nav-rail a,
.nav-rail span[aria-current] {
  display: inline-flex;
  align-items: center;
  height: 68px;
  padding: 0 2px;
  font: var(--t-body-primary-400);
  color: var(--c-neutral-9);
  text-decoration: none;
  transition: color var(--transition-default);
}

/* Colour only. No fill, no movement, no press state. */
.nav-rail a:hover {
  color: var(--c-white);
}

.nav-rail span[aria-current] {
  font: var(--t-body-primary-500);
  color: var(--c-white);
  box-shadow: inset 0 -2px 0 0 var(--c-blue);
  cursor: default;
}