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

/* Menu */

#wrapper {
  @include vendor("transition", "opacity #{_duration(menu)} ease");
  opacity: 1;
}

#menu {
  @include vendor("transform", "translateX(#{_size(menu)})");
  @include vendor(
    "transition",
    ("transform #{_duration(menu)} ease", "visibility #{_duration(menu)}")
  );
  position: fixed;
  top: 0;
  right: 0;
  width: _size(menu);
  max-width: 80%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  background: _palette(fg);
  color: _palette(bg);
  cursor: default;
  visibility: hidden;
  z-index: _misc(z-index-base) + 2;

  > .inner {
    @include vendor("transition", "opacity #{_duration(menu)} ease");
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2.75em;
    opacity: 0;
    overflow-y: auto;

    > ul {
      list-style: none;
      margin: 0 0 (_size(element-margin) * 0.5) 0;
      padding: 0;

      > li {
        padding: 0;
        border-top: solid 1px transparentize(_palette(bg), 0.85);

        a {
          display: block;
          padding: 1em 0;
          line-height: 1.5;
          border: 0;
          color: inherit;
        }

        &:first-child {
          border-top: 0;
          margin-top: -1em;
        }
      }
    }
  }

  > .close {
    @include vendor(
      "transition",
      ("opacity #{_duration(menu)} ease", "transform #{_duration(menu)} ease")
    );
    @include vendor("transform", "scale(0.25) rotate(180deg)");
    -webkit-tap-highlight-color: transparent;
    display: block;
    position: absolute;
    top: 2em;
    left: -6em;
    width: 6em;
    text-indent: 6em;
    height: 3em;
    border: 0;
    font-size: 1em;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;

    &:before,
    &:after {
      @include vendor("transition", "opacity #{_duration(transition)} ease");
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 2em 2em;
    }

    &:before {
      background-image: svg-url(
        '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>'
      );
      opacity: 0;
    }

    &:after {
      background-image: svg-url(
        '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>'
      );
      opacity: 1;
    }

    &:hover {
      &:before {
        opacity: 1;
      }

      &:after {
        opacity: 0;
      }
    }
  }

  @include breakpoint(small) {
    @include vendor("transform", "translateX(#{_size(menu) * 0.75})");
    width: (_size(menu) * 0.75);

    > .inner {
      padding: 2.75em 1.5em;
    }

    > .close {
      top: 0.5em;
      left: -4.25em;
      width: 4.25em;
      text-indent: 4.25em;

      &:before,
      &:after {
        background-size: 1.5em 1.5em;
      }
    }
  }
}

body.is-menu-visible {
  #wrapper {
    @include vendor("pointer-events", "none");
    cursor: default;
    opacity: 0.25;
  }

  #menu {
    @include vendor("transform", "translateX(0)");
    visibility: visible;

    > * {
      opacity: 1;
    }

    .close {
      @include vendor("transform", "scale(1.0) rotate(0deg)");
      opacity: 1;
    }
  }
}
