@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";

@include govuk-exports("govuk/component/tag") {
  .govuk-tag {
    @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);

    display: inline-block;
    padding: 4px 8px;
    // Since New Transport sits slightly higher than other common fonts.
    // We use intentionally uneven padding to make it balanced, this can be
    // removed using the version of the font that has a more common vertical spacing.
    padding-bottom: 1px;

    // When a user customises their colours often the background is removed,
    // by adding a outline we ensure that the tag component still keeps it's meaning.
    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
    outline: 2px solid transparent;
    outline-offset: -2px;

    color: govuk-colour("white");
    background-color: govuk-colour("blue");
    letter-spacing: 1px;

    text-decoration: none;
    text-transform: uppercase;
  }

  .govuk-tag--inactive {
    background-color: govuk-colour("grey-1");
  }
}