@use "../../style/index" as mixins;
$prefix: "adui-dialog";

.#{$prefix} {
  &-wrapper,
  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &-mask {
    will-change: opacity;
    background-color: rgba(0, 0, 0, 0.65);
  }
  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px;
    overflow: auto;
    outline: none;
  }
  &-inner {
    flex: none;
    display: flex;
    flex-direction: column;
    margin: 36px auto;
    min-width: 420px;
    min-height: 280px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow-elevation-4);
  }
  &-header {
    flex: none;
    position: relative;
    padding: 20px 24px 16px;
    min-height: 64px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
  }
  &-headerContent {
    margin-top: 8px;
  }
  &-title {
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-900);
    font-weight: 600;
  }
  &-body {
    padding: 24px;
    flex: 1;
    @include mixins.overlay();
  }
  &-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06) inset;

    button {
      min-width: 72px;

      &:not(:last-of-type) {
        &:not(:only-child) {
          margin-right: 16px;
        }
      }
    }
  }
  &-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  &-intentWrapper {
    display: flex;
    justify-content: center;
    padding: 8px 40px 34px;
  }
  &-intentWrapper_center {
    align-items: center;
  }
  &-intentIcon {
    flex: none;
    margin-right: 16px;
  }
  &-success {
    .#{$prefix}-intentIcon {
      fill: var(--ad-green);
    }
  }
  &-info {
    .#{$prefix}-intentIcon {
      fill: var(--ad-blue);
    }
  }
  &-warning {
    .#{$prefix}-intentIcon {
      fill: var(--ad-orange);
    }
  }
  &-danger {
    .#{$prefix}-intentIcon {
      fill: var(--ad-red);
    }
  }
  &-intentTitle {
    font-size: 16px;
    line-height: 26px;
    color: #1f1f1f;
    font-weight: 600;
  }
  &-intentText {
    margin-top: 2px;
    font-size: 13px;
    line-height: 20px;
    color: #636363;
  }

  &-appear,
  &-enter {
    opacity: 0;
    transform: scale(0.9) translate3d(0, 20px, 0);
  }

  &-appear.#{$prefix}-appear-active,
  &-enter.#{$prefix}-enter-active {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    transition: var(--adui-motion-duration-base) var(--adui-motion-ease-base)
      all;
  }

  &-leave {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }

  &-leave.#{$prefix}-leave-active {
    opacity: 0;
    transform: scale(0.8) translate3d(0, 20px, 0);
    transition: all var(--adui-motion-duration-base)
      var(--adui-motion-ease-base);
  }

  &-mask-appear,
  &-mask-enter {
    opacity: 0;
  }

  &-mask-appear.#{$prefix}-mask-appear-active,
  &-mask-enter.#{$prefix}-mask-enter-active {
    opacity: 1;
    transition: all var(--adui-motion-duration-base)
      var(--adui-motion-ease-base);
  }

  &-mask-leave {
    opacity: 1;
  }

  &-mask-leave.#{$prefix}-mask-leave-active {
    opacity: 0;
    transition: all var(--adui-motion-duration-base)
      var(--adui-motion-ease-base);
  }
}