/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/overlay';
@import './mixin.less';
@modal-prefix-cls: ~'@{kd-prefix}-modal';

@confirm: confirm;
@warning: warning;
@error: error;

@modal-bg-type-set: {
  @confirm: @modal-color-ongoing;
  @warning: @modal-color-warning;
  @error: @modal-color-error;
};

@modal-footer-type-set: {
  @confirm: space-around;
  @warning: normal;
  @error: normal;
};

.@{modal-prefix-cls} {
  &-container {
    position: relative;
    z-index: @modal-z-index-dialog;

    &-ie {
      position: absolute;
    }

    &-show {
      animation: kdModalEffect calc(@transition-duration - 0.1s) @ease both;
    }

    &-hidden {
      display: none;
    }
  }
  &-mask {
    .overlay(@modal-mask-color-background, 0);
  }

  &-has-container-box {
    position: fixed;
    left: 50%;
    top: 50%;
  }
  &-container-box {
    display: flex;
    width: 460px;
    height: 340px;
    flex-direction: column;
    background: #ffffff;
    box-shadow: @modal-shadow;
    border-radius: @modal-radius;
    outline: none;
    .@{modal-prefix-cls}-header {
      display: flex;
      justify-content: space-between;
      padding: @modal-header-sizing-padding-vertical @modal-header-sizing-padding-horizontal;
      align-items: center;
      height: @modal-header-sizing-height;
      flex-shrink: 0;
      .@{modal-prefix-cls}-title-container {
        display: flex;
        justify-content: center;
        align-items: center;
        .@{modal-prefix-cls}-title-icon {
          .modal-title-icon-type(@icon-circle-radiu);
          margin-right: @modal-title-icon-sizing-margin-right;
        }
        each(@modal-bg-type-set, {
          .modal-title-icon-bgcolor-type(@key, @value)
        });
        .@{modal-prefix-cls}-title {
          min-width: 72px;
          min-height: 27px;
          font-size: @modal-title-font-size;
          color: @modal-title-font-color;
          line-height: 27px;
        }
        &:active {
          cursor: auto;
        }
      }
      .@{modal-prefix-cls}-close-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: @modal-close-icon-size;
        color: @modal-close-icon-color-text;
        cursor: pointer;
        &:hover {
          color: @modal-theme-color-hover;
        }
        &:active {
          color: @modal-theme-color-active;
        }
      }
      &:active {
        cursor: move;
      }
    }

    .@{modal-prefix-cls}-body {
      display: block;
      flex-grow: 1;
      padding: @modal-body-sizing-padding;
      font-size: @modal-body-font-size;
      color: @modal-body-font-color;
    }
    .@{modal-prefix-cls}-footer {
      height: @modal-footer-sizing-height;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: @modal-footer-font-size;
      color: @modal-footer-font-color;
      flex-shrink: 0;
    }

    .@{modal-prefix-cls}-resise {
      &-handle {
        position: absolute;
      }

      &-n {
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        cursor: ns-resize;
      }
      &-e {
        top: 0;
        right: 0;
        height: 100%;
        width: 6px;
        cursor: ew-resize;
      }
      &-s {
        bottom: 0;
        left: 0;
        height: 6px;
        width: 100%;
        cursor: ns-resize;
      }
      &-w {
        left: 0;
        top: 0;
        height: 100%;
        width: 6px;
        cursor: ew-resize;
      }
      &-ne {
        top: 0;
        right: 0;
        width: 6px;
        height: 6px;
        cursor: nesw-resize;
      }
      &-se {
        bottom: 0;
        right: 0;
        width: 6px;
        height: 6px;
        cursor: nwse-resize;
      }
      &-sw {
        bottom: 0;
        left: 0;
        width: 6px;
        height: 6px;
        cursor: nesw-resize;
      }
      &-nw {
        top: 0;
        left: 0;
        width: 6px;
        height: 6px;
        cursor: nwse-resize;
      }
    }
  }

  &-margin-btn {
    margin-right: @modal-footer-button-spacing;
  }

  &-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    text-align: center;

    &::before {
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
      content: '';
    }

    &-resizable {
      text-align: unset;
      &::before {
        height: 0;
      }
    }
  }
  &-dialog {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100vw);
  }
}

.@{modal-prefix-cls}-showline {
  .@{modal-prefix-cls}-header {
    border-bottom: @modal-border-width solid @modal-border-color;
  }
  .@{modal-prefix-cls}-footer {
    border-top: @modal-border-width solid @modal-border-color;
  }
}
.@{modal-prefix-cls}-rtl {
  direction: rtl;
  .@{modal-prefix-cls}-container-box {
    .@{modal-prefix-cls}-header {
      .@{modal-prefix-cls}-title-container {
        .@{modal-prefix-cls}-title-icon {
          margin-right: 0;
          margin-left: @modal-title-icon-sizing-margin-right;
        }
      }
    }
    .@{modal-prefix-cls}-footer {
      .@{modal-prefix-cls}-cancel-node {
        .@{modal-prefix-cls}-margin-btn {
          margin-left: @modal-footer-button-spacing;
          margin-right: 0;
        }
      }
    }
  }
  .@{modal-prefix-cls}-has-container-box {
    right: 50%;
    left: auto;
  }
}
/*! rtl:end:ignore */