@use '../helpers/baseMixin.scss';

html[data-vxe-lock-scroll] {
  overflow: hidden;
  body {
    overflow: hidden;
    width: var(--vxe-ui-modal-lock-scroll-view-width);
  }
}

.vxe-modal--box {
  visibility: hidden;
  width: 420px;
  background-color: var(--vxe-ui-layout-background-color);
  border-radius: var(--vxe-ui-base-border-radius);
  border: 1px solid var(--vxe-ui-base-popup-border-color);
  text-align: left;
  pointer-events: auto;
  opacity: 0;
  outline: 0;
  &.is--drag {
    cursor: move;
   .vxe-modal--body,
   .vxe-modal--footer {
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .vxe-modal--body {
      overflow: hidden;
      .vxe-modal--content {
        overflow: hidden;
      }
    }
  }
}
.vxe-modal--aside {
  flex-shrink: 0;
  overflow: auto;
}
.vxe-modal--container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
.vxe-modal--status-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 1.6em;
}
.vxe-modal--content {
  flex-grow: 1;
  white-space: pre-line;
}
.vxe-modal--header,
.vxe-modal--body,
.vxe-modal--footer {
  position: relative;
}
.vxe-modal--body {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  outline: 0;
}
.vxe-modal--body-left,
.vxe-modal--body-right {
  flex-shrink: 0;
  overflow: auto;
  outline: 0;
}
.vxe-modal--body-default {
  display: flex;
  flex-grow: 1;
  overflow: auto;
  outline: 0;
}
.vxe-modal--header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 2.8em;
  flex-shrink: 0;
  font-size: 1.1em;
  font-weight: 700;
  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
  user-select: none;
  &.is--ellipsis {
    .vxe-modal--header-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.vxe-modal--footer-wrapper {
  display: flex;
  flex-direction: row;
  .vxe-modal--footer-left {
    flex-grow: 1;
    text-align: left
  }
  .vxe-modal--footer-right {
    flex-shrink: 0;
  }
}
.vxe-modal--header-title {
  flex-grow: 1;
  padding: 0.8em 0 0.8em 0.6em;
}
.vxe-modal--header-right {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  padding: 0 0.6em 0 0;
}
.vxe-modal--zoom-btn,
.vxe-modal--close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-left: 0.5em;
  cursor: pointer;
  &:hover {
    color: var(--vxe-ui-font-primary-color);
  }
}
.vxe-modal--footer {
  flex-shrink: 0;
  text-align: right;
  padding: 0.4em 1em 0.8em 1em;
}
.vxe-modal--resize {
  $SpaceSize: 8px;
  $SpaceWidth: 5px;
  .wl-resize,
  .wr-resize,
  .swst-resize,
  .sest-resize,
  .st-resize,
  .swlb-resize,
  .selb-resize,
  .sb-resize {
    position: absolute;
    z-index: 100;
  }
  .wl-resize,
  .wr-resize {
    width: $SpaceSize;
    height: 100%;
    top: 0;
    cursor: w-resize;
  }
  .wl-resize {
    left: -$SpaceWidth;
  }
  .wr-resize {
    right: -$SpaceWidth;
  }
  .swst-resize,
  .sest-resize,
  .swlb-resize,
  .selb-resize {
    width: $SpaceSize + 2;
    height: $SpaceSize + 2;
    z-index: 101;
  }
  .swst-resize,
  .sest-resize {
    top: -$SpaceSize;
  }
  .swlb-resize,
  .selb-resize {
    bottom: -$SpaceSize;
  }
  .sest-resize,
  .swlb-resize {
    cursor: sw-resize;
  }
  .swst-resize,
  .selb-resize {
    cursor: se-resize;
  }
  .swst-resize,
  .swlb-resize {
    left: -$SpaceSize;
  }
  .sest-resize,
  .selb-resize {
    right: -$SpaceSize;
  }
  .st-resize,
  .sb-resize {
    width: 100%;
    height: $SpaceSize;
    left: 0;
    cursor: s-resize;
  }
  .st-resize {
    top: -$SpaceWidth;
  }
  .sb-resize {
    bottom: -$SpaceWidth;
  }
}

.vxe-modal--wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  line-height: 1.5;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  color: var(--vxe-ui-font-color);
  font-family: var(--vxe-ui-font-family);
  outline: 0;
  &.is--active {
    display: block;
  }
  &.is--visible {
    &.is--mask {
      &:before {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
    .vxe-modal--box {
      opacity: 1;
      visibility: visible;
    }
  }
  &:not(.lock--view) {
    pointer-events: none;
  }
  &.is--draggable {
    &.zoom--revert,
    &.zoom--minimize {
      .vxe-modal--header-title {
        cursor: move;
      }
    }
  }
  &.zoom--minimize,
  &.zoom--maximize {
    & > .vxe-modal--box {
      & > .vxe-modal--container {
        & > .vxe-modal--resize {
          .wl-resize,
          .wr-resize,
          .swst-resize,
          .sest-resize,
          .st-resize,
          .swlb-resize,
          .selb-resize,
          .sb-resize {
            display: none;
          }
        }
      }
    }
  }
  &.zoom--maximize {
    & > .vxe-modal--box {
      border-radius: 0;
      & > .vxe-modal--container {
        & > .vxe-modal--header {
          border-radius: 0;
          cursor: default;
        }
      }
    }
  }
  &.zoom--minimize {
    & > .vxe-modal--box {
      & > .vxe-modal--container {
        & > .vxe-modal--body,
        & > .vxe-modal--footer {
          display: none;
        }
      }
    }
  }
  &.type--modal,
  &.type--alert,
  &.type--confirm {
    &.lock--scroll {
      overflow: hidden;
    }
    &:not(.lock--scroll) {
      overflow: auto;
    }
  }
  &.lock--view,
  &.is--mask {
    &:before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: auto;
    }
  }
  &.is--mask {
    &:before {
      background-color: rgba(0, 0, 0, 0);
    }
  }
  &.is--animat {
    &.is--mask {
      &:before {
        @include baseMixin.createAnimationTransition(background-color, .2s);
      }
    }
  }
  &.type--message,
  &.type--notification,
  &.type--alert,
  &.type--confirm {
    .vxe-modal--body {
      white-space: normal;
      word-break: break-word;
    }
  }
  &.type--message {
    .vxe-modal--box {
      opacity: 0;
      transform: translate(0, -100%);
    }
    &.is--visible {
      .vxe-modal--box {
        opacity: 1;
        transform: translate(0, 0);
      }
    }
  }
  &.type--notification {
    &.pos--top-right {
      .vxe-modal--box {
        opacity: 0;
        transform: translate(100%, 0);
      }
      &.is--visible {
        .vxe-modal--box {
          opacity: 1;
          transform: translate(0, 0);
        }
      }
    }
  }
  &.type--message,
  &.type--notification {
    width: 100%;
    height: 100%;
    padding: 0 var(--vxe-ui-layout-padding-double);
    text-align: center;
    transition: top .3s ease-in-out;
    &.pos--top-left {
      text-align: left;
    }
    &.pos--top-right {
      text-align: right;
    }
    .vxe-modal--box {
      display: inline-flex;
      flex-direction: row;
      margin-top: 0;
      width: auto;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
      @include baseMixin.createAnimationTransition(all, .3s, ease-out);
      .vxe-modal--body {
        &:after {
          content: '';
          display: block;
          clear: both;
          height: 0;
          overflow: hidden;
          visibility: hidden;
        }
      }
      .vxe-modal--content {
        max-width: 800px;
        float: left;
      }
    }
  }
  &.type--modal,
  &.type--alert,
  &.type--confirm {
    .vxe-modal--box {
      display: flex;
      flex-direction: row;
      position: fixed;
      left: 50%;
      top: 0;
      box-shadow: var(--vxe-ui-base-popup-box-shadow);
    }
    .vxe-modal--header {
      border-bottom: 1px solid var(--vxe-ui-input-border-color);
      background-color: var(--vxe-ui-modal-header-background-color);
    }
    .vxe-modal--body {
      overflow: auto;
      .vxe-modal--content {
        overflow: auto;
      }
    }
  }

  &.status--info {
    .vxe-modal--status-wrapper {
      color: var(--vxe-ui-status-info-color);
    }
  }
  &.status--warning,
  &.status--question {
    .vxe-modal--status-wrapper {
      color: var(--vxe-ui-status-warning-color);
    }
  }
  &.status--success {
    .vxe-modal--status-wrapper {
      color: var(--vxe-ui-status-success-color);
    }
  }
  &.status--error {
    .vxe-modal--status-wrapper {
      color: var(--vxe-ui-status-danger-color);
    }
  }
  &.status--loading {
    .vxe-modal--status-wrapper {
      color: var(--vxe-ui-font-disabled-color);
    }
  }
  &.is--padding {
    .vxe-modal--aside {
      padding: 0.8em 0.6em;
    }
    .vxe-modal--body-default {
      padding: 0.8em 0.6em;
      .vxe-modal--status-wrapper {
        padding-right: 0.6em;
      }
    }
    &.type--notification {
      .vxe-modal--body-default {
        padding-top: 0;
      }
    }
  }
  &.type--message {
    .vxe-modal--body-default {
      padding-right: 1.2em;
    }
  }
}

.vxe-modal--wrapper {
  font-size: var(--vxe-ui-font-size-default);
  &.size--medium {
    font-size: var(--vxe-ui-font-size-medium);
  }
  &.size--small {
    font-size: var(--vxe-ui-font-size-small);
  }
  &.size--mini {
    font-size: var(--vxe-ui-font-size-mini);
  }
}