*,
*:before,
*:after {
  box-sizing: border-box;
}

body.has-push-menu,
body.has-push-menu aside,
body.has-push-menu .progress-bar {
  transition: all 0.3s ease;
}

body.has-push-menu {
  overflow-x: hidden;
  position: relative;
  left: 0;

  &.push-menu-to-right {
    left: rem(240px);

    .progress-bar {
      left: rem(240px);
    }

    .bar-header {
      left: rem(240px);
    }
  }
}

aside.sidebar {
  position: fixed;
  width: rem(240px);
  height: 100%;
  top: 0;
  left: rem(-240px);
  background-color: $accentDark;
  z-index: 20;

  @include media(">=sm") {
    padding: rem(10px) 0 0;
  }

  &.open {
    left: 0;
  }

  h2 {
    margin: 0 rem(20px) 0;
    @include mainFont(400);
    font-size: rem(18px);
    color: $primaryDark;
    border-bottom: 1px solid $primaryDark;
    line-height: 50px;

    @include media(">=sm") {
      font-size: rem(20px);
    }
  }

  nav {
    ul {
      padding: 0;
      margin: rem(5px) 0;

      @include media(">=sm") {
        margin: rem(10px) 0;
      }

      li {
        margin: 0;
        list-style-type: none;

        a {
          width: 100%;
          display: block;
          padding: rem(15px) rem(20px);
          text-decoration: none;
          @include mainFont(300);
          color: $primaryDark;

          &:hover {
            color: $accentDark;
            background: $themeColor;
          }
        }
      }
    }
  }
}