/* ==========================================================================
  #TAG
  ========================================================================== */

@use "nhsuk-frontend/dist/nhsuk/core/helpers/colour" as *;
@use "nhsuk-frontend/dist/nhsuk/core/tools/typography" as *;
@use "nhsuk-frontend/dist/nhsuk/core/tools/sass-mq" as *;

$color_tag-aqua-green-background: nhsapp-colour("pale-aqua-green");
$color_tag-aqua-green-text: nhsapp-colour("dark-aqua-green");
$color_tag-blue-background: nhsapp-colour("pale-blue");
$color_tag-blue-text: nhsapp-colour("dark-blue");
$color_tag-green-background: nhsapp-colour("pale-green");
$color_tag-green-text: nhsapp-colour("dark-green");
$color_tag-grey-background: nhsuk-colour("grey-4");
$color_tag-grey-text: nhsuk-colour("black");
$color_tag-purple-background: nhsapp-colour("pale-purple");
$color_tag-purple-text: nhsapp-colour("dark-purple");
$color_tag-orange-background: nhsapp-colour("pale-orange");
$color_tag-orange-text: nhsapp-colour("dark-orange");
$color_tag-pink-background: nhsapp-colour("pale-pink");
$color_tag-pink-text: nhsapp-colour("dark-pink");
$color_tag-red-background: nhsapp-colour("pale-red");
$color_tag-red-text: nhsapp-colour("dark-red");
$color_tag-yellow-background: nhsapp-colour("pale-yellow");
$color_tag-yellow-text: nhsapp-colour("dark-yellow");

.nhsapp-tag {
  @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25);
  background-color: $color_tag-blue-background;
  border: 1px solid transparent;
  border-radius: 2px;
  color: $color_tag-blue-text;
  display: inline-block;
  padding: 3px 9px; // Minus the border width

  @include nhsuk-media-query($from: tablet) {
    line-height: 1.4285em;
  }
}

/* Colour variants
    ========================================================================== */

.nhsapp-tag--white {
  background-color: nhsuk-colour("white");
  border-color: nhsuk-colour("grey-4");
  color: nhsuk-colour("black");
}

.nhsapp-tag--grey {
  background-color: $color_tag-grey-background;
  color: $color_tag-grey-text;
}

.nhsapp-tag--green {
  background-color: $color_tag-green-background;
  color: $color_tag-green-text;
}

.nhsapp-tag--aqua-green {
  background-color: $color_tag-aqua-green-background;
  color: $color_tag-aqua-green-text;
}

.nhsapp-tag--blue {
  background-color: $color_tag-blue-background;
  color: $color_tag-blue-text;
}

.nhsapp-tag--purple {
  background-color: $color_tag-purple-background;
  color: $color_tag-purple-text;
}

.nhsapp-tag--pink {
  background-color: $color_tag-pink-background;
  color: $color_tag-pink-text;
}

.nhsapp-tag--red {
  background-color: $color_tag-red-background;
  color: $color_tag-red-text;
}

.nhsapp-tag--orange {
  background-color: $color_tag-orange-background;
  color: $color_tag-orange-text;
}

.nhsapp-tag--yellow {
  background-color: $color_tag-yellow-background;
  color: $color_tag-yellow-text;
}