.pagenav
  display: flex
  align-content: flex-start
  align-items: flex-start
  flex-flow: row wrap
  padding: 0 0 10px 0
  margin: -5px -5px 20px -5px
  border-bottom: 1px solid #eee
  list-style: none

.pagenav-item__expand-radio
  display: none

.pagenav-item__link
  display: block
  padding: 6px 10px
  background-color: white

  &:hover
    background-color: var(--color-grey-light)

a.pagenav-item__link, .pagenav-item__link a
  text-decoration: none

.pagenav__list-item
  position: relative
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
  margin: 5px
  padding: 0
  display: grid
  grid-template-areas: "label expand"
  grid-template-columns: auto minmax(0, auto)
  flex: 0 0 auto

  & > *
    grid-area: label
    place-self: stretch / stretch
    line-height: 20px

    &.pagenav-item__children-wrapper
      grid-column: label-start / expand-end

  & > .pagenav-item__expand-label
    display: flex
    justify-content: center
    align-items: center
    grid-area: expand
    background-color: white
    transition: background-color 0.2s ease
    padding: 6px 10px
    cursor: pointer

    .fas
      line-height: 20px

  &:hover
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.9)

    & > .pagenav-item__expand-label
      background-color: var(--color-grey-light)

  .pagenav-item__link:hover ~ .pagenav-item__expand-label
    background-color: white

  .pagenav-item__expand-radio:checked ~ .pagenav-item__expand-label
    background-color: var(--color-grey-light)

  .pagenav-secondary &
    grid-template-areas: "expand"
    & > .pagenav-item__children-wrapper
      grid-column: exand-start / exand-end


.pagenav-item__children
  flex: 1 0 auto
  list-style: none
  margin: 0
  padding: 0
  display: grid
  grid-template-rows: auto
  justify-items: stretch
  grid-auto-columns: max-content

  .pagenav-item__link
    max-width: 250px
  
  & > li
    display: flex

    & > *
      flex: 1 0 auto

.pagenav-item__close-label
  display: none
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
  padding: 6px 10px
  transition: all 0.2s ease
  position: absolute
  top: 100%
  right: 0
  background-color: white
  z-index: -1
  cursor: pointer

  .fas
    transition: all 0.2s ease
    opacity: 0.5
    transform: rotate(0.5turn)
    line-height: 20px

  &:hover
    background-color: var(--color-grey-light)
    .fas
      transform: rotate(0)
      opacity: 1
  
.pagenav-item__children-wrapper
  display: none
  position: absolute
  right: 0
  top: 100%
  background-color: white
  z-index: 21
  margin: 0
  padding: 0
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)

  .pagenav-item__expand-radio:checked ~ &, .pagenav-item__expand-label:hover ~ &, &:hover
    display: flex

  .pagenav__list-item:hover &
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.9)
  
  .pagenav-item__expand-radio:checked ~ &
    .pagenav-item__close-label:not(.pagenav-item__close-label--hidden)
      display: block

/* .pagenav__link-wrapper
/*   flex: 1
/*   padding: 10px 10px 12px
/*   text-decoration: none !important

/*   &:hover
/*     background-color: var(--color-grey-light)

/* @media (max-width: 1024px)
/*   .pagenav
/*     flex-direction: column

/* @media (min-width: 1025px)
/*   .pagenav-secondary
/*     position: relative
/*     overflow: visible
/*     padding-top: 10px

/*     &::after
/*       content: '\2026'
/*       display: inline-block
/*       padding: 10px 10px 12px
/*       width: 40px
/*       box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
/*       box-sizing: border-box
/*       text-align: center
/*       transition: box-shadow 0.2s ease

/*     &:hover
/*       &::after
/*         box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.8)

/*       .pagenav-secondary__list
/*         display: block

/*   .pagenav-secondary__list
/*     position: absolute
/*     display: none
/*     right: 0
/*     top: 50px
/*     width: 250px
/*     background-color: white
/*     box-shadow: 0 0 6px 3px var(--color-grey-light)
/*     z-index: 18

/*   .pagenav__list-item--secondary
/*     display: flex
/*     box-shadow: none
/*     margin: 0

/*     &:hover
/*       background-color: var(--color-grey-light)