$alert-slim-icon-size: units(3);
$alert-icon-optical-factor: divide(units($theme-alert-icon-size), 6);
$alert-icon-optical-padding: units($theme-alert-padding-x) -
  $alert-icon-optical-factor;

@mixin add-slim-alert-icon {
  &:before {
    background-size: $alert-slim-icon-size;
    height: units(5);
    width: $alert-slim-icon-size;
    @supports (mask: url("")) {
      mask-size: $alert-slim-icon-size;
    }
  }
}
@mixin add-alert-icon($name, $color, $bgcolor) {
  $this-icon-object: map-merge(
    $icon-object,
    (
      "name": $name,
      "color": $color,
      "height": $theme-alert-icon-size,
    )
  );
  &:before {
    @include add-color-icon($this-icon-object, $bgcolor);
    content: "";
    display: block;
    height: (2 * units($theme-alert-padding-y)) + units(3);
    // padding - optical spacing value
    left: $alert-icon-optical-padding;
    position: absolute;
    top: 0;
  }
  &.usa-alert--slim {
    @include add-slim-alert-icon;
  }
}

// Alert variables ---------- //

$alert-icons: (
  success: "check_circle",
  warning: "warning",
  error: "error",
  info: "info",
  emergency: "error",
);

$icon-object: (
  "name": "ICON_NAME",
  "svg-height": 40,
  "svg-width": 40,
  "height": $theme-icon-image-size,
  "color": "ink",
);

$alert-padding-left: units($theme-alert-bar-width);

.usa-alert {
  @include typeset($theme-alert-font-family);
  @include border-box-sizing;
  @include set-text-and-bg(
    "base-lightest",
    $theme-alert-text-color,
    $theme-alert-text-reverse-color
  );
  @include u-padding-y($theme-alert-padding-y);
  position: relative;

  * + & {
    margin-top: units(2);
  }

  border-left: units($theme-alert-bar-width) solid color("base-light");

  > .usa-list,
  .usa-alert__body > .usa-list {
    padding-left: 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.usa-alert__body {
  @include u-padding-x($theme-alert-padding-x);
}

@each $name, $icon in $alert-icons {
  .usa-alert--#{$name} {
    @include alert-status-styles($name, $icon);

    .usa-alert__body {
      padding-left: units($theme-alert-icon-size) +
        (2 * $alert-icon-optical-padding);
    }
  }
}

.usa-alert__heading {
  @include typeset($theme-alert-font-family, "lg", 1);
  margin-top: 0;
  margin-bottom: units(1);
}

.usa-alert__text {
  @include u-margin-y(0);

  a {
    @include typeset-link;
  }
}

.usa-alert__text:only-child {
  @include u-padding-y(0);
}

.usa-alert--slim {
  @include alert-slim-styles;
}

.usa-alert--validation {
  .usa-checklist {
    margin-top: units(2);
  }
}

.usa-alert--emergency {
  border-left: none;
}