$suffix-align: var(--wds-card-header-suffix-align, center);
$title-subtitle-gap: var(
  --wds-card-header-title-subtitle-gap,
  var(--wds-space-0, 0)
);
$subtitle-font-size: var(
  --wds-card-subtitle-font-size,
  var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px))
);
$subtitle-line-height: var(
  --wds-card-subtitle-line-height,
  var(
    --wds-font-line-height-body-medium,
    var(--wsr-text-line-height-medium, 24px)
  )
);
$subtitle-color: var(
  --wds-card-subtitle-color,
  var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
);

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__suffix {
    height: 0;
    display: flex;
    align-items: $suffix-align;
    align-self: $suffix-align;
  }

  &__title-wrapper {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: $title-subtitle-gap;
  }

  &#{&} &__title-wrapper &__subtitle {
    font-size: $subtitle-font-size;
    line-height: $subtitle-line-height;
    color: $subtitle-color;
  }
}