.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
  transform: rotate(90deg) translate(10%, -40%)
  transform-origin: left bottom

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

.header__nav
  flex-grow: 1
  padding: 1.2em $gap / 2 1em
  li
    position: relative
  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)