@use "./variables" as *;

.#{$component-prefix}popup {
  position: fixed;
  z-index: $popup-z-index;
  max-height: 100%;
  overflow-y: auto;
  background: $popup-background-color;
  animation-duration: $popup-animation-duration;
  -webkit-overflow-scrolling: touch;

  &-overflow-hidden {
    overflow: hidden !important;
  }

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

    &.#{$component-prefix}popup--rounded {
      border-radius: $popup-rounded-border-radius;
    }
  }

  &--top {
    top: 0;
    left: 0;
    width: 100%;

    &.#{$component-prefix}popup--rounded {
      border-radius: 0 0 $popup-rounded-border-radius $popup-rounded-border-radius;
    }
  }

  &--bottom {
    bottom: 0;
    left: 0;
    width: 100%;

    &.#{$component-prefix}popup--rounded {
      border-radius: $popup-rounded-border-radius $popup-rounded-border-radius 0 0;
    }
  }

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

    &.#{$component-prefix}popup--rounded {
      border-radius: $popup-rounded-border-radius 0 0 $popup-rounded-border-radius;
    }

    &.#{$component-prefix}transition-slide-right {

      @keyframes #{$component-prefix}slide-right-enter {
        from {
          transform: translate3d(100%, -50%, 0);
        }
      }

      @keyframes #{$component-prefix}slide-right-exit {
        to {
          transform: translate3d(100%, -50%, 0);
        }
      }
    }
  }

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

    &.#{$component-prefix}popup--rounded {
      border-radius: 0 $popup-rounded-border-radius $popup-rounded-border-radius 0;
    }

    &.#{$component-prefix}transition-slide-left {

      @keyframes #{$component-prefix}slide-left-enter {
        from {
          transform: translate3d(-100%, -50%, 0);
        }
      }

      @keyframes #{$component-prefix}slide-left-exit {
        to {
          transform: translate3d(-100%, -50%, 0);
        }
      }
    }
  }

  &__close-icon {
    position: absolute;
    z-index: $popup-close-icon-z-index;
    color: $popup-close-icon-color;
    cursor: pointer;
    size: $popup-close-icon-size;

    &:active {
      color: $popup-close-icon-active-color;
    }

    &--top-left {
      top: $popup-close-icon-margin;
      left: $popup-close-icon-margin;
    }

    &--top-right {
      top: $popup-close-icon-margin;
      right: $popup-close-icon-margin;
    }

    &--bottom-left {
      bottom: $popup-close-icon-margin;
      left: $popup-close-icon-margin;
    }

    &--bottom-right {
      right: $popup-close-icon-margin;
      bottom: $popup-close-icon-margin;
    }
  }
}