@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';

$sizes: small, medium, large;

.#{$hashClassName}.cn-ui-m-modal {
  /*
  @desc motion-ease-in-out-back
  @group motion.type
  @semantic 动画时间
  */
  $-motion-type-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /*
  @desc motion-2
  @group motion.time
  @semantic 动画时间
  */
  $-motion-time-2: 0.25s;
  /*
  @desc motion-ease-in-out-back
  @group motion.type
  @semantic 动画时间
  */
  $-motion-type-ease-in-out: ease-in-out;
  /*
  @desc motion-ease
  @group motion.type
  @semantic 动画时间
  */
  $-motion-type-ease: ease;
  /*
  @desc motion-1
  @group motion.time
  @semantic 动画时间
  */
  $-motion-time-1: 0.1s;
  /*
  @desc black
  @semantic 纯黑色
  @category default
  @unconfigurable
  */
  $-color-black: #000;
  /*
  @desc mask-bg-opacity
  @semantic 遮罩透明度
  @namespace style/common
  @type float
  */
  $-modal-mask-bg-opacity: 0.6;
  /*
  @semantic 为了隐藏做的偏移量
  */
  $-hidden-offset: calc(#{$m-s-100} * 8);
  position: fixed;
  z-index: $cn-modal-z-index;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: row;

  &--center {
    justify-content: center;
    align-items: center;
  }

  &--top {
    justify-content: center;
    align-items: flex-start;
  }

  &--bottom {
    justify-content: center;
    align-items: flex-end;
  }

  &--left {
    justify-content: flex-start;
    align-items: center;
  }

  &--right {
    justify-content: flex-end;
    align-items: center;
  }

  .cn-ui-m-modal {
    &-theme-wrapper {
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    &--no-portal {
      position: absolute;
    }
    &-container {
      // background-color: $m-color-bg-white;
      position: relative;

      &--center {
        // center 时定制关闭动画
        transition-timing-function: $-motion-type-ease-in-out-back;
      }

      &--top {
        width: 100%;
      }

      &--bottom {
        width: 100%;
      }

      &--left {
        height: 100%;
      }

      &--right {
        height: 100%;
      }
    }

    &--hidden {
      right: $-hidden-offset;
      left: auto;
    }

    &-mask {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      touch-action: none;
      background-color: rgba(0, 0, 0, 0.55);
    }
  }
}