@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-popup-background: var(--xzx-color-white);
  --xzx-popup-transition: transform var(--xzx-duration-base);
  --xzx-popup-round-radius: var(--xzx-br-lg);
  --xzx-popup-close-icon-size: var(--xzx-text-md);
  --xzx-popup-close-icon-color: var(--xzx-text-color);
  --xzx-popup-close-icon-margin: 16px;
  --xzx-popup-close-icon-z-index: 1;
}

@include b(overflow-hidden) {
  overflow: hidden !important;
}

@include b(popup) {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--xzx-popup-background);
  transition: var(--xzx-popup-transition);
  -webkit-overflow-scrolling: touch;

  &--center {
    top: 50%;
    left: 0;
    right: 0;
    width: fit-content;
    max-width: calc(100vw - var(--xzx-padding-md) * 2);
    margin: 0 auto;
    transform: translateY(-50%);

    &.xzx-popup--round {
      border-radius: var(--xzx-popup-round-radius);
    }
  }

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

    &.xzx-popup--round {
      border-radius: 0 0 var(--xzx-popup-round-radius)
        var(--xzx-popup-round-radius);
    }
  }

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

    &.xzx-popup--round {
      border-radius: var(--xzx-popup-round-radius) 0 0
        var(--xzx-popup-round-radius);
    }
  }

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

    &.xzx-popup--round {
      border-radius: var(--xzx-popup-round-radius) var(--xzx-popup-round-radius)
        0 0;
    }
  }

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

    &.xzx-popup--round {
      border-radius: 0 var(--xzx-popup-round-radius)
        var(--xzx-popup-round-radius) 0;
    }
  }

  &-slide-top-enter-active,
  &-slide-left-enter-active,
  &-slide-right-enter-active,
  &-slide-bottom-enter-active {
    transition-timing-function: var(--xzx-ease-out);
  }

  &-slide-top-leave-active,
  &-slide-left-leave-active,
  &-slide-right-leave-active,
  &-slide-bottom-leave-active {
    transition-timing-function: var(--xzx-ease-in);
  }

  &-slide-top-enter-from,
  &-slide-top-leave-active {
    transform: translate3d(0, -100%, 0);
  }

  &-slide-right-enter-from,
  &-slide-right-leave-active {
    transform: translate3d(100%, -50%, 0);
  }

  &-slide-bottom-enter-from,
  &-slide-bottom-leave-active {
    transform: translate3d(0, 100%, 0);
  }

  &-slide-left-enter-from,
  &-slide-left-leave-active {
    transform: translate3d(-100%, -50%, 0);
  }

  &__close-icon {
    position: absolute;
    z-index: var(--xzx-popup-close-icon-z-index);
    color: var(--xzx-popup-close-icon-color);
    font-size: var(--xzx-popup-close-icon-size);

    &--top-left {
      top: var(--xzx-popup-close-icon-margin);
      left: var(--xzx-popup-close-icon-margin);
    }

    &--top-right {
      top: var(--xzx-popup-close-icon-margin);
      right: var(--xzx-popup-close-icon-margin);
    }

    &--bottom-left {
      bottom: var(--xzx-popup-close-icon-margin);
      left: var(--xzx-popup-close-icon-margin);
    }

    &--bottom-right {
      right: var(--xzx-popup-close-icon-margin);
      bottom: var(--xzx-popup-close-icon-margin);
    }
  }
}