@charset "UTF-8";
/*
  @component modal
  @display Modal
  @chinese 模态框
  @family feedback
*/
:root {
  /*
    @desc motion-time
    @semantic 动画市场
    @unconfigurable
  */
  --modal-duration: var(--motion-time-2);
  /*
    @desc motion-in
    @semantic 常规进入动画
    @unconfigurable
  */
  --modal-motion-in: var(--motion-type-ease-in-out);
  /*
    @desc motion-out
    @semantic 常规退出动画
    @unconfigurable
  */
  --modal-motion-out: var(--motion-type-ease-in-out);
  /*
    @desc center-motion-in
    @semantic 居中退出动画
    @unconfigurable
  */
  --modal-center-motion-in: var(--motion-type-ease-in-out-back);
  /*
    @desc center-motion-out
    @semantic 居中退出动画
    @unconfigurable
  */
  --modal-center-motion-out: var(--motion-type-ease-in-out-back);
  /*
    @desc z-index
    @semantic 层级
    @unconfigurable
  */
  --modal-elevation: var(--elevation-3);
  /*
    @desc content-bg-color
    @semantic 内容区背景色
    @namespace statement/normal
  */
  --modal-container-bg-color: var(--color-white);
  /*
    @desc mask-bg-color
    @semantic 遮罩背景色
    @namespace statement/normal
  */
  --modal-mask-bg-color: rgba(0, 0, 0, 0.5); }

.mt-modal {
  position: fixed;
  z-index: var(--modal-elevation);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: row; }
  .mt-modal-theme-wrapper {
    position: relative;
    width: 375px;
    height: 568px; }
  .mt-modal--no-portal {
    position: absolute; }
  .mt-modal--center {
    justify-content: center;
    align-items: center; }
  .mt-modal--top {
    justify-content: center;
    align-items: flex-start; }
  .mt-modal--bottom {
    justify-content: center;
    align-items: flex-end; }
  .mt-modal--left {
    justify-content: flex-start;
    align-items: center; }
  .mt-modal--right {
    justify-content: flex-end;
    align-items: center; }
  .mt-modal-container {
    background-color: var(--modal-container-bg-color);
    transition: all var(--modal-duration) var(--modal-motion-out);
    position: relative; }
    .mt-modal-container--center {
      transition-timing-function: var(--modal-center-motion-out); }
      .mt-modal-container--center-active {
        animation: mt-mask-center-entering var(--modal-duration) var(--modal-center-motion-in);
        opacity: 1; }
      .mt-modal-container--center-inactive {
        transform: scale(0);
        opacity: 0; }
    .mt-modal-container--top {
      width: 100%; }
      .mt-modal-container--top-active {
        animation: mt-mask-top-entering var(--modal-duration) var(--modal-motion-in); }
      .mt-modal-container--top-inactive {
        transform: translate(0, -100%); }
    .mt-modal-container--bottom {
      width: 100%; }
      .mt-modal-container--bottom-active {
        animation: mt-mask-bottom-entering var(--modal-duration) var(--modal-motion-in); }
      .mt-modal-container--bottom-inactive {
        transform: translate(0, 100%); }
    .mt-modal-container--left {
      height: 100%; }
      .mt-modal-container--left-active {
        animation: mt-mask-left-entering var(--modal-duration) var(--modal-motion-in); }
      .mt-modal-container--left-inactive {
        transform: translate(-100%, 0); }
    .mt-modal-container--right {
      height: 100%; }
      .mt-modal-container--right-active {
        animation: mt-mask-right-entering var(--modal-duration) var(--modal-motion-in); }
      .mt-modal-container--right-inactive {
        transform: translate(100%, 0); }
  .mt-modal--hidden {
    right: 106.66666666666667vw;
    left: auto; }
  .mt-modal-mask {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: background-color var(--modal-duration) var(--motion-type-ease);
    touch-action: none; }
    .mt-modal-mask--active {
      animation: mt-mask-entering var(--modal-duration) var(--motion-type-ease);
      background-color: var(--modal-mask-bg-color); }
    .mt-modal-mask--inactive {
      background-color: none; }

@keyframes mt-mask-center-entering {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes mt-mask-top-entering {
  0% {
    transform: translate(0, -100%); }
  100% {
    transform: translate(0, 0); } }

@keyframes mt-mask-bottom-entering {
  0% {
    transform: translate(0, 100%); }
  100% {
    transform: translate(0, 0); } }

@keyframes mt-mask-left-entering {
  0% {
    transform: translate(-100%, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes mt-mask-right-entering {
  0% {
    transform: translate(100%, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes mt-mask-entering {
  0% {
    background: none; }
  100% {
    background: rgba(0, 0, 0, 0.5); } }
