.lp-header-nav
  height: 100%
  +media-breakpoint-down(lg)
    display: none
    input:checked + &
      display: block

.lp-header-nav__items
  display: flex
  +media-breakpoint-up(xxl)
    gap: 1rem
  +media-breakpoint-up(xl)
    height: 100%
    align-items: center
    gap: .5rem
    font-size: .875rem
  +media-breakpoint-only(xl)
    gap: .25rem
  +media-breakpoint-down(lg)
    flex-direction: column
    +position(fixed, left 0, top 0, bottom 0, 2)
    background-color: var(--base)
    width: 20rem
    max-width: calc(100vw - 3rem)

.lp-header-nav__item
  +media-breakpoint-down(lg)
    border-bottom: solid 1px var(--border-tint)

.lp-header-nav__item-link
  text-decoration: none
  font-weight: 700
  color: var(--main)
  white-space: nowrap
  display: flex
  justify-content: center
  align-items: center
  transition: all .2s ease-out
  span
    white-space: nowrap
  +media-breakpoint-up(xl)
    height: 2.25rem
    padding-inline: .75rem
    font-size: .875rem
    background-color: var(--base)
    border-radius: .5rem
    &:hover
      background-color: var(--lp-bg-3)
  +media-breakpoint-down(lg)
    height: 3rem
    padding-inline: 2rem
    font-size: .875rem

.lp-header-nav__overlay
  +media-breakpoint-up(xl)
    display: none
  +media-breakpoint-down(lg)
    +position(fixed, left 0, top 0, right 0, bottom 0, 1)
    background-color: #27272ccc

.lp-header__home-link-image
  width: 9.75rem
  min-width: 9.75rem

.lp-header__login
  display: flex
  height: 100%
  align-items: center
  +media-breakpoint-up(md)
    width: 7.5rem
  +media-breakpoint-down(sm)
    width: auto
    .a-button
      font-size: .6875rem

.lp-header__mobile-nav-trigger
  +media-breakpoint-up(xl)
    display: none
  +media-breakpoint-down(lg)
    display: flex
    width: 2.75rem
    height: 2.75rem
    justify-content: center
    align-items: center


.lp-header__home
  height: 100%
  display: flex
  align-items: center
