@import "../settings.colors";
@import "../settings.fonts";

@import "settings.fonts";
@import "tools.mixins";

@mixin c-card--promo-sm {
  .c-card--promo__success,
  .c-card--promo__failure {
    margin-bottom: rem(20);
  }
}

@mixin c-card--promo--b-sm {
  .c-card--promo--b-left .c-card__hed,
  .c-card--promo--b-right .c-card__hed {
    font-size: rem(36);
    line-height: line-height(38, 36);
  }

  .c-card--promo--b-left .c-card__media,
  .c-card--promo--b-right .c-card__media {
    width: rem(120);
  }
}

@mixin c-card--promo--b-md {
  .c-card--promo--b-left .c-card__media,
  .c-card--promo--b-right .c-card__media {
    width: rem(160);
  }
}

@mixin c-card--promo--c-md {
  .c-card--promo--c {
    .c-card__hed {
      font-size: rem(26);
      line-height: line-height(26, 28);
    }
    .c-indicator-icon__art {
      width: rem(30);
      height: rem(16);
    }
  }
}

@mixin c-card--promo--d-md {
  .c-card--promo--d .c-card--promo__cta {
    .c-button {
      width: auto;
      flex: 0 1 auto;
    }
  }
}

@mixin c-card--utility-promo-md {
  .c-card--utility-promo {
    .c-card__media {
      width: rem(60);
    }
  }
}

@mixin c-card--securedrop-sm {
  .c-card--securedrop {
    .c-card__grid {
      @include grid-template-columns(rem(20), auto 1fr);
    }
    .c-card__content {
      @include display-grid;
      @include grid-template-columns(rem(10), auto 1fr);
      @include grid-template-rows(0, auto auto);
    }

    .c-card__label {
      @include grid-column(1, 3, true);
      @include grid-row(1, 2);
      margin-bottom: 0;
    }

    .c-card__hed {
      @include grid-column(1, 2, true);
      @include grid-row(2, 3);
    }

    .c-card__meta {
      @include grid-column(2, 3, true);
      @include grid-row(2, 3);
      margin-top: 0;
    }

    .c-card__label,
    .c-card__hed,
    .c-card__meta {
      @include grid-align-self(center);
    }
  }
}
