$tray-size: 420px;

.ui-tray {
  overflow: hidden;

  pointer-events: none;

  &--negative-margin {
    margin-top: -200px;
  }

  &__backdrop {
    z-index: 1;

    background: rgba(ui-color(paper-ink-dark), 0.2);
    opacity: 0;

    transition: opacity $ui-duration-medium ease;

    pointer-events: none;
  }

  &__container {
    position: absolute;
    z-index: 2;

    overflow: hidden;

    background: ui-color(charcoal-ink-lightest);

    pointer-events: none;

    &--position-right {
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;

      width: $tray-size;
      height: 100%;

      transform: translate3d(100%, 0, 0);
    }

    &--position-left {
      top: 0;
      right: auto;
      bottom: 0;
      left: 0;

      width: $tray-size;
      height: 100%;

      transform: translate3d(-100%, 0, 0);
    }

    &--position-top {
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;

      height: $tray-size * 0.5;

      transform: translate3d(0, -100%, 0);
    }

    &--position-bottom {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;

      height: $tray-size * 0.5;

      transform: translate3d(0, 100%, 0);
    }

    &--position-center {
      top: 50%;
      left: 50%;

      width: calc(100% - 60px);
      max-width: 500px;
      overflow: scroll;

      transform: translate3d(-50%, -50%, 0) scale(0.95);
      opacity: 0;
    }
  }

  @include ui-to($ui-bp-tablet) {
    &--negative-margin {
      margin-top: 0;
      margin-left: -130%;
    }
    &__container {
      &--position-left,
      &--position-right {
        width: calc(100% - 30px);
      }
    }
  }

  &__content {
    height: 100%;
    overflow: auto;
  }

  &--open {
    z-index: 9999;

    visibility: visible;

    opacity: 1;

    pointer-events: all;

    .ui-tray__backdrop {
      opacity: 1;

      pointer-events: all;
    }

    .ui-tray__container {
      display: block;

      transform: translate3d(0, 0, 0);

      pointer-events: all;

      &--position-center {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1;
      }
    }
  }

  &__close.ui-scale {
    transform-origin: top right;
  }
}