.drawer-main {
  @include full-fixed;
  @include display-flex(flex-end, flex-start);
  background: transparent;
  pointer-events: none;
  z-index: 9999999;

  .drawer-content {
    max-width: 520px;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: $white;
    opacity: 0;
    transform: translateX(100%);

    .drawer-header {
      @include display-flex;
      padding: 14px 16px;
      border-bottom: 1px solid $light-grey;

      &-close {
        @include display-flex(flex-start, flex-start);
        cursor: pointer;
        width: 20px;

        svg {
          path {
            stroke: $black;
          }
        }
      }
    }
  }

  &.open,
  &.closed {
    transition: all ease-in-out 0.4s;

    .drawer-content {
      transition: all ease-in-out 0.4s;
    }
  }

  &.open {
    background: transparentize($black, 0.5);
    pointer-events: all;

    .drawer-content {
      transform: translateX(0);
      opacity: 1;
    }
  }
}