$base-shadow: var(--wds-card-base-shadow, none);
$shadow: var(
  --wds-card-shadow,
  var(
    --wds-shadow-surface-raised,
    var(
      --wsr-shadow20,
      0 2px 4px 0 rgba(22, 45, 61, 0.12),
      0 0 6px 0 rgba(22, 45, 61, 0.12)
    )
  )
);
$header-padding-vertical: var(
  --wds-card-header-padding-vertical,
  var(--wds-space-300, 18px)
);
$header-padding-horizontal: var(
  --wds-card-header-padding-horizontal,
  var(--wds-space-400, 24px)
);
$header-padding-bottom: var(
  --wds-card-header-padding-bottom,
  var(
    --wds-space-300,
    var(--wds-card-header-padding-vertical, var(--wds-space-300, 18px))
  )
);
$controls-padding-vertical: var(
  --wds-card-controls-padding-vertical,
  var(
    --wds-space-300,
    var(--wds-card-header-padding-vertical, var(--wds-space-300, 6px))
  )
);
$controls-padding-horizontal: var(
  --wds-card-controls-padding-horizontal,
  var(
    --wds-space-400,
    var(--wds-card-header-padding-horizontal, var(--wds-space-400, 6px))
  )
);
$content-padding-medium-top: var(
  --wds-card-content-padding-medium-top,
  var(--wds-space-400, 24px)
);
$content-padding-medium-horizontal: var(
  --wds-card-content-padding-medium-horizontal,
  var(--wds-space-400, 24px)
);
$content-padding-medium-bottom: var(
  --wds-card-content-padding-medium-bottom,
  var(--wds-space-400, 24px)
);
$content-padding-large: var(
  --wds-card-content-padding-large,
  var(--wds-space-600, 36px)
);
$content-padding-empty-state: var(--wds-space-700, 42px);

.card {
  position: relative;
  background: var(--wds-color-fill-surface-raised, var(--wsr-color-D80, #ffffff));
  border-radius: var(--wds-border-radius-surface-raised, 8px);
  box-shadow: $base-shadow;

  &--stretch-vertically {
    height: 100%;
    flex-grow: 1;
  }

  &--hide-overflow {
    overflow: hidden;
  }

  &--highlight-focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(
      --wds-outline-focus-outer,
      3px solid var(--wsr-color-B10, #116dff)
    );
    outline-offset: 1px;
  }

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

  &__controls {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    padding: $controls-padding-vertical $controls-padding-horizontal;
  }

  :global(.rtl) &__controls,
  :global([dir='rtl']) &__controls {
    left: 0;
    right: auto;
  }

  & .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;
  }
}