.page-tabs
  background-color: var(--base)
  border-bottom: solid 1px var(--border)

.page-tabs__items
  display: flex
  gap: .25rem
  transform: translateY(1px)
  overflow-y: visible
  overflow-x: auto
  margin-inline: -1rem
  padding-inline: 1rem

.page-tabs__item
  +media-breakpoint-up(md)
    min-width: 8.5rem
  +media-breakpoint-down(sm)
    min-width: 7rem

.page-tabs__item-link
  +flex-link
  +text-block(.825rem 1, 600 nowrap)
  color: var(--muted-text)
  align-items: center
  justify-content: center
  background-color: var(--base)
  padding-inline: 1.25rem
  +border-radius(top, .25rem)
  border: solid 1px var(--border)
  +position(relative)
  transition: all .2s ease-out
  +media-breakpoint-up(md)
    height: 2.5rem
  +media-breakpoint-down(sm)
    height: 2.75rem
    font-size: .75rem
  &:hover
    background-color: var(--background-more-tint)
    color: var(--muted-text)
  &.is-active
    background-color: var(--background)
    border-bottom-color: var(--background)
    color: var(--default-text)
  &.is-sm
    font-size: .75rem
  &.is-inactive
    color: var(--muted-text)
    pointer-events: none
    background-color: var(--background-semi-shade)

.page-tabs__item-count
  +position(right .125rem, top .125rem)
