@import './config';
@import "../../mixins";

.Drawer {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: $modal-zindex;
}

.Drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-color: $color-white;
  animation: drawerBackgroundShow 0.4s ease-in 0s forwards;

  .isHidden & {
    opacity: 0.6;
    animation: drawerBackgroundHide 0.4s ease-in 0.2s forwards;
  }
}

.Drawer-close {
  color: $color-text-gray;
  font-size: $font-size-sm;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  display: flex;
  align-items: center;
  cursor: pointer;

  &:focus {
    outline: none;
  }
}

.Drawer-closeIcon {
  width: $spacer-md;
  height: $spacer-md;
  fill: #637381;
  margin-right: $spacer-sm;
  pointer-events: none;
}

.Drawer-content {
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 0;
  background-color: $color-white;
  border-left: 1px solid $color-light-gray;
  overflow-y: auto;
  padding: $spacer-xl;
  opacity: 0.5;
  transform: translateX(100%);
  animation: drawerContentShow 0.44s ease-in-out 0.2s forwards;

  @include media-up(medium) {
    width: 43.75rem;
  }

  .isHidden & {
    opacity: 1;
    transform: translateX(0);
    animation: drawerContentHide 0.44s ease-in-out 0s forwards;
  }
}

@keyframes drawerBackgroundShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes drawerBackgroundHide {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}

@keyframes drawerContentShow {
  0% {
    transform: translateX(100%);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes drawerContentHide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.5;
  }
}