%big-number,
.big-number {

  @include bold-48($tabular-numbers: true);

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

}

.big-number-with-status {

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

  .big-number {
    padding: 15px;
  }

  .big-number-label {
    padding-bottom: 0;
  }

  .big-number-status {

    display: block;
    background: $green;
    position: relative;

    &-error-percentage {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: $error-colour;
      z-index: 1;
    }

    a {

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

    }

    .big-number {
      @include bold-19;
      position: relative;
      z-index: 2;
    }

    .big-number-label {
      display: inline;
    }

  }

}