notifications-admin/app/assets/stylesheets/components/big-number.scss

%big-number,
.big-number {

  display: block;

  &-number {
    @include bold-48($tabular-numbers: true);
    display: block;
  }

  &-label {
    @include core-19;
    display: inline-block;
    padding-bottom: 10px;
  }

}

.pill .big-number-number {

  // reduce padding until screen is bigger than 420px / zoomed below 300%
  padding-left: govuk-spacing(1);

  @include govuk-media-query($from: 420px) {
    padding-left: govuk-spacing(2);
  }

}

.big-number-dark {
  @extend %big-number;
  padding: govuk-spacing(3);
  position: relative;
  background: $black;
  color: $white;

  .big-number-number {
    @include bold-36($tabular-numbers: true);
  }
}

.big-number-smaller {

  @extend %big-number;

  .big-number-number {
    @include bold-36($tabular-numbers: true);
  }

}

.big-number-smallest {

  @extend %big-number;

  .big-number-number {
    @include bold-24($tabular-numbers: true);
  }

}

.big-number-with-status {

  @extend %big-number;
  position: relative;
  margin-bottom: govuk-spacing(4);

  .big-number,
  .big-number-smaller {
    padding: govuk-spacing(3);
    position: relative;
    background: $black;
    color: $white;
  }

  .big-number-label {

    padding-bottom: 0;

    &:link,
    &:visited {
      color: $link-colour;
    }

  }

  .big-number-link {

    text-decoration: none;
    background: $link-colour;
    color: $white;
    display: block;
    border: 2px solid $link-colour;
    margin-bottom: 5px;

    &:hover {

      color: $light-blue-25;

      .big-number,
      .big-number-number,
      .big-number-smaller,
      .big-number-label {
        color: $light-blue-25;
      }

    }

    &:active,
    &:focus {
      background: $govuk-focus-colour;
      border: none;
      padding: 2px; /* replace the spacing the border gave */
      /* override the default focus style to inset the underline */
      box-shadow: inset 0 -4px $govuk-focus-text-colour;

      .big-number-number,
      .big-number-smaller,
      .big-number-label {
        color: $govuk-focus-text-colour;
        text-decoration: none;
      }
    }

    .big-number,
    .big-number-smaller {
      background: transparent;
    }

    .big-number-label {
      text-decoration: underline;
    }

  }

  %big-number-status,
  .big-number-status {

    @include core-19;
    display: block;
    background: $green;
    color: $white;
    padding: 15px;

    a {

      &:link,
      &:visited,
      &:active,
      &:hover {
        color: $white;
        text-decoration: underline;
      }

      &:active,
      &:focus {
        color: $black;
      }

    }

  }

  .big-number-status-failing {
    @extend %big-number-status;
    background: $error-colour;
  }

}

.big-number-meta-wrapper {

  position: relative;
  margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
  background: $govuk-blue;

  .big-number-meta {

    padding: govuk-spacing(2) govuk-spacing(3);
    color: $white;
    pointer-events: none;

    @include media(desktop) {
      position: absolute;
      bottom: 7px;
      right: 5px;
      text-align: right;
    }

  }

}