.nav
  // position: fixed
  z-index: 10
  top: 0
  background-color: white
  width: 100%

  #menu_checkbox
    display: none

  .icon-menu
    display: none
    background-color: white
    border-radius: 1.5rem
    width: 3rem
    height: 3rem
    position: fixed
    top: 1rem
    right: 1rem
    box-sizing: border-box
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)
    border: 0
    padding: 0
    margin: 0

    .icon
      position: absolute
      transition: all 0.1s ease-in-out
      left: .75rem
      right: .75rem
      width: 1.5rem
      height: 4px
      top: calc(3rem / 2 - 2px)
      background-color: $color-primary

      &::before, &::after
        position: absolute
        content: ""
        background-color: $color-primary
        height: 4px
        width: 100%
        display: block

      &::before
        top: -.5rem
      &::after
        top: .5rem

  nav
    left: 0
    right: 0
    margin-bottom: 4rem

  ul
    list-style: none
    margin: 0
    padding: 0

    li
      display: inline
      border-right: 1px solid $color-primary
      border-bottom: 1px solid $color-primary

      &:last-child
        border-right: none

      &.active
        background: $color-primary
        color: white

        a
          color: white
          text-decoration-color: white

      a
        display: inline-block
        padding: 1rem
        font-size: 1rem
        font-weight: bold


@media screen and (max-width: 839px)
  .nav
    position: absolute

    .grid
      flex-direction: column
    .cell
      flex: 0 0 auto

    nav
      display: none
      top: 0
      left: 0
      right: 0
      bottom: 0
      position: relative
      background-color: white
      z-index: 500

    ul
      li
        border: 0
        text-align: center

        a
          width: 100%
          box-sizing: border-box

    .icon-menu
      display: block
      z-index: 501

    #menu_checkbox:checked

    #menu_checkbox:checked ~ nav
        position: fixed
        display: block
        height: 100vh

        .grid
          justify-content: center
          height: 100%

    #menu_checkbox:checked ~ .icon-menu
      .icon
        width: 60%
        transform: rotate(45deg) translate(5px, 7px)
        top: 14px
        &::before
          display: none
        &::after
          transform: rotate(-90deg)translate(-5px, 12px)
          transform-origin: 5%