///
/// Forty by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Menu */

#menu {
  @include vendor(
    'transition',
    (
      'transform #{_duration(menu)} ease',
      'opacity #{_duration(menu)} ease',
      'visibility #{_duration(menu)}'
    )
  );
  @include vendor('align-items', 'center');
  @include vendor('display', 'flex');
  @include vendor('justify-content', 'center');
  @include vendor('pointer-events', 'none');
  background: transparentize(_palette(bg), 0.1);
  box-shadow: none;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3em 2em;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: _misc(z-index-base) + 2;

  .inner {
    @include vendor(
      'transition',
      (
        'transform #{_duration(menu)} ease-out',
        'opacity #{_duration(menu)} ease',
        'visibility #{_duration(menu)}'
      )
    );
    @include vendor('transform', 'rotateX(20deg)');
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    max-height: 100vh;
    opacity: 0;
    overflow: auto;
    text-align: center;
    visibility: hidden;
    width: 18em;

    > :first-child {
      margin-top: _size(element-margin);
    }

    > :last-child {
      margin-bottom: (_size(element-margin) * 1.5);
    }
  }

  ul {
    margin: 0 0 (_size(element-margin) * 0.5) 0;

    &.links {
      list-style: none;
      padding: 0;

      > li {
        padding: 0;

        > a:not(.button) {
          border: 0;
          border-top: solid 1px _palette(border);
          display: block;
          font-size: 0.8em;
          font-weight: _font(weight-bold);
          letter-spacing: _font(letter-spacing-alt);
          line-height: 4em;
          text-decoration: none;
          text-transform: uppercase;
        }

        > .button {
          display: block;
          margin: 0.5em 0 0 0;
        }

        &:first-child {
          > a:not(.button) {
            border-top: 0 !important;
          }
        }
      }
    }
  }

  .close {
    @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: 0;
    cursor: pointer;
    display: block;
    height: 4em;
    line-height: 4em;
    overflow: hidden;
    padding-right: 1.25em;
    position: absolute;
    right: 0;
    text-align: right;
    text-indent: 8em;
    top: 0;
    vertical-align: middle;
    white-space: nowrap;
    width: 8em;

    &:before,
    &:after {
      @include vendor(
        'transition',
        'opacity #{_duration(transition)} ease-in-out'
      );
      background-position: center;
      background-repeat: no-repeat;
      content: '';
      display: block;
      height: 4em;
      position: absolute;
      right: 0;
      top: 0;
      width: 4em;
    }

    &:before {
      background-image: svg-url(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>'
      );
    }

    &:after {
      background-image: svg-url(
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>'
      );
      opacity: 0;
    }

    &:hover,
    &:active {
      &:after {
        opacity: 1;
      }
    }
  }
}

body.is-ie {
  #menu {
    background: transparentize(_palette(bg-alt), 0.025);
  }
}

.body.is-menu-visible {
  // #wrapper {
  // 	@include vendor('filter', 'blur(0.5em)');
  // }

  #menu {
    @include vendor('pointer-events', 'auto');
    opacity: 1;
    visibility: visible;

    .inner {
      @include vendor('transform', 'none');
      opacity: 1;
      visibility: visible;
    }
  }
}
