@notification-prefix: ~'@{icecream-prefix}-notification';

@notification-height: 52px;
@notification-font-size: @icecream-font-size-main;
@notification-text-height: getIcecreamLineHeightByPx(@notification-font-size);
@notification-padding-vertical: round((@notification-height - @notification-text-height) / 2);
// 加上 svg 宽度防止内容被 svg 覆盖
@notification-padding-hori: @icecream-gap-md + @notification-font-size;

.@{notification-prefix} {
  .extendBase();
  .attachBaseline();
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: @notification-padding-vertical @notification-padding-hori;
  color: @icecream-color-grey-10;
  font-size: @icecream-font-size-main;
  background: @icecream-color-grey-3;

  &-icon {
    margin-right: @icecream-gap-xs;
    padding-top: (@notification-text-height - @notification-font-size) / 2;
    line-height: 0;
  }

  &-close {
    position: absolute;
    top: @notification-padding-vertical;
    right: @icecream-gap-md;
    display: flex;
    align-items: center;
    height: getIcecreamLineHeightByPx(@notification-font-size);
    color: @icecream-color-grey-7;
    cursor: pointer;

    &:hover {
      color: @icecream-color-grey-8;
    }
  }

  &&-info {
    color: @icecream-primary-color;
    background: #e5f6fc;
  }

  &&-success {
    color: @icecream-success-color;
    background: #edf9e7;
  }

  &&-error {
    color: @icecream-error-color;
    background: #fdecec;
  }

  &&-warning {
    color: @icecream-warning-color;
    background: #fef3e7;
  }

  .attachBaseline() {
    a:not(.@{link-prefix}) {
      .setAnchorBaseline();
    }

    &&-info {
      a:not(.@{link-prefix}) {
        text-decoration: underline;
      }
    }
  }
}