@use "sass:math";
@use "../../settings" as *;
@use "../../functions" as *;
@use "./border-box-sizing" as *;
@use "./set-text-and-bg" as *;
@use "../general/icon" as *;
@use "../utilities" as *;
@use "../typography/typeset.scss" as *;
@use "../helpers/set-link-from-bg" as *;

$alert-icon-gap: 1;
$alert-slim-icon-size: 3;
$alert-slim-icon-padding: 1;

// Optical adjustment for icons
// Adjusts the position to accommodate the 1/12 empty space built into the icon SVGs
$alert-icon-optical-adjust-top: calc(
  units($theme-alert-padding-y) - units($theme-alert-icon-size) / 6
);
$alert-icon-optical-adjust-left: calc(units($theme-alert-icon-size) * -1 / 12);
$alert-slim-icon-optical-adjust-left: calc(
  units($alert-slim-icon-size) * -1 / 12
);

// Base alert styles
@mixin alert-styles {
  $bgcolor: "base-lightest";
  $banner-text-color-token: get-color-token-from-bg(
    $bgcolor,
    $theme-alert-text-reverse-color,
    $theme-alert-text-color,
    $context: "Alert (default)"
  );

  background-color: color($bgcolor);
  border-left: units($theme-alert-bar-width) solid color("base-light");
  color: color($banner-text-color-token);

  .usa-alert__body {
    @include border-box-sizing;
    @include typeset($theme-alert-font-family);
    @include u-padding-y($theme-alert-padding-y);
    position: relative;
  }

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

    &:only-child {
      @include u-padding-y(0);
    }
  }

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

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

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

// Set status styles for alert wrapper/background
@mixin alert-status-wrapper-styles($name) {
  $bgcolor: if($name != "emergency", "#{$name}-lighter", $name);

  background-color: color($bgcolor);
  border-left-color: color($name);
}

// Set status styles for alert content
// added to __body element
@mixin alert-status-body-styles($name, $icon) {
  $bgcolor: if($name != "emergency", "#{$name}-lighter", $name);
  $banner-text-color-token: get-color-token-from-bg(
    $bgcolor,
    $theme-alert-text-reverse-color,
    $theme-alert-text-color,
    $context: "Alert (#{$name})"
  );
  @include add-alert-icon($icon, $banner-text-color-token, $bgcolor);
  @include set-text-and-bg($bgcolor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(
    units($theme-alert-icon-size) + $alert-icon-optical-adjust-top * 2
  );

  > * {
    margin-left: calc(units($theme-alert-icon-size) + units($alert-icon-gap));
  }

  .usa-link {
    @include set-link-from-bg(
      $bgcolor,
      $theme-alert-link-reverse-color,
      $theme-alert-link-color,
      $context: "Alert (#{$name})"
    );
  }
}

@mixin add-alert-icon($name, $color, $bgcolor) {
  $this-icon-object: (
    "name": $name,
    "color": $color,
    "svg-height": 40,
    "svg-width": 40,
    "height": $theme-alert-icon-size,
  );

  &::before {
    @include add-color-icon($this-icon-object, $bgcolor);
    content: "";
    display: block;
    position: absolute;
    top: $alert-icon-optical-adjust-top;
  }
}

// Variant - no icon
@mixin alert-styles-no-icon {
  .usa-alert__body {
    min-height: 0;

    &:before {
      display: none;
    }

    > * {
      margin-left: 0;
    }
  }
}

// Variant - slim
@mixin add-slim-alert-icon {
  &:before {
    @supports (mask: url("")) {
      mask-size: units($alert-slim-icon-size);
    }
    height: units($alert-slim-icon-size);
    top: units($alert-slim-icon-padding);
    width: units($alert-slim-icon-size);
  }
}

@mixin alert-styles-slim {
  .usa-alert__body {
    @include u-padding-y($alert-slim-icon-padding);
    @include add-slim-alert-icon;
    min-height: 0;

    > * {
      margin-left: calc(units($alert-slim-icon-size) + units($alert-icon-gap));
    }
  }
}