@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../molecules/_kpi.scss';

.#{molecule('kpi')} {
  @include kpi;
  display: block;
  flex: 1 0 20em;
  margin: 0 1.875rem 2.125em 0;
  padding-top: 25%;
  transition: transform .3s cubic-bezier(.25,.1,.25,1);

  @media (min-width: 768px) {
    margin-right: 0;
  }

  &:nth-child(3n+1) {
    grid-column: 1 / 9;

    @media (min-width: 1024px) {
      grid-column: 4 / 10;
    }
  }

  &:nth-child(3n+2) {
    grid-column: 9 / 17;

    @media (min-width: 1024px) {
      grid-column: 10 / 16;
    }
  }

  &:nth-child(3n+3) {
    grid-column: 17 / 25;

    @media (min-width: 1024px) {
      grid-column: 16 / 22;
    }
  }

  &-teaser {
    margin: 0;
  }

  &-content {
    @include kpi-content;
  }

  &-fluid {
    @include kpi-fluid;

    .#{molecule('kpi-content')} {
      @include kpi-fluid-content;
    }
  }

  &-icon {
    @include kpi-icon;
  }

  &-text {
    @include kpi-text;
  }

  &-number {
    @include kpi-number;
  }

  &-websites {
    @include gradient-websites;

    .#{molecule('kpi')} {
      &-icon {
        @include fill-websites;
      }

      &-text,
      &-number {
        @include color-websites;
      }
    }
  }

  &-stories {
    @include gradient-stories;

    .#{molecule('kpi')} {
      &-icon {
        @include fill-stories;
      }

      &-text,
      &-number {
        @include color-stories;
      }
    }
  }

  &-ads {
    @include gradient-ads;

    .#{molecule('kpi')} {
      &-icon {
        @include fill-ads;
      }

      &-text,
      &-number {
        @include color-ads;
      }
    }
  }

  &-e-mails {
    @include gradient-e-mails;

    .#{molecule('kpi')} {
      &-icon {
        @include fill-e-mails;
      }

      &-text,
      &-number {
        @include color-e-mails;
      }
    }
  }
}
