/*
 * Alerts
 * @see https://designsystem.digital.gov/components/alerts/
 * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
 */

.usa-alert-heading {
  line-height: 2.4rem;
  margin-bottom: $gap;
}

.usa-alert {
  padding-bottom: 2.4rem;
}

@mixin alert {
  padding: $gap * 2;
  border-left-width: $gap / 2;
  border-left-style: solid;

  @include panel-margin;

  @include media($medium-screen) {
    padding: $gap * 4;
  }
}

@mixin alert-level($level) {
  $background-color: $color-aqua-lightest;
  $border-color: $color-blue;

  @if $level == "success" {
    $background-color: $color-green-lightest;
    $border-color: $color-green;
  } @else if $level == "warning" {
    $background-color: $color-gold-lightest;
    $border-color: $color-gold;

    .usa-button {
      background-color: $color-gold;
      box-shadow: inset 0 0 0 2px $color-gold;

      &:hover {
        background-color: $color-gold-dark;
        box-shadow: inset 0 0 0 2px $color-gold-dark;
      }
    }
  } @else if $level == "error" {
    $background-color: $color-red-lightest;
    $border-color: $color-red;
  }

  background-color: $background-color;
  border-color: $border-color;
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .alert__icon {
    @include icon-color($border-color);

    flex-grow: 0;
    flex-shrink: 0;
    margin-right: $gap * 2;
    margin-left: 0;
  }

  .alert__title {
    @include h3;

    margin-top: 0;

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

  .alert__content {
    flex: 1;

    .alert__message {
      &:last-child {
        > *:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .alert__actions {
    .icon-link {
      @include icon-link-color($color-primary, $color-white);

      &:first-child {
        margin-left: -$gap;
      }
    }
  }
}

.alert {
  @include alert;
  @include alert-level("info");

  &.alert--success {
    @include alert-level("success");

    .alert__actions {
      .icon-link {
        @include icon-link-color($color-green, $color-white);
      }
    }
  }

  &.alert--warning {
    @include alert-level("warning");

    .alert__actions {
      .icon-link {
        @include icon-link-color($color-gold-dark, $color-white);
      }
    }
  }

  &.alert--error {
    @include alert-level("error");

    .alert__actions {
      .icon-link {
        @include icon-link-color($color-red, $color-white);
      }
    }
  }
}
