// Alerts

@import "media-object";

@mixin alert($dark_color, $light_color, $icon) {
  background-color: $light_color;
  border-color: $dark_color;

  &::before {
    background-color: $light_color;
  }

  .usajobs-alert__body {
    background-color: $light_color;
  }

  .usajobs-alert__icon {
    background-image: url("../img/icons/alerts/#{$icon}.svg");
    background-color: $light_color;
  }
}

.usajobs-alert {
  position: relative;
  margin: $size-M 0;
  padding: 0;
  border: 1px solid;
  border-left-width: 1rem;
  padding: 1.5rem 1.5rem 1rem 1rem;
  @include animation(fadeIn $duration-slow);

  &__icon {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 5.2rem;
    width: 5.2rem;
  }

  &__body {
    min-height: rem(
      77px
    ); // I no longer recall why this was put here -- taking it out in the next go round
    padding-left: $size-base;

    &[aria-hidden="true"] {
      display: none;
    }
  }

  &__text {
    margin: 0;
  }

  &__footer {
    margin-top: $size-default;
    text-align: right;
  }

  &__close {
    @include makeCloseButton(30px);
  }

  .usa-alert-text {
    max-width: inherit;
  }
}

// Spurious style in the standards that we were inheriting
.usa-alert-text:only-child {
  margin: 0;
  padding: 0;
}

.no-flexbox .usajobs-alert {
  @include clearfix();
  display: table;

  &[aria-hidden="true"] {
    display: none;
  }

  &__figure,
  &__body {
    display: table-cell;
  }

  &__body {
    @include calc(
      width,
      "100% - " ($icon-width + $icon-padding + $body-padding)
    );
  }

  &__body .lt-ie9 & {
    width: 75%;
  }
}

.flexbox .usajobs-alert {
  display: flex;
  align-items: flex-start;

  &[aria-hidden="true"] {
    display: none;
  }

  &__figure {
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }
}

.usajobs-alert--success {
  @include alert($color-green-dark, $color-green-lightest, "success");
}

.usajobs-alert--info {
  @include alert($color-primary-alt, $color-primary-alt-lightest, "info");
}

.usajobs-alert--warning {
  @include alert($color-gold, $color-gold-lightest, "warning");
}

.usajobs-alert--error {
  @include alert($color-secondary-dark, $color-secondary-lightest, "error");
}

.usajobs-alert--tip {
  @include alert(
    $color-primary-alt-dark,
    $color-primary-alt-lightest,
    "lightbulb"
  );

  .usajobs-alert__icon {
    background-size: 75%;
  }

  .usajobs-alert__count {
    margin: 0;
    font-size: $small-font-size;
  }

  .usa-button-primary {
    color: $color-white;
  }
}