.overlays {
  position: fixed;
  z-index: 10001;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(13, 24, 41, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out;

  &__overlay {
    background: $white;
    position: absolute;
    right: 0;
    max-width: 705px;
    width: 100%;
    height: 100%;
    overflow: auto;
    transform: translateX(100%);
    transition: transform 250ms ease-out;

    &::-webkit-scrollbar {
      display: none;
    }

    &.js-active {
      transform: translateX(0);
    }
  }

  &__items {
    overflow: hidden;
  }

  &__overlay-close {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: translateX(400px);
    transition: transform 250ms ease-out;
  }

  &.js-show {
    opacity: 1;
    pointer-events: all;

    .overlays__overlay-close {
      transform: translateX(0);
      transition-delay: 100ms;
    }
  }
}