@mixin card-banner-modifier($title-background-color, $body-background-color) {
  & .cbp-card__banner-title {
    background-color: $title-background-color;
  }

  & .cbp-card__banner-content {
    background-color: $body-background-color;
    border-color: $title-background-color;
  }
}

.cbp-card__banner {
  border: 0;
}

.cbp-card__banner-title {
  align-items: center;
  background-color: var(--cbp-color-gray-cool-60);
  border-top-left-radius: var(--cbp-border-radius-softer);
  border-top-right-radius: var(--cbp-border-radius-softer);
  color: var(--cbp-color-text-lighter);
  display: flex;
  font-size: var(--cbp-font-size-heading-md);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-line-height-md);
  padding: var(--cbp-space-3x) var(--cbp-space-4x);

  & > i {
    margin-right: var(--cbp-space-2x);
  }
}

.cbp-card__banner-content {
  background-color: var(--cbp-color-white);
  border-color: var(--cbp-color-gray-cool-60);
  border-style: solid;
  border-width: var(--cbp-border-size-md);
  border-top: 0;
  border-bottom-left-radius: var(--cbp-border-radius-softer);
  border-bottom-right-radius: var(--cbp-border-radius-softer);
  padding: var(--cbp-space-4x) var(--cbp-space-4x) var(--cbp-space-5x) var(--cbp-space-4x);

  :last-child {
    margin-bottom: 0;
  }
}

.cbp-card__banner--info {
  @include card-banner-modifier(
    $title-background-color: var(--cbp-color-info-dark),
    $body-background-color: var(--cbp-color-info-lighter)
  );
}

.cbp-card__banner--success {
  @include card-banner-modifier(
    $title-background-color: var(--cbp-color-success-dark),
    $body-background-color: var(--cbp-color-success-lighter)
  );
}

.cbp-card__banner--warning {
  @include card-banner-modifier(
    $title-background-color: var(--cbp-color-warning-base),
    $body-background-color: var(--cbp-color-warning-lighter)
  );

  .cbp-card__banner-title {
    color:var(--cbp-color-text-darker);
  }
}

.cbp-card__banner--danger {
  @include card-banner-modifier(
    $title-background-color: var(--cbp-color-danger-base),
    $body-background-color: var(--cbp-color-danger-lighter)
  );
}