@import '../../scss/styles.scss';

$transTime: 200;

@layer payload-default {
  .drawer {
    display: flex;
    overflow: hidden;
    position: fixed;
    height: 100vh;

    &__blur-bg {
      @include blur-bg;
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      transition: all #{$transTime}ms linear;
    }

    &__content {
      opacity: 0;
      transform: translateX(calc(var(--base) * 4));
      position: relative;
      z-index: 2;
      // NOTE: width is controlled by js
      // width: calc(100% - var(--gutter-h));
      overflow: hidden;
      transition: all #{$transTime}ms linear;
      background-color: var(--theme-bg);
    }

    &__content-children {
      position: relative;
      z-index: 1;
      overflow: auto;
      height: 100%;
    }

    &--is-open {
      .drawer {
        &__content,
        &__blur-bg {
          opacity: 1;
        }

        &__close {
          opacity: 0.1;
          transition: opacity #{$transTime}ms linear;
          transition-delay: #{calc($transTime / 2)}ms;
        }

        &__content {
          transform: translateX(0);
        }
      }
    }

    &__close {
      @extend %btn-reset;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      text-indent: -9999px;
      cursor: pointer;
      opacity: 0;
      will-change: opacity;
      transition: none;
      transition-delay: 0ms;
      flex-grow: 1;
      background: var(--theme-elevation-800);

      &:active,
      &:focus {
        outline: 0;
      }
    }

    &__header {
      display: flex;
      align-items: center;
      margin-top: base(2.5);
      margin-bottom: base(1);
      width: 100%;

      &__title {
        margin: 0;
        flex-grow: 1;
      }

      &__close {
        border: 0;
        background-color: transparent;
        padding: 0;
        cursor: pointer;
        overflow: hidden;
        direction: ltr;
        display: flex;
        align-items: center;
        justify-content: center;
        width: base(1.2);
        height: base(1.2);

        svg {
          margin: base(-1.2);
          width: base(2.4);
          height: base(2.4);

          position: relative;

          .stroke {
            stroke-width: 1px;
            vector-effect: non-scaling-stroke;
          }
        }
      }
    }

    @include mid-break {
      &__header {
        margin-top: base(1.5);
      }
    }
  }

  html[data-theme='dark'] {
    .drawer {
      &__close {
        background: var(--color-base-1000);
      }

      &--is-open {
        .drawer__close {
          opacity: 0.25;
        }
      }
    }
  }
}