master-detail {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
  overflow: hidden;

  .master, .detail {
    height: 100%;
    //margin:  $default-margin;
    > div{
      width: 100%;
      height: 100%;
      @include flex();
      @include flex-column();
      @include overflow-scroll(auto, touch);
    }

  }

  .master {
    position: absolute;
    will-change: transform;
    @include slideAnimation();
    z-index: 1;
    width: 20rem;
  }



  .detail {
    margin-left: 20rem;
  }

}

@media screen  and (max-width: 500px){
  master-detail.master-closed  {
    .master {
      @include translateX(-100%);
    }


  }
  master-detail{
    .master{
      width: 100%;
    }

    .detail {
      margin-left: 0rem;
    }
  }
}