// ==========================================================================
// COMPONENTS / #BADGE
// ==========================================================================

@use "sass:math";

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

.nhsapp-badge {
  @include nhsuk-font-size(19);

  display: inline-block;

  background-color: $nhsuk-error-colour;
  border-radius: nhsuk-spacing(1);
  color: nhsuk-colour("white");
  font-weight: bold;
  padding: 0 nhsuk-spacing(2);
  margin: 0;

  @include nhsuk-media-query($from: tablet) {
    padding: 0 12px;
  }
}

.nhsapp-badge-small {
  position: relative;

  display: inline-flex;
  align-items: baseline;
}

/**
  * Mixin to position the small badge
  * @param {number} $size - The size of the badge
  */
@mixin small-badge-position($size: 8px) {
  position: relative;
  width: $size;
  height: $size;
  margin-right: $size;
  border-radius: math.div($size, 2);

  $font-height: 0.7em; // The height of a capital letter in the specific font we use (Frutiger)
  bottom: calc(0.5 * ($font-height - $size));
}

$nhsapp-badge-size-mobile: 8px;
$nhsapp-badge-size-tablet: 12px;

.nhsapp-badge-small__indicator {
  @include small-badge-position($nhsapp-badge-size-mobile);

  @include nhsuk-media-query($from: tablet) {
    @include small-badge-position($nhsapp-badge-size-tablet);
  }

  background-color: $nhsuk-error-colour;
}

.nhsapp-badge-small--absolute {
  .nhsapp-badge-small__indicator {
    position: absolute;

    left: -2 * $nhsapp-badge-size-mobile;
    @include nhsuk-media-query($from: tablet) {
      left: -2 * $nhsapp-badge-size-tablet;
    }
  }
}