@use "00-base/configure" as *;

.ma__callout-stats {
  margin-bottom: 1em;
  padding: 30px 0 40px 30px;
  position: relative;

  @media ($bp-small-min) {
    padding: 40px 30px 50px;

    &--left,
    &--right {
      min-width: 230px;
      width: 45%;

      & + * {
        margin-top: 0 !important; // level of specificity was too great to override on stacked row templates
      }
    }

    &--left {
      float: left;
      margin-right: $gutter;
    }

    &--right {
      float: right;
      margin-left: $gutter;
    }
  }

  .ma__action-details & {

    @media ($bp-large-min) and ($bp-x-large-max) {

      &--left,
      &--right {
        float: none;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
      }
    }
  }

  &:before {
    content: "";
    height: calc(100% - 16px);  // adjusting for the 11deg angle on 85px
    position: absolute;
      top: 8px; // adjusting for the 11deg angle on 85px
      left: 0;
    transform: skew(0,-11deg);
    width: 85px;
    z-index: -1;
  }

  &__stat {
    font-size: $fonts-9xlarge;
    line-height: 1.3;
  }

  &__content {
    display: block;
    font-size: $fonts-medium;
    line-height: 1.3;
  }
}

//theme

.ma__callout-stats {
  font-weight: 900;

  &:before {
    background-color: rgba($c-primary-alt,.2);
  }

  &__stat {
    color: $c-primary-alt;
  }

  &__content {
    color: $c-font-base;
  }
}