.navigation-hamburger {
  font-size: 3rem;

  .burger {
    display: inline-block;
    position: relative;
    margin-left: $margin-normal;
    width: .9em;
    height: .9em;
    cursor: pointer;
    background: transparent;
    order: 3;

    @include breakpoint(md) {
      display: none;
    }

    &:focus {
      outline: 0;
    }

    span {
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: .15em;
      background: currentColor;
      transition: background 0s .3s;
      border-radius: $border-radius-normal;

      &::before,
      &::after {
        position: absolute;
        display: block;
        left: 0;
        width: 100%;
        height: .15em;
        background-color: currentColor;
        content: '';
        border-radius: $border-radius-normal;
      }

      &::before {
        top: -.3em;
        transition: transform .3s 0s, top .3s .3s;
      }

      &::after {
        bottom: -.3em;
        transition: transform .3s 0s, bottom .3s .3s;
      }
    }
  }
}

:checked {
  + .navigation-hamburger {
    .burger {
      span {
        background: none;
        /* stylelint-disable max-nesting-depth */
        &::before {
          top: 0;
          transform: rotate(45deg);
          transition: top .3s 0s, transform .3s .3s;
        }

        &::after {
          bottom: 0;
          transform: rotate(-45deg);
          transition: bottom .3s 0s, transform .3s .3s;
        }
        /* stylelint-enable */
      }
    }
  }
}