@import "../../../styles/common.scss";
@import "./var.scss";

@include b(popup) {
  @include e(overlay) {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    visibility: hidden;
    opacity: 1;
    background-color: $popup-overlay-color;
    transition: opacity 1s ease-in;
    z-index: $popup-z-index;
    // 处理点击穿透问题
    pointer-events: auto;

    @include when(shown) {
      visibility: visible;
    }
  }

  @include e(container) {
    position: fixed;
    left: 0;
    right: 0;
    z-index: $popup-z-index;
    visibility: hidden;
    transition: all 300ms ease;
    overflow: hidden;
    @include when(shown) {
      visibility: visible;
    }

    &.top {
      top: 0;
      transform: translateY(-100%);
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      @include when(expanded) {
        transform: translateY(0);
      }
    }

    &.center {
      top: 50%;
      border-radius: $popup-center-container-border-radius;
      transform: translateY(-50%) scale(0.75);
      opacity: 0;
      border-radius: 10px;
      &.is-expanded {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }
    }

    &.bottom {
      bottom: 0;

      transform: translateY(100%);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      &.is-expanded {
        transform: translateY(0);
      }
    }
  }
}

body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}