@import "../../variable.less";
@import "../../mixins/index.less";
@import "./var.less";

.@{--css-prefix}-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--popup-layout-zindex);
  width: 100%;
  height: 100%;
  visibility: hidden;

  &__mask {
    .mixin-overlay();
    opacity: 1;
    transition: opacity var(--popup-mask-timer) ease-in;
  }

  &__container {
    .flex-direction(column);
    position: fixed;
    bottom: -100%;
    width: 100%;
    min-height: var(--popup-height-min);
    max-height: var(--popup-height-max);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    background-color: var(--color-white);
    transition: all 0 ease-in;

    .popup-header {
      position: relative;
      width: 100%;
      height: var(--popup-header-height);
      padding: 0 var(--spacing-v-sm);
        

      &__title {
        height: 100%;
        line-height: var(--popup-header-height);
        text-align: center;
      }

      &-btn__close {
        position: absolute;
        top: 50%;
        right: var(--popup-header-position-right);
        width: var(--popup-header-close-width);
        height: var(--popup-header-close-width);
        line-height: var(--line-height-base);
        transform: translate(0, -50%);
    
        &::before, &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          display: inline-block;
          width: var(--popup-close-btn-width);
          height: 2px;
          border-radius: 1px;
          background: var(--popup-close-btn-color);
        }
    
        &::before {
          transform: translate3d(-50%, -50%, 0) rotate(45deg);
        }
    
        &::after {
          transform: translate3d(-50%, -50%, 0) rotate(-45deg);
        }
      }
    }

    .popup-main {
      flex: 1;
      width: 100%;
      height: 100%;
      padding: var(--spacing-v-sm);
      overflow-y: scroll;
    }
  }
}

.@{--css-prefix}-popup__active {
  visibility: visible;

  .@{--css-prefix}-popup__container__active {
    bottom: 0;
    transition: all var(--popup-contianer-timer) ease-in;
  }
}