// - - - - - - - - - - - - - - - - - - - - - - - - -
// Stat Box
// - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin CHAMELEON-statistic {
  .c-statistic {
    position: relative;
    width: 100%;
    padding: 20px 0;

    @media #{$medium-up} {
      padding: 0;
    }

    &__subtitle {
      @extend %font-family-secondary;
    }

    &__stat,
    &__copy {
      @extend %font-family-primary;
    }


    &__subtitle,
    &__copy {
      font-size: rem-calc(12px);
      color: #fff;
      display: block;

      @media #{$medium-up} {
        font-size: rem-calc(14px);
      }
    }

    &__stat,
    &__copy {
      display: inline-block;
    }

    &__subtitle {
      display: block;
    }

    &__stat {
      color: $color-primary !important;
      font-size: rem-calc(44px);
      font-weight: 400;
      letter-spacing: -3px;

      @media #{$medium-up} {
        font-size: rem-calc(64px);
      }
    }

    &__copy {
      font-weight: 600;
      line-height: 1.1em;
      padding-left: 10px;
    }
  }
}