$controls-padding-vertical: var(
  --wds-card-controls-padding-vertical,
  var(--wds-space-400)
);
$controls-padding-horizontal: var(
  --wds-card-controls-padding-horizontal,
  var(--wds-space-600)
);
$header-padding-vertical: var(
  --wds-card-header-padding-vertical,
  var(--wds-space-400)
);
$header-padding-horizontal: var(
  --wds-card-header-padding-horizontal,
  var(--wds-space-600)
);
$header-padding-bottom: var(
  --wds-card-header-padding-bottom,
  var(--wds-space-100)
);
$content-padding-medium-top: var(
  --wds-card-content-padding-medium-top,
  var(--wds-space-600)
);
$content-padding-medium-horizontal: var(
  --wds-card-content-padding-medium-horizontal,
  var(--wds-space-600)
);
$content-padding-medium-bottom: var(
  --wds-card-content-padding-medium-bottom,
  var(--wds-space-600)
);
$content-padding-large: var(
  --wds-card-content-padding-large,
  var(--wds-space-300)
);
$content-padding-empty-state: var(--wds-space-700);
$base-shadow: var(--wds-card-base-shadow, 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0));
$shadow: var(--wds-card-shadow, 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0));

.card {
  box-shadow: $base-shadow;

  &--show-shadow {
    box-shadow: $shadow;
  }

  &__controls {
    padding: $controls-padding-vertical $controls-padding-horizontal;
  }

  & .card-header {
    padding: $header-padding-vertical $header-padding-horizontal;
  }

  & .card-content.card-content--size-medium {
    padding: $content-padding-medium-top $content-padding-medium-horizontal
      $content-padding-medium-bottom;
  }

  & .card-content.card-content--size-large {
    padding: $content-padding-large;
  }

  & .card-content.card-content--empty-state-content {
    padding: $content-padding-empty-state;
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  & .card-header:has(+ .card-content.card-content--size-medium),
  & .card-header:has(+ .card-content.card-content--size-large),
  & .card-header:has(+ .card-divider + .card-content.card-content--size-medium),
  & .card-header:has(+ .card-divider + .card-content.card-content--size-large),
  & .card-header:has(+ * .card-content.card-content--size-medium),
  & .card-header:has(+ * .card-content.card-content--size-large) {
    padding-bottom: $header-padding-bottom;
  }
}