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

@use "00-base/color-tokens" as *;

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

@use "sass:color" as *;

@mixin ma-emergency-alert ($color) {
  color: var(--mf-c-font-base);
  background-color: mix($c-bg, $color, 90%);

    & + & {
    border-top-color: mix($c-bg, $color, 50%);
  }

  .ma__emergency-alert__link {
    font-weight: bold;

    &:hover {
      border-bottom-color: transparent;
    }

    .ma__content-link {
      text-decoration: none;

      span {
        display: inline;
        border-bottom: 1px solid rgba($c-font-base, .5);

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

      svg {
        fill: mix($c-white, $c-font-base, 50%);
      }

      &:hover {
        border-bottom-color: transparent;
      }
    }
  }
}