#menu-container {
  * {
    @include transition;
  }

  #menu-toggle {
    display: none;

    &:checked {
      ~ #menu {
        left: 0;
      }

      ~ #menu-icon {
        background: green;
        left: $menu-width;

        span {
          $translation-y: 9px;
          $rotation-deg: 45deg;
          &:first-child {
            transform: translate(0, $translation-y) rotate($rotation-deg);
          }

          &:nth-child(2) {
            opacity: 0;
          }

          &:last-child {
            transform: translate(0, -$translation-y) rotate(-$rotation-deg);
          }
        }
      }
    }
  } // #menu-toggle

  #menu {
    @include foreground;

    position: fixed;
    top: 0;
    left: -$menu-width;
    bottom: 0;
    background: $menu-background-color;
    width: $menu-width;
    box-sizing: border-box;
    overflow-y: auto;

    #menu-header {
      border-bottom: 1px solid $menu-separator-color;
    }

    .menu-heading {
      font-size: 125%;
      font-weight: 300%;
      letter-spacing: .1em;
      margin-top: 0;
      text-transform: uppercase;
    }

    .menu-list {
      .menu-item {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    }

    .menu-link {
      color: $menu-text-color;
      text-decoration: $link-text-decoration;
      padding: .5em .8em;
    }

    .menu-heading,
    .menu-link {
      display: block;
    }

    @include media-screen-gt-sm {
      left: 0;
    }

  } // #menu

  #menu-icon {
    @include foreground;
    position: fixed;

    top: 0;
    left: 0;
    width: $hamburger-size;
    height: $hamburger-size;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;

    @include media-screen-gt-sm {
      display: none;
    }

    span {
      display: block;
      background: $hamburger-color;
      height: $hamburger-height;
      width: $hamburger-width;
      border-radius: $hamburger-radius;
      cursor: $clickable-cursor;
    }
  } // #menu-icon
} // #menu-container

@include media-screen-gt-sm {
  #layout {
    margin-left: $menu-width;
  }
}