.cbp-card {
  border-color: var(--cbp-color-gray-cool-10);
  border-style: solid;
  border-width: var(--cbp-border-size-md);
  border-radius: var(--cbp-border-radius-softer);
  max-width: 100%;
}

.cbp-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.cbp-card__title {
  color: var(--cbp-color-text-darker);
  font-weight: var(--cbp-font-weight-medium);
  font-size: var(--cbp-font-size-heading-lg);
  line-height: var(--cbp-line-height-sm);
}

.cbp-card__content {
  background-color: var(--cbp-color-white);
  padding: var(--cbp-space-5x) var(--cbp-space-4x);
  width: 100%;

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

.cbp-card__header--flag {
  background-color: var(--cbp-color-interactive-secondary-base);
  padding: var(--cbp-space-4x) var(--cbp-space-4x) var(--cbp-space-5x) var(--cbp-space-4x);

  & > .cbp-card__title {
    color: var(--cbp-color-text-lightest);
  }
}

.cbp-card__img-top {
  border-radius: var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0;
  width: 100%;
}

.cbp-card__img-left {
  border-radius: var(--cbp-border-radius-soft) 0 0 var(--cbp-border-radius-soft);
}

@mixin card-general-modifier ($background-color, $border-color, $title-color) {
  border-color: $border-color;

  & .cbp-card__content {
    background-color: $background-color;
  }
  
  & .cbp-card__title {
    color: $title-color;
  }
}

// TODO: DRY with sass:map
.cbp-card--info {
  @include card-general-modifier(
    $background-color: var(--cbp-color-info-lighter),
    $border-color: var(--cbp-color-info-light),
    $title-color: var(--cbp-color-info-darker)
  );
}

.cbp-card--success {
  @include card-general-modifier(
    $background-color: var(--cbp-color-success-lighter),
    $border-color: var(--cbp-color-success-light),
    $title-color: var(--cbp-color-success-darker)
  );
}

.cbp-card--danger {
  @include card-general-modifier(
    $background-color: var(--cbp-color-danger-lighter),
    $border-color: var(--cbp-color-danger-base),
    $title-color: var(--cbp-color-text-darker)
  );
}

.cbp-card--warning {
  @include card-general-modifier(
    $background-color: var(--cbp-color-warning-lighter),
    $border-color: var(--cbp-color-warning-base),
    $title-color: var(--cbp-color-text-darker)
  );
}

[data-cbp-theme="dark"] {
  .cbp-card {
    border-color: var(--cbp-color-base-neutral-base);
  }

  .cbp-card__title {
    color: var(--cbp-color-text-lightest);
  }

  .cbp-card__content {
    background-color: var(--cbp-color-base-neutral-dark);
  }

  .cbp-card--info {
    @include card-general-modifier(
      $background-color: var(--cbp-color-info-darker),
      $border-color: var(--cbp-color-info-dark),
      $title-color: var(--cbp-color-info-lighter)
    );
  }
  
  .cbp-card--success {
    @include card-general-modifier(
      $background-color: var(--cbp-color-success-darker),
      $border-color: var(--cbp-color-success-dark),
      $title-color: var(--cbp-color-success-lighter)
    );
  }

  .cbp-card--danger {
    @include card-general-modifier(
      $background-color: var(--cbp-color-danger-darker),
      $border-color: var(--cbp-color-danger-dark),
      $title-color: var(--cbp-color-danger-lighter)
    );
  }
}