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

%big-number,
.big-number {

  @include bold-48;

  &-label {
    @include core-19;
    display: block;
    padding-bottom: $gutter-half;
  }

}

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

.big-number-with-status {

  @extend %big-number;
  background: $text-colour;
  color: $white;
  position: relative;

  &-show-more-link {
    @include core-16;
    display: block;
    padding: 0.75em 0 0.5625em 0;
    margin-bottom: $gutter-half;
    text-align: center;
    border-bottom: 1px solid $border-colour;

    &:focus {
      outline: none;
      color: $text-colour;
      border-bottom: 1px solid $brown;
    }
  }

  .big-number {
    padding: 15px;
    position: relative;
  }

  .big-number-overlay-link {

    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    width: 100%;
    height: 100%;

    &:hover {
      background: rgba($text-colour, 0.2);
    }

  }

  .big-number-label {

    padding-bottom: 0;

    &:link,
    &:visited {
      color: $white;
    }

  }

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

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

    a {

      &:link,
      &:visited,
      &:active,
      &:hover {
        color: $white;
      }

    }

  }

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

}