@charset 'UTF-8';

.menu-toggle {
  display: inline-block;
  min-width: 100px;
  height: 100px;
  padding: 24px;
  background: $black;
  cursor: pointer;
  transition: background 0.2s;
  z-index: $zindex-modal + 1;

  @media only screen and (min-width: $screen-md-min) {
    min-width: 120px;
    height: 120px;
    padding: 33px;
  }

  label {
    font-size: 18px;
    font-weight: 700;
    color: $white;
    text-transform: uppercase;
    transition: background 0.15s;
  }

  &:hover {
    background: lighten($black, 10%);
  }

  .hamburger {
    display: inline-block;
    width: 100%;
    overflow: visible;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: 0.15s;
    transition-property:
      opacity,
      filter;
    text-transform: none;

    &:active {
      outline: none;
      border: none;
    }

    &:focus {
      outline: 0;
    }
  }

  .hamburger-box {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 24px;
  }

  .hamburger-inner {
    display: block;
    margin-top: -2px;
  }

  .hamburger-inner,
  .hamburger-inner:after,
  .hamburger-inner:before {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: $white;
    transition-timing-function: ease;
    transition-duration: 0.15s;
    transition-property: transform;
  }

  .hamburger-inner:after {
    width: 80%;
  }

  .hamburger--collapse {
    .hamburger-inner {
      top: auto;
      bottom: 0;
      transition-delay: 0.15s;
      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      transition-duration: 0.15s;
    }

    .hamburger-inner:after,
    .hamburger-inner:before {
      content: '';
      display: block;
    }

    .hamburger-inner:after {
      top: -20px;
      bottom: -10px;
      transition:
        top 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.3s,
        opacity 0.11s linear;
    }

    .hamburger-inner:before {
      top: -10px;
      transition:
        top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.3s,
        transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    &.is-active .hamburger-inner {
      transform: translate3d(0, -10px, 0) rotate(-45deg);
      transition-delay: 0.32s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    &.is-active .hamburger-inner:before {
      top: 0;
      transform: rotate(-90deg);
      transition:
        top 0.12s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.18s,
        transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0.42s;
    }

    &.is-active .hamburger-inner:after {
      top: 0;
      transition:
        top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
        opacity 0.11s linear 0.27s;
      opacity: 0;
    }
  }
}