@import '../colors.css';
@import '../variables.css';
@import '../media.css';
@import './config.css';

.wrapper {
  position: relative;
  z-index: var(--z-index-higher);
}

.drawer {
  background-color: var(--drawer-background-color);
  box-shadow: var(--shadow-2p);
  color: var(--drawer-text-color);
  display: block;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform-style: preserve-3d;
  transition: transform var(--animation-duration) var(--animation-curve-default);
  transition-delay: 0s;
  width: var(--drawer-mobile-width);
  will-change: transform;

  @apply --reset;

  &.active {
    pointer-events: all;
    transform: translateX(0);
    transition-delay: var(--animation-delay);
  }

  &.right {
    border-left: 1px solid var(--drawer-border-color);
    right: 0;

    &:not(.active) {
      transform: translateX(100%);
    }
  }

  &.left {
    border-right: 1px solid var(--drawer-border-color);
    left: 0;

    &:not(.active) {
      transform: translateX(calc(-1 * 100%));
    }
  }
}

@media screen and (--larger-than-xs-viewport) {
  .drawer {
    width: var(--drawer-desktop-width);
  }
}