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

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

@mixin ma-emergency-header ($color: $c-highlight) {

  @if $color == $c-highlight {
    color: $c-font-base;

  } @else {
    color: $c-font-inverse;
  }
  background-color: rgba($color, 1);
  border-color: rgba($color, 1);

  .ma__emergency-header__label {

    @if $color == $c-highlight {
      color: rgba($c-font-base, .8);
      border-right-color: rgba($c-font-base,.3);

      svg {
        fill: $c-font-base;
      }
    } @else {
      color: $c-font-inverse;
      border-right-color: rgba($c-font-inverse,.3);

      svg {
        fill: $c-font-inverse;
      }
    }

  }

  .ma__emergency-header__title {
    font-weight: bold;

    @if $color == $c-highlight {

      .ma__content-link {
        color: $c-font-base;
        border-bottom: 1px solid rgba($c-font-base, .5);

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

      .ma__content-link {
        color: $c-font-inverse;
        border-bottom: 1px solid rgba($c-font-inverse, .5);

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