// 这个文件里的公共样式，在其它微前端上 import 使用

// 为了使dialog不相互覆盖套娃，渲染到这个DOM 里的dialog 只显示最后一个， 规范未定，暂注释掉
#appstack-dialogs {
  &:empty {
    display: none;
  }
  &:after {
    content: ' ';
    display: block;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--no-var, rgba(0,0,0,.2));
    transition: opacity .3s cubic-bezier(.4,0,.2,1);
  }
  .next-overlay-backdrop {
    display: none;
  }
  .next-dialog {
    opacity: 0;
  }
  .next-overlay-wrapper:last-of-type {
    .next-dialog {
      opacity: 1;
    }
  }
}

// 公共class
.flex-center-row {
  display: flex;
  justify-content: center;
}
.flex-center-col {
  display: inline-flex;
  align-items: center;
}

.flex-center-col-hasDrop {
  @extend .flex-center-col;
  justify-content: space-between;
  width: 100%;

  &>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mr4 {
  margin-right: 4px;
}
.mr8 {
  margin-right: 8px;
}
.mr12 {
  margin-right: 12px;
}
.mr16 {
  margin-right: 16px;
}
.mr24 {
  margin-right: 24px;
}

.mb12 {
  margin-bottom: 12px;
}
.mb16 {
  margin-bottom: 16px;
}

.mt12 {
  margin-top: 12px;
}
.mt16 {
  margin-top: 16px;
}

.ml4 {
  margin-left: 4px;
}
.ml8 {
  margin-left: 8px;
}
.ml12 {
  margin-left: 12px;
}
.ml16 {
  margin-left: 16px;
}
.ml24 {
  margin-left: 24px;
}

// 表单右侧操作 button
.form-item-operation {
  float: right;
  margin-top: -32px;
  height: 32px;
  display: flex;
  align-items: center;
  .next-divider {
    margin-top: -2px;
  }
}