@import "../lib.less";
@import "../variables/components/dialog.less";
@import "../variables/components/alert-box.less";

.@{veui-prefix}-alert-box {
  font-size: @veui-font-size-m;
  .@{veui-prefix}-dialog-content {
    width: @veui-dialog-width-contextual;
    padding-top: @veui-alert-box-padding-y;
    padding-bottom: @veui-alert-box-padding-y;
    min-height: auto;

    &-head {
      display: none;
    }

    &-body {
      display: flex;
      margin: 0;
      padding-top: 0;
      padding-bottom: 0
    }
  }

  &-icon {

    &-wrapper {
      display: flex;
      align-items: center;
      margin-right: @veui-alert-box-icon-spacing-contextual;
      .size(@veui-alert-box-icon-size);
      font-size: @veui-alert-box-icon-size;

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

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

  &-wrapper {
    flex-grow: 1;
  }

  &-content {
    line-height: @veui-line-height-fixed;
    color: @veui-alert-box-content-color;
  }

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

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

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

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

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

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