master-detail {
  display:block;
  width: 100%;
  height: 100%;
  position: relative;

  .master, .detail {
    position: absolute;
    left: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .master {
    background: var(--color-ui-4);
    will-change: transform;
    transition: transform 0.3s linear;
    z-index: 1;
  }

  .master > div {
    width: 100%;
    height: 100%;
  }

  .detail {
    background: var(--color-ui-4);
  }

  .detail > div {
    width: 100%;
    height: 100%;
  }
}

master-detail.master-closed  {
  .master {
    @include translateX(-100%);
  }
}