.root * {
  box-sizing: border-box;
}

.bar {
  width: 100%;
}

.link {
  display: inline-block;
  text-align: center;
}

.link:active {
  box-shadow: inset 0 0 2px var(--color-transparent-black-iv);
}

.scrollableLink {
  margin-left: 3.125rem;
}

.underline {
  height: 1px;
  background-color: currentColor;
  will-change: transform;
  backface-visibility: hidden;
}

.scrollableUnderline {
  margin-left: 3.125rem;
}

.light {
  color: var(--color-black);
}

.dark {
  color: var(--color-greyLightest);
}

.light .bar {
  background-color: var(--color-white);
}

.dark .bar {
  background-color: var(--color-greyDarker);
}

.light .link {
  color: var(--color-grey);
}

.light .link:hover,
.light .link:focus {
  background-color: var(--color-white);
  color: var(--color-greyDarkest);
}

.dark .link {
  color: var(--color-greyLight);
}

.dark .link:hover,
.dark .link:focus {
  color: var(--color-white);
}

.light .active {
  color: var(--color-black);
}

.dark .active {
  color: var(--color-white);
}

.scrollable {
  overflow-y: scroll;
  white-space: nowrap;
}