@use "00-base/configure" as *;

@use "sass:color" as *;

.ma__emergency-alert {
  background-color: mix(#fff, $c-warning,90%);
  font-size: $fonts-small;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;

  & + & {
    border-top: 1px solid mix(#fff, $c-warning, 50%);
  }

  &__time-stamp {
    font-size: $fonts-smaller;
    font-style: italic;
    font-weight: $fonts-normal;
  }

  &__link {

    @media ($bp-small-min) {
      display: inline-block;
    }

    .ma__content-link {

      span {
        border-bottom-width: 1px;
        font-size: $fonts-small;
        border-bottom-color: rgba($c-font-base, .5);
        color: $c-font-base;

        &:hover {
          border-bottom-width: 3px;
          border-bottom-color: rgba($c-font-base, .5);
        }

        &:after {
          border-color: rgba($c-font-base, .5);
        }
      }
    }
  }

  &__message {

    @media ($bp-small-min) {
      display: inline;
    }
  }
}

$colors: (
  "c-warning": $c-warning,
  "c-primary": $c-primary,
  "c-primary-alt": $c-primary-alt,
  "c-error": $c-error,
  "c-gray": $c-gray
);

@each $class, $c in $colors {
  .ma__emergency-alert--#{$class} {

    @include ma-emergency-alert($c);
  }
}