/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './token.less';

@msg-prefix-cls: ~'@{kd-prefix}-message';

.@{msg-prefix-cls}-box {
  position: fixed;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: @message-z-index;
}

.@{msg-prefix-cls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: @message-sizing-min-width;
  max-width: @message-sizing-max-width;
  margin: 0 auto @message-spacing-margin-bottom;
  padding: @message-spacing-padding-horizontal @message-spacing-padding-vertical;
  color: @message-info-text-color;
  border: 1px solid @message-info-color-border;
  border-radius: @message-border-radius;
  background-color: @message-info-color-background;
  pointer-events: all;
  animation: kdNoticeEffect calc(@transition-duration - 0.2s) @ease-out forwards;

  &-content {
    display: flex;
    justify-content: space-between;
    font-size: @message-font-size;
    line-height: @messgae-line-height;

    &-main {
      display: flex;
    }

    &-icon-wrapper {
      font-size: @message-icon-font-size;
      margin-right: @message-icon-spacing-margin-right;
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
    }

    &-text {
      max-height: @message-text-sizing-max-height;
      overflow: auto;
    }

    &-close {
      cursor: pointer;
      color: @message-close-color-text;
      font-size: @message-close-font-size;
      margin-left: @message-close-spacing-margin-left;
      display: inline-flex;

      &:hover {
        color: @message-icon-text-color-hover;
      }
    }
  }

  &-success {
    color: @message-success-text-color;
    background: @message-success-color-background;
    border: 1px solid @message-success-color-border;
  }

  &-warning {
    color: @message-warning-text-color;
    background: @message-warning-color-background;
    border: 1px solid @message-warning-color-border;
  }

  &-error {
    color: @message-error-text-color;
    background: @message-error-color-background;
    border: 1px solid @message-error-color-border;
  }

  &-leave {
    animation: kdNoticeLeaveEffect calc(@transition-duration - 0.2s) @ease-out forwards;
  }

  &-leave-after {
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: all calc(@transition-duration - 0.2s) @ease-out;

    &.@{msg-prefix-cls}-success,
    &.@{msg-prefix-cls}-warning,
    &.@{msg-prefix-cls}-error {
      transition: all calc(@transition-duration - 0.2s) @ease-out;
      border: none;
    }

    & div,
    & i {
      transition: all calc(@transition-duration - 0.2s) @ease-out;
      height: 0;
      font-size: 0;
    }
  }
}
.@{msg-prefix-cls}-rtl {
  direction: rtl;
  &.@{msg-prefix-cls}-content {
    .@{msg-prefix-cls}-content-close {
      margin-left: 0;
      margin-right: @message-close-spacing-margin-left;
    }
    .@{msg-prefix-cls}-content-icon-wrapper {
        margin-right: 0;
        margin-left: @message-icon-spacing-margin-right;
        align-self: flex-end;
      }
  }
}
/*! rtl:end:ignore */