@use "../../vendor/govuk-frontend" as *;

/* ==========================================================================
   #BADGE
   ========================================================================== */

.moj-badge {
  display: inline-block;
  padding: 0 govuk-spacing(1);
  border: 2px solid govuk-functional-colour(brand);
  outline: 2px solid transparent;
  outline-offset: -2px;
  color: govuk-functional-colour(brand);
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  vertical-align: middle;

  /* no size argument as we are manually using step 14 from the legacy type
  * scale */
  @include govuk-font($size: false, $weight: "bold");

  @include govuk-media-query(tablet) {
    font-size: 14px;
    line-height: 20px;
  }

  &--purple {
    border-color: govuk-colour("purple");
    color: govuk-colour("purple");
  }

  &--bright-purple {
    border-color: govuk-colour("magenta", $variant: "shade-25");
    color: govuk-colour("magenta", $variant: "shade-25");
  }

  &--red {
    border-color: govuk-colour("red");
    color: govuk-colour("red");
  }

  &--green {
    border-color: govuk-colour("green");
    color: govuk-colour("green");
  }

  &--blue {
    border-color: govuk-colour("blue");
    color: govuk-colour("blue");
  }

  &--black {
    border-color: govuk-colour("black");
    color: govuk-colour("black");
  }

  &--grey {
    border-color: govuk-colour("black", $variant: "tint-25");
    color: govuk-colour("black", $variant: "tint-25");
  }

  &--large {
    @include govuk-font($size: 16, $weight: "bold");
  }
}

/*# sourceMappingURL=_badge.scss.map */