@import "../lib.less";

.@{veui-prefix}-alert-box {
  .@{veui-prefix}-dialog-content {
    width: @dls-dialog-width-contextual;
    padding-top: @dls-dialog-padding-y;

    &-head {
      display: none;
    }

    &-body {
      display: flex;
    }
  }

  &-icon {
    .dls-icon-size(@dls-dialog-icon-size-contextual);

    &-wrapper {
      display: flex;
      align-items: center;
      margin-right: @dls-dialog-icon-spacing-contextual;
      height: dls-line-height(
        @dls-dialog-title-line-height,
        @dls-dialog-title-font-size-m
      );
      font-size: @dls-dialog-title-font-size-m;

      [ui~="s"] & {
        height: dls-line-height(
          @dls-dialog-title-line-height,
          @dls-dialog-title-font-size-s
        );
        font-size: @dls-dialog-title-font-size-s;
      }

      .@{veui-prefix}-alert-box-titleless & {
        height: dls-line-height(
          @dls-dialog-body-line-height,
          @dls-dialog-body-font-size-m
        );
        font-size: @dls-dialog-body-font-size-m;

        [ui~="s"]& {
          height: dls-line-height(
            @dls-dialog-body-line-height,
            @dls-dialog-body-font-size-s
          );
          font-size: @dls-dialog-body-font-size-s;
        }
      }
    }
  }

  &-title {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: @dls-dialog-title-spacing-after-contextual;
    color: @dls-dialog-title-font-color;
    line-height: @dls-dialog-title-line-height;
    font-weight: @dls-dialog-title-font-weight;
    font-size: @dls-dialog-title-font-size-m;
  }

  &-wrapper {
    flex-grow: 1;
  }

  &-content {
    line-height: @dls-dialog-body-line-height;
  }

  .@{veui-prefix}-dialog-content-foot {
    display: flex;

    &::before {
      content: "";
      display: block;
      float: left;
      font-size: @dls-dialog-title-font-size-m;
      width: dls-sum(
        @dls-dialog-icon-size-contextual,
        @dls-dialog-icon-spacing-contextual
      );
    }
  }

  &[ui~="s"] .@{veui-prefix}-dialog-content-foot::before {
    font-size: @dls-dialog-title-font-size-s;
  }

  &-titleless[ui~="s"] .@{veui-prefix}-dialog-content-foot::before {
    font-size: @dls-dialog-body-font-size-s;
  }

  &-info &-icon {
    color: @dls-dialog-icon-color-info;
  }

  &-success &-icon {
    color: @dls-dialog-icon-color-success;
  }

  &-error &-icon {
    color: @dls-dialog-icon-color-error;
  }

  &-warning &-icon {
    color: @dls-dialog-icon-color-warning;
  }
}