@charset 'UTF-8';

.menu-mobile {
  position: fixed;
  top: 0;
  left: -70vw;
  width: 70vw;
  height: 100vh;
  padding: $grid-gutter-width;
  background: $black;
  color: $white;
  z-index: $zindex-modal + 10;
  overflow: auto;
  -webkit-overflow-scrolling: touch; // Smooth scroll iOS

  /* stylelint-disable selector-no-vendor-prefix, selector-root-no-composition */
  /* Hack IE 11 */

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { position: absolute; }

  /* stylelint-enable selector-no-vendor-prefix, selector-root-no-composition */

  @media only screen and (min-width: $screen-sm-min) {
    left: -30vw;
    width: 30vw;
  }

  .nav {
    li {
      padding: ($grid-gutter-width/4) 0;
    }

    ul {
      list-style: none;
      margin: 0;
    }

    .children {
      font-weight: 400;
    }
  }

  .separator {
    width: 100%;
    height: 1px;
    margin: ($grid-gutter-width/2) 0;
    background-color: $gray;
  }

  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  a {
    color: $white;
    text-decoration: none;

    &.active,
    &:hover {
      color: $brand-primary;
      transition: color 0.25s ease-in-out;
    }
  }
}

/* Trick the body to allow push from left */

body {
  position: relative;
  transition: transform 0.3s ease-in-out;

  &.menu-push-toright {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transform: translateX(70vw);

    @media only screen and (min-width: $screen-sm-min) {
      transform: translateX(30vw);
    }
  }
}