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

@alert-height: 40px;
@alert-font-size: @icecream-font-size-main;
@alert-text-height: getIcecreamLineHeightByPx(@alert-font-size);
@alert-padding-vertical: round((@alert-height - @alert-text-height) / 2);

.@{alert-prefix} {
  .extendBase();
  .attachBaseline();
  display: flex;
  padding: @alert-padding-vertical @icecream-gap-md;
  color: @icecream-color-grey-10;
  font-size: @icecream-font-size-main;
  background: @icecream-color-grey-3;

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

  &-content {
    &-desc {
      margin-top: 2px;
      font-size: @icecream-font-size-sm;
    }
  }

  &-spacer {
    flex: 1;
  }

  &-close {
    // 让 icon 居中
    display: flex;
    align-items: center;
    height: @alert-text-height;
    color: @icecream-color-grey-7;
    cursor: pointer;

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

  // type: default 对应的 icon 颜色跟文字颜色不同，这里特别设置下
  // 其他情况下 icon 颜色与文字颜色相同，直接继承组件上的 color 即可，无须特别设置
  &&-default &-icon {
    color: @icecream-color-grey-9;
  }

  &&-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;
  }

  &&-has-desc {
    .@{alert-prefix}-content-message {
      font-weight: @icecream-bold;
    }
  }

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

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