@import "../lib.less";

.@{veui-prefix}-alert {
  display: flex;
  align-items: flex-start;
  line-height: @dls-alert-line-height;
  padding: @dls-alert-padding-y @dls-alert-padding-x;
  border: 1px solid transparent;
  color: @dls-alert-font-color;

  &-multiline {
    .padding(@dls-alert-padding-y-multiline, _);
  }

  &-state,
  &-nav,
  &-close {
    display: flex;
    align-items: center;
  }

  &-state {
    margin-right: @dls-alert-content-spacing-before;
  }

  &-icon {
    .dls-icon-size(@dls-alert-icon-size);
  }

  &-nav,
  &-close {
    .@{veui-prefix}-icon {
      .dls-icon-size(@dls-alert-icon-size-aux);
    }

    .@{veui-prefix}-button {
      font-size: inherit;
    }
  }

  &-nav {
    white-space: nowrap;
    margin-right: @dls-alert-content-spacing-after;
    color: @dls-alert-pages-font-color;

    &-indicator {
      padding: 0 @dls-alert-pages-spacing;
      font-variant-numeric: tabular-nums;
      line-height: 2;
    }
  }

  &-content {
    flex-grow: 1;
    margin-right: @dls-alert-content-spacing-after;

    &-title {
      font-weight: @dls-alert-title-font-weight;
      line-height: @dls-alert-title-line-height;
      margin-bottom: @dls-alert-title-spacing-after;
      color: @dls-alert-title-font-color;
    }

    &-message {
      display: inline;
      box-shadow: transparent 0 0;
    }

    &-extra {
      float: right;
      display: flex;
      margin-left: @dls-alert-content-spacing-after;
    }
  }

  .make-state-message(@state) {
    &-@{state} {
      @fg-color-name: ~"dls-alert-icon-color-@{state}";
      @bg-color-name: ~"dls-alert-background-color-@{state}";
      @border-color-name: ~"dls-alert-border-color-@{state}";
      background-color: @@bg-color-name;
      border-color: @@border-color-name;

      .@{veui-prefix}-alert-icon {
        color: @@fg-color-name;
      }
    }
  }

  .make-state-message(success);
  .make-state-message(warning);
  .make-state-message(info);
  .make-state-message(error);

  /* 有title样式 */
  &&-titled {
    padding: @dls-alert-padding-y-titled @dls-alert-padding-x;

    .@{veui-prefix}-alert-icon {
      .dls-icon-size(@dls-alert-icon-size-titled);
    }

    .@{veui-prefix}-alert-close {
      align-items: start;
    }
  }

  &[ui~="m"] {
    font-size: @dls-alert-font-size-m;
    border-radius: @dls-alert-border-radius-m;

    .@{veui-prefix}-alert {
      &-state,
      &-nav,
      &-close {
        font-size: @dls-alert-font-size-m;
        height: dls-line-height(@dls-alert-line-height, @dls-alert-font-size-m);
      }

      &-content {
        &-title {
          font-size: @dls-alert-title-font-size-m;
        }
      }
    }
  }

  &-titled[ui~="m"] {
    .@{veui-prefix}-alert {
      &-state,
      &-nav,
      &-close {
        font-size: @dls-alert-title-font-size-m;
        height: dls-line-height(
          @dls-alert-title-line-height,
          @dls-alert-title-font-size-m
        );
      }
    }
  }

  &[ui~="s"] {
    font-size: @dls-alert-font-size-s;
    border-radius: @dls-alert-border-radius-s;

    .@{veui-prefix}-alert {
      &-state,
      &-nav,
      &-close {
        font-size: @dls-alert-font-size-s;
        height: dls-line-height(@dls-alert-line-height, @dls-alert-font-size-s);
      }

      &-content {
        &-title {
          font-size: @dls-alert-title-font-size-s;
        }
      }
    }
  }

  &-titled[ui~="s"] {
    .@{veui-prefix}-alert {
      &-state,
      &-nav,
      &-close {
        font-size: @dls-alert-title-font-size-s;
        height: dls-line-height(
          @dls-alert-title-line-height,
          @dls-alert-title-font-size-s
        );
      }
    }
  }
}