@import '~antd/es/notification/style/index.less';
@import '../variable.less';

@notification-prefix-cls: ~'@{ant-prefix}-notification';

.@{notification-prefix-cls} {
  &-notice {
    // border
    &::after {
      content: '';
      width: 3px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    &&-success::after {
      background-color: @success-color;
    }

    &&-error::after {
      background-color: @error-color;
    }

    &&-warning::after {
      background-color: @warning-color;
    }

    &&-info::after {
      background-color: @info-color;
    }

    &-icon {
      margin-left: 0;
      font-size: @notification-icon-size;
      line-height: @notification-icon-size;

      .@{iconfont-css-prefix} {
        font-size: @notification-icon-size;
      }
    }

    &-close {
      top: @notification-padding-vertical;
      right: @notification-padding-horizontal;
    }

    &-message {
      font-family: @font-family-bold;
      font-weight: @font-weight-bold;
      font-size: @font-size-lg;
      line-height: @line-height-lg;
    }

    &-description {
      color: @notification-description-color;
    }

    &-with-icon &-message {
      margin-bottom: @notification-message-margin-bottom;
      margin-left: @notification-icon-size + @notification-icon-margin-right;
    }

    &-with-icon &-description {
      margin-left: @notification-icon-size + @notification-icon-margin-right;
    }
  }
}