$popup-border-radius: 16px !default;

.mx {
  &-popup {
    position: fixed;
    overflow: hidden;

    &--left {
      top: 0;
      bottom: 0;
      left: 0;

      &.mx-popup--round {
        border-top-right-radius: $popup-border-radius;
        border-bottom-right-radius: $popup-border-radius;
      }
    }

    &--right {
      top: 0;
      bottom: 0;
      right: 0;

      &.mx-popup--round {
        border-top-left-radius: $popup-border-radius;
        border-bottom-left-radius: $popup-border-radius;
      }
    }

    &--top {
      left: 0;
      right: 0;
      top: 0;

      &.mx-popup--round {
        border-bottom-left-radius: $popup-border-radius;
        border-bottom-right-radius: $popup-border-radius;
      }
    }

    &--bottom {
      left: 0;
      right: 0;
      bottom: 0;

      &.mx-popup--round {
        border-top-left-radius: $popup-border-radius;
        border-top-right-radius: $popup-border-radius;
      }
    }

    &--center {
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);

      opacity: 1;

      &.mx-popup--round {
        border-radius: $popup-border-radius;
      }
    }

    &--safe-area-inset-bottom {
      @include safe-area-inset-bottom();
    }

    &-slide-left-enter,
    &-slide-left-leave-to {
      transform: translateX(-100%);
    }

    &-slide-right-enter,
    &-slide-right-leave-to {
      transform: translateX(100%);
    }

    &-slide-top-enter,
    &-slide-top-leave-to {
      transform: translateY(-100%);
    }

    &-slide-bottom-enter,
    &-slide-bottom-leave-to {
      transform: translateY(100%);
    }

    &-slide-left-enter-active,
    &-slide-left-leave-active,
    &-slide-right-enter-active,
    &-slide-right-leave-active,
    &-slide-top-enter-active,
    &-slide-top-leave-active,
    &-slide-bottom-enter-active,
    &-slide-bottom-leave-active {
      transition: transform $duration $time-function;
    }

    &-slide-center-enter-active {
      animation-name: mx-fade-in;
      animation-duration: $duration;
      animation-timing-function: $time-function;
      animation-fill-mode: both;
    }

    &-slide-center-leave-active {
      animation-name: mx-fade-out;
      animation-duration: $duration;
      animation-timing-function: $time-function;
      animation-direction: normal;
      animation-fill-mode: both;
    }
  }
}