.header-links
  height: 100%
  display: flex
  align-items: center

.header-links__items
  display: flex
  height: 100%

.header-links__item
  display: flex
  height: 100%
  border-left: solid var(--border-tint) .0625rem
  +position(relative)
  transition: color .2s ease-in, background-color .2s ease-in

.header-links__link
  +flex-link
  flex-direction: column
  align-items: center
  justify-content: center
  height: 100%
  +text-block(1em 1)
  color: var(--default-text)
  +position(relative)
  transition: all .2s ease-in
  cursor: pointer
  +media-breakpoint-up(md)
    font-size: 1.375rem
    width: 3.75rem
  +media-breakpoint-down(sm)
    font-size: 1.125rem
    width: 2.75rem
  &:hover
    background-color: #f8f8f8
  &.is-active
    background-color: var(--warning)
    color: var(--main-text)

.header-links__link-label
  margin-top: .375em
  +media-breakpoint-up(md)
    font-size: .6875rem
  +media-breakpoint-down(sm)
    font-size: .625rem

.header-links__link-count
  +position(right .25rem, top .25rem)

.header-links__image
  +media-breakpoint-up(md)
    width: 1.5rem
  +media-breakpoint-down(sm)
    width: 1.125rem

.header-links__link-icon
  +text-block(1.25rem 1)
  text-align: center
  +media-breakpoint-down(sm)
    +text-block(1.125rem 1)
    .has-count &
      color: var(--default-text)
