@import "govuk_publishing_components/individual_component_support";

.gem-c-big-number {
  margin-bottom: govuk-spacing(3);
  @include govuk-text-colour;
}

.gem-c-big-number__value {
  line-height: 1;
  font-size: 80px;
  font-size: govuk-px-to-rem(80px);
  @include govuk-font($size: false, $weight: bold);
}

.gem-c-big-number__label {
  @include govuk-font($size: 19, $weight: bold);

  // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
  // What's happening here is that the label and the number technically have an inline relationship
  // but appear to have a block relationship thanks to this element
  &::before {
    content: "";
    display: block;
  }
}

.gem-c-big-number__link {
  display: inline-block;
  text-decoration: none;

  // Add govuk-link hover decoration to main value if no label present but a href attribute is
  .gem-c-big-number__value--decorated {
    @include govuk-link-decoration;
    @include govuk-link-style-no-underline;
  }

  .gem-c-big-number__label {
    @include govuk-link-decoration;
  }

  &:hover,
  &:active {
    .gem-c-big-number__label,
    .gem-c-big-number__value--decorated {
      @include govuk-link-hover-decoration;
    }
  }

  &:focus,
  &:focus:hover {
    .gem-c-big-number__label,
    .gem-c-big-number__value--decorated {
      text-decoration: none;
    }
  }
}

.gem-c-big-number__suffix {
  vertical-align: middle;
}
