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

@alert-prefix-cls: ~'@{kd-prefix}-alert';

@success: success;
@warning: warning;
@error: error;
@info: info;

.alert-bg-type-set() {
  @success: @alert-success-bg-color;
  @warning: @alert-warning-bg-color;
  @error: @alert-error-bg-color;
  @info: @alert-info-bg-color;
}

.alert-icon-type-set() {
  @success: @alert-success-icon-color;
  @warning: @alert-warning-icon-color;
  @error: @alert-error-icon-color;
  @info: @alert-info-icon-color;
}

.alert-border-type-set() {
  @success: @alert-success-border-color;
  @warning: @alert-warning-border-color;
  @error: @alert-error-border-color;
  @info: @alert-info-border-color;
}

@alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);

.icon-center {
  i {
    align-self: center;
  }
}

.@{alert-prefix-cls} {
  &-container {
    z-index: @z-index-apex;
    display: none;
    padding: @alert-padding-vertical @alert-padding-horizontal;
    align-items: center;
    transition: display 3s;
    border-radius: @alert-radius-border;
    border: 1px solid;
  }
  &-banner-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: @z-index-apex;
    width: 100%;
  }
  each(.alert-bg-type-set(), {
    .alert-bg-type(@key, @value);
  });
  each(.alert-border-type-set(), {
    .alert-border-type(@key, @value);
  });
  &-icon {
    display: flex;
    cursor: default;
    .icon-center();
    height: @alert-message-icon-font-size;
    margin-right: @alert-message-icon-margin-right;
    font-size: @alert-message-icon-font-size;
    each(.alert-icon-type-set(), {
      .alert-icon-type(@key, @value);
    });
  }
  &-message {
    color: @alert-message-color-text;
    font-size: @alert-message-font-size;
    line-height: 16px;
    display: flex;
    flex-grow: 1;
    cursor: default;
  }
  &-leave {
    transition: padding @duration-promptly @alert-transition-fn, opacity @duration-promptly @alert-transition-fn,
      margin @duration-promptly @alert-transition-fn, height @duration-promptly @alert-transition-fn,
      line-height @duration-promptly @alert-transition-fn;
    display: flex;
    padding: 0 @alert-padding-horizontal;
    border-width: 0;
    min-height: 0;
    margin: 0 !important;
    overflow: hidden;
    opacity: 0;

    .@{alert-prefix-cls}-icon,
    .@{alert-prefix-cls}-message,
    .@{alert-prefix-cls}-close-icon {
      height: 0;
      line-height: 0;
    }
  }
  &-close-icon {
    display: flex;
    height: @alert-message-icon-font-size;
    margin-left: @alert-close-icon-margin-left;
    color: @alert-close-icon-color;
    font-size: @alert-close-icon-font-size;
    cursor: pointer;
    &:hover {
      color: @alert-close-icon-color-hover;
    }
    &:active {
      color: @color-theme-click;
    }
    .icon-center();
  }
  &-visible {
    display: flex;
  }
  &-banner {
    position: fixed;
    animation: moveIn @duration-promptly @alert-transition-fn both;
  }
}
@keyframes moveIn {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
  }
}

.@{alert-prefix-cls}-rtl {
  direction: rtl;
  .@{alert-prefix-cls}-icon {
    margin-left: @alert-message-icon-margin-right;
    margin-right: 0;
  }
  .@{alert-prefix-cls}-close-icon {
    margin-right: @alert-close-icon-margin-left;
    margin-left: 0;
  }
}
/*! rtl:end:ignore */