.global-nav
  +media-breakpoint-down(sm)
    background-color: transparent

.global-nav__background.a-overlay
  background-color: rgba(black, .6)
  width: 0
  display: inline
  input:checked + .global-nav &
    opacity: 1
    width: 100%
    display: block

.global-nav__inner
  +media-breakpoint-up(md)
    background-color: var(--main)
    +size(var(--global-nav-width) 100%)
    +position(fixed, left 0, top 0, bottom 0, 3)
    overflow-y: auto

.global-nav-links__link
  position: relative
  +flex-link
  white-space: nowrap
  align-items: center
  justify-content: center
  border-bottom: solid 1px var(--main-semi-shade)
  color: var(--reversal-text)
  transition: color .2s ease-in, background-color .2s ease-in
  width: 100%
  +media-breakpoint-up(md)
    flex-direction: column
    height: 4.125rem
  +media-breakpoint-down(sm)
    flex-direction: row
    height: 2.75rem
    padding-inline: 1rem
    justify-content: flex-start
  &:hover
    background-color: var(--main-shade)
  &.is-active
    background-color: var(--accent)
    color: var(--main)

.global-nav-links__link-icon
  +media-breakpoint-up(md)
    +text-block(1.125rem 1 0 .25rem, center)
  +media-breakpoint-down(sm)
    +text-block(1rem 1, center)
    margin-right: .5rem
  .fa-rocket
    font-size: 1.15em

.global-nav-links__link-label
  +text-block(.625rem 1.4, center)
  +media-breakpoint-down(sm)
    font-size: .875rem
  +media-breakpoint-up(md)
    &.is-sm
      transform: scale(.875)
      margin-top: -.125rem
      line-height: 1.4

.global-nav__item-count
  +position(right .25rem, top .25rem)
