.header

position: fixed
top: 0
bottom: 0
left: 0
height: 100vh
z-index: 5
background-color: white
width: $header-space-left
counter-reset: ordered

a
  color: $okf-font-1
  &:hover,
  &:active
    color: $okf-blue

// this is the menu toggle logic
&:target
  .header__toggleble
    transform: translateX(0)
  .toggle__l
    transform-origin: left bottom
    transform: rotate(45deg) translate(-3.3em, -1em)
  .toggle__r
    transform-origin: right bottom
    transform: rotate(-45deg) translate(1.9em, -0.9em)
  .toggle.cross
    display: block
  .toggle.burger
    display: none

.header__visible

position: relative
width: $header-space-left
height: 100vh
padding: 0.5rem
overflow: hidden
z-index: 2
background-color: white
border-right: solid 1px $okf-grey-2

.header__title

position: absolute
width: 100vh
font-size: 1.2rem
line-height: 1.5
transform: rotate(90deg) translate(10%, -50%)
transform-origin: left bottom
white-space: nowrap

.header__toggleble

height: 100vh
position: absolute
top: 0
left: $header-space-left
display: flex
flex-direction: column
background: white
width: 360px
transition: transform 200ms ease
transform: translateX(-100%)
z-index: 1

.header__nav

flex-grow: 1
padding: 1.2em $gap / 2 1em
overflow-y: scroll
li
  position: relative
  white-space: nowrap
ol
  list-style: none
  .toplevel
    &::before
      counter-increment: ordered
      content: counter(ordered)
      margin-right: .55rem
    &.active,
    &:hover,
    &:active,
      a
        color: $okf-blue
      &::before
        color: $okf-blue
  .sublevel
    &::before
      content: ""
      position: absolute
      top: 0
      bottom: 0
      margin: auto
      display: inline-block
      width: 10px
      height: 1px
      vertical-align: middle
      margin-right: 0.4em
      background-color: $okf-font-2
      transition: width 200ms ease
    a
      padding-left: 1.3rem
    &.active,
    &:hover,
    &:active,
      a
        color: $okf-blue
      &::before
        width: 18px
        background-color: $okf-blue
  .sublevel + .toplevel
    margin-top: 1.3rem

.header__footer

flex: 0 0 3rem
padding: 1.2em $gap / 2 1em
line-height: 1
border-top: 1px solid $okf-grey-2
.icon-back-to
  vertical-align: middle
  transition: transform 200ms ease
a:hover,
a:active
  .icon-back-to
    transform: translateX(-0.2em)
  path
    stroke: $okf-blue

.header__nav-title

margin-bottom: $gap / 2
font-weight: 500

.toggle

display: block
padding: 0
line-height: 1
border: none
background-color: transparent
&.cross
  display: none
.toggle__icon
  transform-origin: center center
  transition: transform 200ms ease
.toggle__r,
.toggle__l
  transition: transform 200ms ease
&:hover
  .toggle__icon
    transform: scale(1.1)