/* Mixin */
@mixin flexBox() {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

@mixin align-items($align) {
  -webkit-align-items: $align;
  align-items: $align;
}

@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
  justify-content: $justify;
  -ms-flex-pack: $justify;
}

@mixin box-sizing($border-box) {
  -webkit-box-sizing: $border-box;
  -moz-box-sizing: $border-box;
  box-sizing: $border-box;
}

@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

@mixin translate ($x, $y) {
  @include transform(translate($x, $y));
}

@mixin transition($transition...) {
  -moz-transition:    $transition;
  -o-transition:      $transition;
  -webkit-transition: $transition;
  transition:         $transition;
}

/* reset */
* {
  padding: 0;
  margin: 0;
}

nav {
  background-color: #91cfa1;
  height: 50px;
  padding: 0 16px;
  @include flexBox();
  @include align-items(center);

  .m-menu__checkbox {
    display: none;
  }
  
  label.m-menu__toggle {
    cursor: pointer;
  }
  
  .m-menu {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 450px;
    width: calc(100vw - 30px);
    height: 100%;
    @include transform(translate3d(-450px, 0, 0));
    @include transition(transform 0.35s);
    z-index: 1;
    overflow: hidden;
    background-color: #fff;
    
    &__overlay {
      background-color: hsla(0,0%,40.4%,.5);
      position: absolute;
      top: 0;
      width: 100%;
      bottom: 0;
      z-index: 1;
      display: none;
    }
    
    &__header {
      padding: 0 16px;
      height: 50px;
      @include flexBox();
      @include justify-content(space-around);
      @include align-items(center);
      border-bottom: 1px solid #e8e8e8;

      span {
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        width: 100%;
      }
    }
    
    .m-menu {
	    @include transform(translate3d(480px, 0, 0));
    }
    
    ul {
      height: 100%;
      overflow-y: auto;

      li {
      
        a, label {
          display: block;
          text-align: left;
          padding: 0 15px;
          line-height: 47px;
          text-decoration: none;
          color: #333;
          cursor: pointer;
          font-size: 1rem;
          border-bottom: 1px solid #e8e8e8;
          position: relative;
        }

        label {
          &.a-label__chevron::after {
            content: '';
            position: absolute;
            display: inline-block;
            height: 10px;
            width: 10px;
            border-color: #333;
            border-style: solid;
            border-width: 1px 1px 0 0;
            @include transform(rotate(45deg));
            top: 50%;
            margin-top: -5px;
            right: 16px;
          }
        }

        .-invisible {
          border-bottom: 0;
        }

      }
    }
  }
  
  .m-menu .m-menu label.m-menu__toggle {
    @include flexBox();
    border-bottom: 0;
    padding: 0;
    @include box-sizing(content-box);
  }

  /* fade in checked menu */
  .m-menu__checkbox:checked {
    ~ .m-menu__overlay {
      display: block;
    }
    ~ .m-menu {
      @include transform(translate3d(0, 0, 0));
    }
  }
}

.wrapper {
  width: 480px;
  height: 667px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
  position: relative;
}