dap-design-system/dist/components.native.css

Official design system for the DÁP (dap.gov.hu)

:root {
  --dds-button-padding-x: var(--dds-spacing-300);
  --dds-button-padding-y: var(--dds-spacing-300);
  --dds-button-border-radius: var(--dds-radius-rounded);
  --dds-button-font-weight: 700;
  --dds-button-line-height: var(--dds-font-line-height-large);
  --dds-button-transition: all 0.2s ease-in-out;
  --dds-button-disabled-opacity: 0.5;
  --dds-button-size-lg: var(--dds-spacing-1200);
  --dds-button-size-md: var(--dds-spacing-1000);
  --dds-button-size-sm: var(--dds-spacing-800);
  --dds-button-size-xs: var(--dds-spacing-600);
  --dds-button-circle-lg: var(--dds-spacing-1200);
  --dds-button-circle-md: var(--dds-spacing-1000);
  --dds-button-circle-sm: var(--dds-spacing-800);
  --dds-button-circle-xs: var(--dds-spacing-600);
  --dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);
  --dds-button-primary-color-bg-hover: var(
    --dds-button-primary-background-hover
  );
  --dds-button-primary-color-bg-active: var(
    --dds-button-primary-background-pressed
  );
  --dds-button-primary-color-bg-disabled: var(
    --dds-button-primary-background-disabled
  );
  --dds-button-primary-color-text: var(--dds-button-primary-text-enabled);
  --dds-button-primary-color-text-disabled: var(
    --dds-button-primary-text-disabled
  );
  --dds-button-primary-inverted-color-bg: var(
    --dds-button-primary-background-inverted-enabled
  );
  --dds-button-primary-inverted-color-bg-hover: var(
    --dds-button-primary-background-inverted-hover
  );
  --dds-button-primary-inverted-color-bg-active: var(
    --dds-button-primary-background-inverted-pressed
  );
  --dds-button-primary-inverted-color-bg-disabled: var(
    --dds-button-primary-background-inverted-disabled
  );
  --dds-button-primary-inverted-color-text: var(
    --dds-button-primary-text-inverted
  );
  --dds-button-primary-inverted-color-text-disabled: var(
    --dds-button-primary-text-inverted-disabled
  );
  --dds-button-outline-color-border: var(--dds-button-outline-border-enabled);
  --dds-button-outline-color-border-hover: var(
    --dds-button-outline-border-hover
  );
  --dds-button-outline-color-border-active: var(
    --dds-button-outline-border-pressed
  );
  --dds-button-outline-color-border-disabled: var(
    --dds-button-outline-border-disabled
  );
  --dds-button-outline-color-text: var(--dds-button-outline-text-enabled);
  --dds-button-outline-color-text-hover: var(--dds-button-outline-text-hover);
  --dds-button-outline-color-text-active: var(
    --dds-button-outline-text-pressed
  );
  --dds-button-outline-color-text-disabled: var(
    --dds-button-outline-text-disabled
  );
  --dds-button-outline-inverted-color-border: var(
    --dds-button-outline-border-inverted-enabled
  );
  --dds-button-outline-inverted-color-border-hover: var(
    --dds-button-outline-border-inverted-hover
  );
  --dds-button-outline-inverted-color-border-active: var(
    --dds-button-outline-border-inverted-pressed
  );
  --dds-button-outline-inverted-color-border-disabled: var(
    --dds-button-outline-border-inverted-disabled
  );
  --dds-button-outline-inverted-color-text: var(
    --dds-button-outline-text-inverted-enabled
  );
  --dds-button-outline-inverted-color-text-hover: var(
    --dds-button-outline-text-inverted-hover
  );
  --dds-button-outline-inverted-color-text-active: var(
    --dds-button-outline-text-inverted-pressed
  );
  --dds-button-outline-inverted-color-text-disabled: var(
    --dds-button-outline-text-inverted-disabled
  );
  --dds-button-subtle-color-bg: var(--dds-button-subtle-background-enabled);
  --dds-button-subtle-color-bg-hover: var(--dds-button-subtle-background-hover);
  --dds-button-subtle-color-bg-active: var(
    --dds-button-subtle-background-pressed
  );
  --dds-button-subtle-color-bg-disabled: var(
    --dds-button-subtle-background-disabled
  );
  --dds-button-subtle-color-border: var(--dds-button-subtle-border-enabled);
  --dds-button-subtle-color-border-hover: var(--dds-button-subtle-border-hover);
  --dds-button-subtle-color-border-active: var(
    --dds-button-subtle-border-pressed
  );
  --dds-button-subtle-color-border-disabled: var(
    --dds-button-subtle-border-disabled
  );
  --dds-button-subtle-color-text: var(--dds-button-subtle-text-enabled);
  --dds-button-subtle-color-text-hover: var(--dds-button-subtle-text-hover);
  --dds-button-subtle-color-text-active: var(--dds-button-subtle-text-pressed);
  --dds-button-subtle-color-text-disabled: var(
    --dds-button-subtle-text-disabled
  );
  --dds-button-subtle-destructive-color-text: var(
    --dds-button-subtle-text-destructive-enabled
  );
  --dds-button-subtle-destructive-color-text-hover: var(
    --dds-button-subtle-text-destructive-hover
  );
  --dds-button-subtle-destructive-color-text-active: var(
    --dds-button-subtle-text-destructive-pressed
  );
  --dds-button-subtle-destructive-color-border: var(
    --dds-button-subtle-border-destructive-enabled
  );
  --dds-button-subtle-destructive-color-border-hover: var(
    --dds-button-subtle-border-destructive-hover
  );
  --dds-button-subtle-destructive-color-border-active: var(
    --dds-button-subtle-border-destructive-pressed
  );
  --dds-button-subtle-destructive-color-bg: var(
    --dds-button-subtle-background-destructive-enabled
  );
  --dds-button-subtle-destructive-color-bg-hover: var(
    --dds-button-subtle-background-destructive-hover
  );
  --dds-button-subtle-destructive-color-bg-active: var(
    --dds-button-subtle-background-destructive-pressed
  );
  --dds-button-clean-color-text: var(--dds-text-link-base);
  --dds-button-clean-color-text-hover: var(--dds-text-link-hover);
  --dds-button-clean-color-text-active: var(--dds-text-link-pressed);
  --dds-button-clean-color-text-disabled: var(--dds-text-neutral-disabled);
  --dds-button-clean-inverted-color-text: var(
    --dds-button-primary-text-inverted
  );
  --dds-button-clean-inverted-color-text-hover: var(
    --dds-button-primary-text-inverted
  );
  --dds-button-clean-inverted-color-text-active: var(
    --dds-button-primary-text-inverted
  );
  --dds-button-clean-inverted-color-text-disabled: var(
    --dds-text-neutral-disabled
  );
  --dds-button-danger-color-bg: var(
    --dds-button-primary-background-destructive-enabled
  );
  --dds-button-danger-color-bg-hover: var(
    --dds-button-primary-background-destructive-hover
  );
  --dds-button-danger-color-bg-active: var(
    --dds-button-primary-background-destructive-pressed
  );
  --dds-button-danger-color-text: var(--dds-button-primary-text-enabled);
  --dds-button-danger-outline-color-border: var(
    --dds-button-outline-border-destructive-enabled
  );
  --dds-button-danger-outline-color-border-hover: var(
    --dds-button-outline-border-destructive-hover
  );
  --dds-button-danger-outline-color-border-active: var(
    --dds-button-outline-border-destructive-pressed
  );
  --dds-button-danger-outline-color-text: var(
    --dds-button-outline-text-destructive-enabled
  );
  --dds-button-danger-outline-color-text-hover: var(
    --dds-button-outline-text-destructive-hover
  );
  --dds-button-danger-outline-color-text-active: var(
    --dds-button-outline-text-destructive-pressed
  );
  --dds-button-subtle-menu-border-radius: var(--dds-radius-small);
  --dds-button-subtle-menu-opened-border-radius: var(--dds-radius-small);
  --dds-button-subtle-menu-opened-border: transparent;
  --dds-button-subtle-menu-opened-background: var(
    --dds-button-subtle-background-neutral-pressed
  );
  --dds-button-subtle-menu-opened-color: var(
    --dds-button-subtle-text-neutral-hover
  );
  --dds-button-subtle-menu-item-color-bg: transparent;
  --dds-button-subtle-menu-item-color-bg-hover: var(
    --dds-transparent-black-subtle
  );
  --dds-button-subtle-menu-item-color-bg-active: var(
    --dds-transparent-black-subtle
  );
  --dds-button-subtle-menu-item-color-text: var(--dds-text-primary-base);
  --dds-button-subtle-menu-item-color-text-hover: var(--dds-text-primary-base);
  --dds-button-subtle-menu-item-color-text-active: var(
    --dds-text-primary-pressed
  );
  --dds-button-subtle-menu-item-color-text-disabled: var(
    --dds-text-primary-base
  );
  --dds-button-subtle-menu-item-padding: var(--dds-spacing-100)
    var(--dds-spacing-200);
  --dds-button-subtle-menu-item-border-radius: var(--dds-radius-small);
  --dds-button-subtle-menu-item-font-weight: var(--dds-font-weight-medium);
  --dds-button-subtle-menu-item-font-size: var(--dds-font-size-base);
  --dds-button-subtle-menu-item-line-height: var(--dds-font-line-height-xlarge);
}

.dds-button {
  outline-color: var(--dds-focus-outer-ring);
  outline-offset: var(--dds-spacing-50);
  outline-width: var(--dds-border-width-large);
  transition-property: all;
  transition-duration: var(--dds-transition-fast);
  transition-timing-function: var(--dds-easing-ease-in-out);
  display: inline-flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  column-gap: var(--dds-spacing-100);
  transition: var(--dds-button-transition);
  border-width: 0;
  border-radius: var(--dds-button-border-radius);
  font-weight: var(--dds-button-font-weight);
  line-height: var(--dds-button-line-height);
  cursor: pointer;
}
.dds-button:focus-visible {
  outline-style: solid;
}
.dds-button .button__text {
  padding: 0 var(--dds-spacing-100);
}
.dds-button .button__text span {
  line-height: var(--dds-button-line-height);
}
.dds-button[disabled], .dds-button.button--disabled {
  opacity: var(--dds-button-disabled-opacity);
  cursor: not-allowed;
}
.dds-button[disabled]:focus-visible, .dds-button.button--disabled:focus-visible {
  outline-style: solid;
}
.dds-button[disabled] > *, .dds-button.button--disabled > * {
  pointer-events: none;
}
.dds-button.dds-button--loading .button__spinner {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  animation: dds-spin 1s linear infinite;
}
.dds-button.dds-button--loading .button__text {
  opacity: 0;
}
.dds-button--lg {
  min-width: var(--dds-spacing-2400);
  height: var(--dds-button-size-lg);
  padding: var(--dds-button-padding-y) var(--dds-button-padding-x);
  font-size: 1.125rem;
}
.dds-button--lg.dds-button--circle {
  width: var(--dds-button-circle-lg);
  min-width: 0;
  height: var(--dds-button-circle-lg);
  padding: 0;
}
.dds-button--md {
  min-width: var(--dds-spacing-2000);
  height: var(--dds-button-size-md);
  padding: var(--dds-button-padding-y) var(--dds-button-padding-x);
  font-size: 1rem;
}
.dds-button--md.dds-button--circle {
  width: var(--dds-button-circle-md);
  min-width: 0;
  max-width: var(--dds-button-circle-md);
  height: var(--dds-button-circle-md);
  padding: 0;
}
.dds-button--sm {
  min-width: var(--dds-spacing-1200);
  height: var(--dds-button-size-sm);
  padding: var(--dds-button-padding-y) var(--dds-button-padding-x);
  font-size: 0.875rem;
}
.dds-button--sm.dds-button--circle {
  width: var(--dds-button-circle-sm);
  min-width: 0;
  max-width: var(--dds-button-circle-sm);
  height: var(--dds-button-circle-sm);
  padding: 3px;
}
.dds-button--xs {
  min-width: var(--dds-spacing-1200);
  height: var(--dds-button-size-xs);
  padding: var(--dds-button-padding-y) var(--dds-button-padding-x);
  font-size: var(--dds-font-xs);
}
.dds-button--xs.dds-button--circle {
  width: var(--dds-button-circle-xs);
  min-width: 0;
  max-width: var(--dds-button-circle-xs);
  height: var(--dds-button-circle-xs);
  padding: 3px;
}
.dds-button--icon {
  border-width: 0;
  background-color: var(--dds-black-5);
  color: var(--dds-icon-neutral-base);
}
.dds-button--icon:hover {
  background-color: var(--dds-black-10);
}
.dds-button--icon:active {
  background-color: var(--dds-black-20);
}
.dds-button--icon.disabled {
  border-width: 0;
  background-color: transparent;
  cursor: not-allowed;
}
.dds-button--icon.disabled:hover {
  background-color: transparent;
}
.dds-button--primary {
  background-color: var(--dds-button-primary-color-bg);
  color: var(--dds-button-primary-color-text);
}
.dds-button--primary:hover {
  background-color: var(--dds-button-primary-color-bg-hover);
}
.dds-button--primary:active {
  background-color: var(--dds-button-primary-color-bg-active);
}
.dds-button--primary[disabled], .dds-button--primary.button--disabled {
  background-color: var(--dds-button-primary-color-bg-disabled);
  color: var(--dds-button-primary-color-text-disabled);
}
.dds-button--primary.dds-link {
  color: var(--dds-button-primary-color-text);
  text-decoration: none;
}
.dds-button--primary.dds-link:hover {
  color: var(--dds-button-primary-color-text);
}
.dds-button--primary.dds-link:active {
  color: var(--dds-button-primary-color-text);
}
.dds-button--primary.dds-button--active {
  background-color: var(--dds-button-primary-color-bg-hover);
}
.dds-button--primary-inverted {
  --dds-focus-outer-ring: var(--dds-focus-inner-ring);
  background-color: var(--dds-button-primary-inverted-color-bg);
  color: var(--dds-button-primary-inverted-color-text);
}
.dds-button--primary-inverted:hover {
  background-color: var(--dds-button-primary-inverted-color-bg-hover);
}
.dds-button--primary-inverted:active {
  background-color: var(--dds-button-primary-inverted-color-bg-active);
}
.dds-button--primary-inverted[disabled], .dds-button--primary-inverted.button--disabled {
  background-color: var(--dds-button-primary-inverted-color-bg-disabled);
  color: var(--dds-button-primary-inverted-color-text-disabled);
}
.dds-button--primary-inverted.dds-link {
  color: var(--dds-button-primary-inverted-color-text);
  text-decoration: none;
}
.dds-button--primary-inverted.dds-link:hover {
  color: var(--dds-button-primary-inverted-color-text);
}
.dds-button--primary-inverted.dds-link:active {
  color: var(--dds-button-primary-inverted-color-text);
}
.dds-button--primary-inverted.dds-button--active {
  background-color: var(--dds-button-primary-inverted-color-bg-hover);
}
.dds-button--primary.dds-button--danger, .dds-button--primary-inverted.dds-button--danger {
  background-color: var(--dds-button-danger-color-bg);
  color: var(--dds-button-danger-color-text);
}
.dds-button--primary.dds-button--danger:hover, .dds-button--primary-inverted.dds-button--danger:hover {
  background-color: var(--dds-button-danger-color-bg-hover);
}
.dds-button--primary.dds-button--danger:active, .dds-button--primary-inverted.dds-button--danger:active {
  background-color: var(--dds-button-danger-color-bg-active);
}
.dds-button--primary[disabled], .dds-button--primary.button--disabled, .dds-button--primary-inverted[disabled], .dds-button--primary-inverted.button--disabled {
  background-color: var(--dds-button-primary-color-bg-disabled);
  color: var(--dds-button-primary-color-text-disabled);
}
.dds-button--primary[disabled]:hover, .dds-button--primary.button--disabled:hover, .dds-button--primary-inverted[disabled]:hover, .dds-button--primary-inverted.button--disabled:hover {
  background-color: var(--dds-button-primary-color-bg-disabled);
  color: var(--dds-button-primary-color-text-disabled);
}
.dds-button--primary[disabled]:active, .dds-button--primary.button--disabled:active, .dds-button--primary-inverted[disabled]:active, .dds-button--primary-inverted.button--disabled:active {
  background-color: var(--dds-button-primary-color-bg-disabled);
  color: var(--dds-button-primary-color-text-disabled);
}
.dds-button--outline {
  border-width: var(--dds-border-width-large);
  border-style: solid;
  border-color: var(--dds-button-outline-color-border);
  background-color: transparent;
  color: var(--dds-button-outline-color-text);
}
.dds-button--outline:hover {
  border-color: var(--dds-button-outline-color-border-hover);
  color: var(--dds-button-outline-color-text-hover);
}
.dds-button--outline:active {
  border-color: var(--dds-button-outline-color-border-active);
  color: var(--dds-button-outline-color-text-active);
}
.dds-button--outline[disabled], .dds-button--outline.button--disabled {
  border-color: var(--dds-button-outline-color-border-disabled);
  color: var(--dds-button-outline-color-text-disabled);
}
.dds-button--outline.dds-link {
  color: var(--dds-button-outline-color-text);
  text-decoration: none;
}
.dds-button--outline.dds-link:hover {
  color: var(--dds-button-outline-color-text-hover);
}
.dds-button--outline.dds-link:active {
  color: var(--dds-button-outline-color-text-active);
}
.dds-button--outline.dds-button--active {
  border-color: var(--dds-button-outline-color-border-hover);
  color: var(--dds-button-outline-color-text-hover);
}
.dds-button--outline-inverted {
  --dds-focus-outer-ring: var(--dds-focus-inner-ring);
  border-width: var(--dds-border-width-large);
  border-style: solid;
  border-color: var(--dds-button-outline-inverted-color-border);
  background-color: transparent;
  color: var(--dds-button-outline-inverted-color-text);
}
.dds-button--outline-inverted:hover {
  border-color: var(--dds-button-outline-inverted-color-border-hover);
  color: var(--dds-button-outline-inverted-color-text-hover);
}
.dds-button--outline-inverted:active {
  border-color: var(--dds-button-outline-inverted-color-border-active);
  color: var(--dds-button-outline-inverted-color-text-active);
}
.dds-button--outline-inverted[disabled], .dds-button--outline-inverted.button--disabled {
  border-color: var(--dds-button-outline-inverted-color-border-disabled);
  color: var(--dds-button-outline-inverted-color-text-disabled);
}
.dds-button--outline-inverted.dds-link {
  color: var(--dds-button-outline-inverted-color-text);
  text-decoration: none;
}
.dds-button--outline-inverted.dds-link:hover {
  color: var(--dds-button-outline-inverted-color-text-hover);
}
.dds-button--outline-inverted.dds-link:active {
  color: var(--dds-button-outline-inverted-color-text-active);
}
.dds-button--outline-inverted.dds-button--active {
  border-color: var(--dds-button-outline-inverted-color-border-hover);
  color: var(--dds-button-outline-inverted-color-text-hover);
}
.dds-button--outline.dds-button--danger, .dds-button--outline-inverted.dds-button--danger {
  border-width: var(--dds-border-width-large);
  border-style: solid;
  border-color: var(--dds-button-danger-outline-color-border);
  background-color: transparent;
  color: var(--dds-button-danger-outline-color-text);
}
.dds-button--outline.dds-button--danger:hover, .dds-button--outline-inverted.dds-button--danger:hover {
  border-color: var(--dds-button-danger-outline-color-border-hover);
  color: var(--dds-button-danger-outline-color-text-hover);
}
.dds-button--outline.dds-button--danger:active, .dds-button--outline-inverted.dds-button--danger:active {
  border-color: var(--dds-button-danger-outline-color-border-active);
  color: var(--dds-button-danger-outline-color-text-active);
}
.dds-button--outline[disabled], .dds-button--outline.button--disabled, .dds-button--outline-inverted[disabled], .dds-button--outline-inverted.button--disabled {
  border-width: var(--dds-border-width-large);
  border-style: solid;
  border-color: var(--dds-button-outline-color-border-disabled);
  background-color: transparent;
  color: var(--dds-button-outline-color-text-disabled);
}
.dds-button--subtle {
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-color-border);
  background-color: var(--dds-button-subtle-color-bg);
  color: var(--dds-button-subtle-color-text);
}
.dds-button--subtle:hover {
  border-color: var(--dds-button-subtle-color-border-hover);
  background-color: var(--dds-button-subtle-color-bg-hover);
  color: var(--dds-button-subtle-color-text-hover);
}
.dds-button--subtle:active {
  border-color: var(--dds-button-subtle-color-border-active);
  background-color: var(--dds-button-subtle-color-bg-active);
  color: var(--dds-button-subtle-color-text-active);
}
.dds-button--subtle[disabled], .dds-button--subtle.button--disabled {
  border-color: var(--dds-button-subtle-color-border-disabled);
  background-color: var(--dds-button-subtle-color-bg-disabled);
  color: var(--dds-button-subtle-color-text-disabled);
}
.dds-button--subtle.dds-link {
  color: var(--dds-button-subtle-color-text);
  text-decoration: none;
}
.dds-button--subtle.dds-link:hover {
  color: var(--dds-button-subtle-color-text-hover);
}
.dds-button--subtle.dds-link:active {
  color: var(--dds-button-subtle-color-text-active);
}
.dds-button--subtle.dds-button--danger {
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-destructive-color-border);
  background-color: var(--dds-button-subtle-destructive-color-bg);
  color: var(--dds-button-subtle-destructive-color-text);
}
.dds-button--subtle.dds-button--danger:hover {
  border-color: var(--dds-button-subtle-destructive-color-border-hover);
  background-color: var(--dds-button-subtle-destructive-color-bg-hover);
  color: var(--dds-button-subtle-destructive-color-text-hover);
}
.dds-button--subtle.dds-button--danger:active {
  border-color: var(--dds-button-subtle-destructive-color-border-active);
  background-color: var(--dds-button-subtle-destructive-color-bg-active);
  color: var(--dds-button-subtle-destructive-color-text-active);
}
.dds-button--subtle.dds-button--active {
  border-color: var(--dds-button-subtle-color-border-hover);
  background-color: var(--dds-button-subtle-color-bg-hover);
  color: var(--dds-button-subtle-color-text-hover);
}
.dds-button--subtle-neutral {
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-border-neutral-enabled);
  background-color: var(--dds-button-subtle-background-neutral-enabled);
  color: var(--dds-button-subtle-text-neutral-enabled);
}
.dds-button--subtle-neutral:hover {
  border-color: var(--dds-button-subtle-border-neutral-hover);
  background-color: var(--dds-button-subtle-background-neutral-hover);
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-neutral:active {
  border-color: var(--dds-button-subtle-border-neutral-pressed);
  background-color: var(--dds-button-subtle-background-neutral-pressed);
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-neutral.dds-link {
  color: var(--dds-button-subtle-text-neutral-enabled);
  text-decoration: none;
}
.dds-button--subtle-neutral.dds-link:hover {
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-neutral.dds-link:active {
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-neutral.dds-button--danger {
  border: var(--dds-border-width-base) solid transparent;
  background-color: transparent;
  color: var(--dds-button-subtle-destructive-color-text);
}
.dds-button--subtle-neutral.dds-button--danger:hover {
  border-color: var(--dds-button-subtle-destructive-color-border-hover);
  background-color: var(--dds-button-subtle-destructive-color-bg-hover);
  color: var(--dds-button-subtle-destructive-color-text-hover);
}
.dds-button--subtle-neutral.dds-button--danger:active {
  border-color: var(--dds-button-subtle-destructive-color-border-active);
  background-color: var(--dds-button-subtle-destructive-color-bg-active);
  color: var(--dds-button-subtle-destructive-color-text-active);
}
.dds-button--subtle-neutral.dds-button--active {
  border-color: var(--dds-button-subtle-border-neutral-hover);
  background-color: var(--dds-button-subtle-background-neutral-hover);
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-menu {
  border: var(--dds-border-width-base) solid transparent;
  border-radius: var(--dds-button-subtle-menu-border-radius);
  background-color: transparent;
  color: var(--dds-button-subtle-text-neutral-enabled);
}
.dds-button--subtle-menu:hover {
  border-color: transparent;
  background-color: var(--dds-button-subtle-background-neutral-hover);
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-menu:active {
  border-color: transparent;
  background-color: var(--dds-button-subtle-background-neutral-pressed);
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-menu.dds-link {
  color: var(--dds-button-subtle-text-neutral-enabled);
  text-decoration: none;
}
.dds-button--subtle-menu.dds-link:hover {
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-menu.dds-link:active {
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-menu.dds-button--danger {
  border: var(--dds-border-width-base) solid transparent;
  background-color: transparent;
  color: var(--dds-button-subtle-destructive-color-text);
}
.dds-button--subtle-menu.dds-button--danger:hover {
  border-color: var(--dds-button-subtle-destructive-color-border-hover);
  background-color: var(--dds-button-subtle-destructive-color-bg-hover);
  color: var(--dds-button-subtle-destructive-color-text-hover);
}
.dds-button--subtle-menu.dds-button--danger:active {
  border-color: var(--dds-button-subtle-destructive-color-border-active);
  background-color: var(--dds-button-subtle-destructive-color-bg-active);
  color: var(--dds-button-subtle-destructive-color-text-active);
}
.dds-button--subtle-menu.dds-button--active {
  border-color: transparent;
  background-color: var(--dds-button-subtle-background-neutral-pressed);
  color: var(--dds-button-subtle-text-neutral-hover);
}
.dds-button--subtle-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: auto;
  height: auto;
  padding: var(--dds-button-subtle-menu-item-padding);
  border: 0;
  border-radius: var(--dds-button-subtle-menu-item-border-radius);
  background-color: var(--dds-button-subtle-menu-item-color-bg);
  color: var(--dds-button-subtle-menu-item-color-text);
  font-family: var(--dds-font-type);
  font-size: var(--dds-button-subtle-menu-item-font-size);
  font-weight: var(--dds-button-subtle-menu-item-font-weight);
  line-height: var(--dds-button-subtle-menu-item-line-height);
  text-align: left;
  text-decoration: none;
}
.dds-button--subtle-menu-item .button__text {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  gap: var(--dds-spacing-100);
}
.dds-button--subtle-menu-item:hover:not([disabled], .button--disabled) {
  background-color: var(--dds-button-subtle-menu-item-color-bg-hover);
  color: var(--dds-button-subtle-menu-item-color-text-hover);
}
.dds-button--subtle-menu-item:active:not([disabled], .button--disabled) {
  background-color: var(--dds-button-subtle-menu-item-color-bg-active);
  color: var(--dds-button-subtle-menu-item-color-text-active);
}
.dds-button--subtle-menu-item:focus-visible:not([disabled], .button--disabled) {
  outline-style: solid;
}
.dds-button--subtle-menu-item.dds-button--active {
  background-color: var(--dds-button-subtle-menu-item-color-bg-hover);
  color: var(--dds-button-subtle-menu-item-color-text);
}
.dds-button--subtle-menu-item[disabled], .dds-button--subtle-menu-item.button--disabled {
  opacity: 0.5;
  color: var(--dds-button-subtle-menu-item-color-text-disabled);
  cursor: not-allowed;
}
.dds-button--subtle-menu-item.dds-link {
  color: var(--dds-button-subtle-menu-item-color-text);
  text-decoration: none;
}
.dds-button--subtle-menu-item.dds-link:hover {
  color: var(--dds-button-subtle-menu-item-color-text-hover);
}
.dds-button--subtle-menu-item.dds-link:active {
  color: var(--dds-button-subtle-menu-item-color-text-active);
}
.dds-button--subtle-quiet {
  border: var(--dds-border-width-base) solid transparent;
  background-color: transparent;
  color: var(--dds-button-subtle-color-text);
}
.dds-button--subtle-quiet:hover {
  border-color: var(--dds-button-subtle-color-border-hover);
  background-color: var(--dds-button-subtle-color-bg-hover);
  color: var(--dds-button-subtle-color-text-hover);
}
.dds-button--subtle-quiet:active {
  border-color: var(--dds-button-subtle-color-border-active);
  background-color: var(--dds-button-subtle-color-bg-active);
  color: var(--dds-button-subtle-color-text-active);
}
.dds-button--subtle-quiet[disabled], .dds-button--subtle-quiet.button--disabled {
  border: var(--dds-border-width-base) solid transparent;
  background-color: transparent;
  color: var(--dds-button-subtle-color-text-disabled);
}
.dds-button--subtle-quiet.dds-link {
  color: var(--dds-button-subtle-color-text);
  text-decoration: none;
}
.dds-button--subtle-quiet.dds-link:hover {
  color: var(--dds-button-subtle-color-text-hover);
}
.dds-button--subtle-quiet.dds-link:active {
  color: var(--dds-button-subtle-color-text-active);
}
.dds-button--subtle-quiet.dds-button--danger {
  border: var(--dds-border-width-base) solid transparent;
  background-color: transparent;
  color: var(--dds-button-subtle-destructive-color-text);
}
.dds-button--subtle-quiet.dds-button--danger:hover {
  border-color: var(--dds-button-subtle-destructive-color-border-hover);
  background-color: var(--dds-button-subtle-destructive-color-bg-hover);
  color: var(--dds-button-subtle-destructive-color-text-hover);
}
.dds-button--subtle-quiet.dds-button--danger:active {
  border-color: var(--dds-button-subtle-destructive-color-border-active);
  background-color: var(--dds-button-subtle-destructive-color-bg-active);
  color: var(--dds-button-subtle-destructive-color-text-active);
}
.dds-button--subtle-quiet.dds-button--active {
  border-color: var(--dds-button-subtle-color-border-hover);
  background-color: var(--dds-button-subtle-color-bg-hover);
  color: var(--dds-button-subtle-color-text-hover);
}
.dds-button--subtle-inverted {
  --dds-focus-outer-ring: var(--dds-focus-inner-ring);
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);
  background-color: var(--dds-button-subtle-background-inverted-enabled);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-inverted:hover {
  background-color: var(--dds-button-subtle-background-inverted-hover);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-inverted:active {
  background-color: var(--dds-button-subtle-background-inverted-pressed);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-inverted:focus-visible {
  border-color: var(--dds-focus-inner-ring);
}
.dds-button--subtle-inverted.dds-link {
  color: var(--dds-button-subtle-text-enabled);
  text-decoration: none;
}
.dds-button--subtle-inverted.dds-link:hover {
  color: var(--dds-button-subtle-text-hover);
}
.dds-button--subtle-inverted.dds-link:active {
  color: var(--dds-button-subtle-text-pressed);
}
.dds-button--subtle-inverted.dds-button--active {
  background-color: var(--dds-button-subtle-background-inverted-hover);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-quiet-inverted {
  --dds-focus-outer-ring: var(--dds-focus-inner-ring);
  border: var(--dds-border-width-base) solid transparent;
  background-color: transparent;
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-quiet-inverted:hover {
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);
  background-color: var(--dds-button-subtle-background-inverted-hover);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-quiet-inverted:active {
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);
  background-color: var(--dds-button-subtle-background-inverted-pressed);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--subtle-quiet-inverted:focus-visible {
  border-color: var(--dds-focus-inner-ring);
}
.dds-button--subtle-quiet-inverted.dds-link {
  color: var(--dds-button-subtle-text-enabled);
  text-decoration: none;
}
.dds-button--subtle-quiet-inverted.dds-link:hover {
  color: var(--dds-button-subtle-text-hover);
}
.dds-button--subtle-quiet-inverted.dds-link:active {
  color: var(--dds-button-subtle-text-pressed);
}
.dds-button--subtle-quiet-inverted.dds-button--active {
  border: var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);
  background-color: var(--dds-button-subtle-background-inverted-hover);
  color: var(--dds-button-subtle-text-inverted);
}
.dds-button--clean {
  width: auto;
  min-width: auto;
  height: auto;
  padding: 0;
  border-width: 0;
  background-color: transparent;
  color: var(--dds-button-clean-text);
}
.dds-button--clean .button__text {
  padding: 0;
}
.dds-button--clean:hover {
  color: var(--dds-button-clean-text-hover);
}
.dds-button--clean:active {
  color: var(--dds-button-clean-text-active);
}
.dds-button--clean[disabled], .dds-button--clean.button--disabled {
  color: var(--dds-button-clean-text-disabled);
}
.dds-button--clean-inverted {
  --dds-focus-outer-ring: var(--dds-focus-inner-ring);
  width: auto;
  min-width: auto;
  height: auto;
  padding: 0;
  border-width: 0;
  background-color: transparent;
  color: var(--dds-button-clean-inverted-text);
}
.dds-button--clean-inverted .button__text {
  padding: 0;
}
.dds-button--clean-inverted:hover {
  color: var(--dds-button-clean-inverted-text-hover);
}
.dds-button--clean-inverted:active {
  color: var(--dds-button-clean-inverted-text-active);
}
.dds-button--clean-inverted[disabled], .dds-button--clean-inverted.button--disabled {
  color: var(--dds-button-clean-inverted-text-disabled);
}
.dds-button--clean.dds-button--danger, .dds-button--clean-inverted.dds-button--danger {
  border-width: 0;
  background-color: transparent;
  color: var(--dds-button-danger-clean-text);
}
.dds-button--clean.dds-button--danger:hover, .dds-button--clean-inverted.dds-button--danger:hover {
  color: var(--dds-button-danger-clean-text-hover);
}
.dds-button--clean.dds-button--danger:active, .dds-button--clean-inverted.dds-button--danger:active {
  color: var(--dds-button-danger-clean-text-active);
}
.dds-button--clean[disabled], .dds-button--clean.button--disabled, .dds-button--clean-inverted[disabled], .dds-button--clean-inverted.button--disabled {
  border-width: 0;
  background-color: transparent;
  color: var(--dds-text-neutral-disabled);
}
.dds-button--clean[disabled]:hover, .dds-button--clean.button--disabled:hover, .dds-button--clean-inverted[disabled]:hover, .dds-button--clean-inverted.button--disabled:hover {
  background-color: transparent;
  color: var(--dds-text-neutral-disabled);
}
.dds-button--xs {
  padding: var(--dds-spacing-150) var(--dds-spacing-300);
}
.dds-button--xs.dds-button::after {
  width: var(--dds-spacing-300);
  height: var(--dds-spacing-300);
  border-width: 1.5px;
}
.dds-button--sm {
  padding: var(--dds-spacing-200) var(--dds-spacing-300);
}
.dds-button--sm.dds-button::after {
  width: var(--dds-spacing-300);
  height: var(--dds-spacing-300);
  border-width: 1.5px;
}
.dds-button--md {
  padding: var(--dds-spacing-300) var(--dds-spacing-400);
}
.dds-button--md.dds-button::after {
  width: var(--dds-spacing-400);
  height: var(--dds-spacing-400);
}
.dds-button--lg {
  padding: var(--dds-spacing-300) var(--dds-spacing-500);
}
.dds-button--lg.dds-button::after {
  width: var(--dds-spacing-500);
  height: var(--dds-spacing-500);
}
.dds-button--loading > * {
  display: none;
  pointer-events: none;
}
.dds-button--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
  border: 2px solid currentcolor;
  border-radius: 50%;
  border-top-color: transparent;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.high-contrast-theme .dds-button {
  border: 1px solid var(--dds-border-neutral-transparent-interactive, #fff500);
}
.high-contrast-theme .dds-button:hover {
  outline: 1px solid var(--dds-border-neutral-transparent-interactive, #fff500);
  outline-offset: -2px;
}
.high-contrast-theme .dds-button:active {
  outline: 1px solid var(--dds-border-neutral-transparent-interactive, #fff500);
  outline-offset: -2px;
}

:root {
  --dds-card-border-radius: var(--dds-radius-large);
  --dds-card-border-width: var(--dds-border-width-base);
  --dds-card-border-color: var(--dds-border-neutral-divider);
  --dds-card-background: var(--dds-background-neutral-base);
  --dds-card-hover-border-color: var(--dds-border-brand-base);
  --dds-card-active-border-color: var(--dds-border-brand-medium);
  --dds-card-shadow: none;
  --dds-card-hover-shadow: none;
  --dds-card-transition-duration: var(--dds-transition-medium);
  --dds-card-transition-timing: var(--dds-easing-ease-in-out);
  --dds-card-title-color: var(--dds-text-neutral-strong);
  --dds-card-title-font-weight: var(--dds-font-weight-bold);
  --dds-card-title-line-height: var(--dds-font-line-height-large);
  --dds-card-title-margin-bottom: var(--dds-spacing-100);
  /* Small size spacing */
  --dds-card-title-sm-padding-x: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-title-sm-padding-bottom: var(--dds-spacing-100);
  --dds-card-title-sm-spacing-top: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-title-sm-spacing-bottom: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  /* Medium size spacing */
  --dds-card-title-md-padding-x: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-title-md-padding-bottom: var(--dds-spacing-100);
  --dds-card-title-md-spacing-top: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-title-md-spacing-bottom: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  /* Large size spacing */
  --dds-card-title-lg-padding-x: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-title-lg-padding-bottom: var(--dds-spacing-100);
  --dds-card-title-lg-spacing-top: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-title-lg-spacing-bottom: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-subtitle-color: var(--dds-text-neutral-subtle);
  --dds-card-subtitle-font-size: var(--dds-font-xs);
  --dds-card-subtitle-font-weight: var(--dds-font-weight-bold);
  --dds-card-subtitle-line-height: var(--dds-font-line-height-large);
  --dds-card-subtitle-padding-sm: 0
    var(--dds-card-padding, var(--dds-spacing-400));
  --dds-card-subtitle-padding-md: 0
    var(--dds-card-padding, var(--dds-spacing-400));
  --dds-card-subtitle-padding-lg: 0
    var(--dds-card-padding, var(--dds-spacing-600));
  --dds-card-subtitle-margin-sm: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-margin-md: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-margin-lg: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-subtitle-spacing-top-sm: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-spacing-top-md: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-spacing-top-lg: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-subtitle-spacing-bottom-sm: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-spacing-bottom-md: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-spacing-bottom-lg: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-subtitle-spacing-both-sm: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-spacing-both-md: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-subtitle-spacing-both-lg: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-image-width: 100%;
  --dds-card-image-height: auto;
  --dds-card-image-object-fit: cover;
  --dds-card-image-background-position: center;
  --dds-card-image-background-size: cover;
  --dds-card-image-background-repeat: no-repeat;
  --dds-card-content-padding: 0;
  --dds-card-content-margin: 0;
  --dds-card-content-font-size: var(--dds-font-base);
  --dds-card-content-line-height: var(--dds-font-line-height-xlarge);
  --dds-card-content-spacing-lg: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-content-spacing-md: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-content-spacing-sm: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-content-spacing-top: 0;
  --dds-card-content-spacing-bottom: 0;
  --dds-card-actions-gap: var(--dds-spacing-200);
  --dds-card-actions-padding-lg: var(
    --dds-card-padding,
    var(--dds-spacing-600)
  );
  --dds-card-actions-padding-md: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-actions-padding-sm: var(
    --dds-card-padding,
    var(--dds-spacing-400)
  );
  --dds-card-actions-margin-lg: var(--dds-card-padding, var(--dds-spacing-600));
  --dds-card-actions-margin-md: var(--dds-card-padding, var(--dds-spacing-400));
  --dds-card-actions-margin-sm: var(--dds-card-padding, var(--dds-spacing-400));
}

.dds-card {
  outline-color: var(--dds-focus-outer-ring);
  outline-offset: var(--dds-spacing-50);
  outline-width: var(--dds-border-width-large);
  transition-property: all;
  transition-duration: var(--dds-transition-fast);
  transition-timing-function: var(--dds-easing-ease-in-out);
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  transition: all var(--dds-card-transition-duration) var(--dds-card-transition-timing);
  border-width: var(--dds-card-border-width);
  border-style: solid;
  border-radius: var(--dds-card-border-radius);
  border-color: var(--dds-card-border-color);
  background: var(--dds-card-background);
  background-clip: padding-box;
  box-shadow: var(--dds-card-shadow);
}
.dds-card--disabled {
  pointer-events: none;
}
.dds-card--no-border {
  border-color: transparent;
}
.dds-card--no-padding {
  padding: 0;
}
.dds-card--interactive {
  cursor: pointer;
}
.dds-card--interactive:hover {
  border-color: var(--dds-card-hover-border-color);
  box-shadow: var(--dds-card-hover-shadow);
}
.dds-card--interactive:active {
  border-color: var(--dds-card-active-border-color);
}
.dds-card--interactive:focus-visible {
  outline-style: solid;
}

.dds-card-title {
  margin-bottom: var(--dds-card-title-margin-bottom);
  font-weight: var(--dds-card-title-font-weight);
  line-height: var(--dds-card-title-line-height);
  display: block;
  margin: 0;
  color: var(--dds-card-title-color);
}
.dds-card-title--sm {
  padding: 0 var(--dds-card-title-sm-padding-x) var(--dds-card-title-sm-padding-bottom);
  font-size: var(--dds-font-sm);
}
.dds-card-title--sm.dds-card-title-spacing--top, .dds-card-title--sm.card-title-spacing--top {
  margin-top: var(--dds-card-title-sm-spacing-top);
}
.dds-card-title--sm.dds-card-title-spacing--bottom, .dds-card-title--sm.card-title-spacing--bottom {
  margin-bottom: var(--dds-card-title-sm-spacing-bottom);
}
.dds-card-title--sm.dds-card-title-spacing--both, .dds-card-title--sm.card-title-spacing--both {
  margin-top: var(--dds-card-title-sm-spacing-top);
  margin-bottom: var(--dds-card-title-sm-spacing-bottom);
}
.dds-card-title--md {
  padding: 0 var(--dds-card-title-md-padding-x) var(--dds-card-title-md-padding-bottom);
  font-size: var(--dds-font-xl);
}
.dds-card-title--md.dds-card-title-spacing--top, .dds-card-title--md.card-title-spacing--top {
  margin-top: var(--dds-card-title-md-spacing-top);
}
.dds-card-title--md.dds-card-title-spacing--bottom, .dds-card-title--md.card-title-spacing--bottom {
  margin-bottom: var(--dds-card-title-md-spacing-bottom);
}
.dds-card-title--md.dds-card-title-spacing--both, .dds-card-title--md.card-title-spacing--both {
  margin-top: var(--dds-card-title-md-spacing-top);
  margin-bottom: var(--dds-card-title-md-spacing-bottom);
}
.dds-card-title--lg {
  padding: 0 var(--dds-card-title-lg-padding-x) var(--dds-card-title-lg-padding-bottom);
  font-size: var(--dds-font-xl);
}
.dds-card-title--lg.dds-card-title-spacing--top, .dds-card-title--lg.card-title-spacing--top {
  margin-top: var(--dds-card-title-lg-spacing-top);
}
.dds-card-title--lg.dds-card-title-spacing--bottom, .dds-card-title--lg.card-title-spacing--bottom {
  margin-bottom: var(--dds-card-title-lg-spacing-bottom);
}
.dds-card-title--lg.dds-card-title-spacing--both, .dds-card-title--lg.card-title-spacing--both {
  margin-top: var(--dds-card-title-lg-spacing-top);
  margin-bottom: var(--dds-card-title-lg-spacing-bottom);
}
.dds-card-title--no-padding {
  padding-right: 0;
  padding-left: 0;
}

.dds-card-subtitle {
  font-weight: var(--dds-card-subtitle-font-weight);
  line-height: var(--dds-card-subtitle-line-height);
  display: block;
  margin: 0;
  color: var(--dds-card-subtitle-color);
  font-size: var(--dds-card-subtitle-font-size);
}
.dds-card-subtitle--sm {
  padding: var(--dds-card-subtitle-padding-sm);
}
.dds-card-subtitle--sm.dds-card-subtitle-spacing--top, .dds-card-subtitle--sm.card-subtitle-spacing--top {
  margin-top: var(--dds-card-subtitle-spacing-top-sm);
}
.dds-card-subtitle--sm.dds-card-subtitle-spacing--bottom, .dds-card-subtitle--sm.card-subtitle-spacing--bottom {
  margin-bottom: var(--dds-card-subtitle-spacing-bottom-sm);
}
.dds-card-subtitle--sm.dds-card-subtitle-spacing--both, .dds-card-subtitle--sm.card-subtitle-spacing--both {
  margin-top: var(--dds-card-subtitle-spacing-both-sm);
  margin-bottom: var(--dds-card-subtitle-spacing-both-sm);
}
.dds-card-subtitle--md {
  padding: var(--dds-card-subtitle-padding-md);
  font-size: var(--dds-font-sm);
}
.dds-card-subtitle--md.dds-card-subtitle-spacing--top, .dds-card-subtitle--md.card-subtitle-spacing--top {
  margin-top: var(--dds-card-subtitle-spacing-top-md);
}
.dds-card-subtitle--md.dds-card-subtitle-spacing--bottom, .dds-card-subtitle--md.card-subtitle-spacing--bottom {
  margin-bottom: var(--dds-card-subtitle-spacing-bottom-md);
}
.dds-card-subtitle--md.dds-card-subtitle-spacing--both, .dds-card-subtitle--md.card-subtitle-spacing--both {
  margin-top: var(--dds-card-subtitle-spacing-both-md);
  margin-bottom: var(--dds-card-subtitle-spacing-both-md);
}
.dds-card-subtitle--lg {
  padding: var(--dds-card-subtitle-padding-lg);
}
.dds-card-subtitle--lg.dds-card-subtitle-spacing--top, .dds-card-subtitle--lg.card-subtitle-spacing--top {
  margin-top: var(--dds-card-subtitle-spacing-top-lg);
}
.dds-card-subtitle--lg.dds-card-subtitle-spacing--bottom, .dds-card-subtitle--lg.card-subtitle-spacing--bottom {
  margin-bottom: var(--dds-card-subtitle-spacing-bottom-lg);
}
.dds-card-subtitle--lg.dds-card-subtitle-spacing--both, .dds-card-subtitle--lg.card-subtitle-spacing--both {
  margin-top: var(--dds-card-subtitle-spacing-both-lg);
  margin-bottom: var(--dds-card-subtitle-spacing-both-lg);
}

.dds-card-image {
  display: block;
  width: var(--dds-card-image-width);
  height: var(--dds-card-image-height);
  object-fit: var(--dds-card-image-object-fit);
  background-repeat: var(--dds-card-image-background-repeat);
  background-position: var(--dds-card-image-background-position);
  background-size: var(--dds-card-image-background-size);
}

.dds-card-content {
  display: flex;
  flex-direction: column;
  line-height: var(--dds-card-content-line-height);
}
.dds-card-content--lg {
  padding: 0 var(--dds-card-content-spacing-lg) 0 var(--dds-card-content-spacing-lg);
  font-size: var(--dds-card-content-font-size);
}
.dds-card-content--lg.dds-card-content-spacing--top, .dds-card-content--lg.card-content-spacing--top {
  margin-top: var(--dds-card-content-spacing-lg);
}
.dds-card-content--lg.dds-card-content-spacing--bottom, .dds-card-content--lg.card-content-spacing--bottom {
  margin-bottom: var(--dds-card-content-spacing-lg);
}
.dds-card-content--lg.dds-card-content-spacing--both, .dds-card-content--lg.card-content-spacing--both {
  margin-top: var(--dds-card-content-spacing-lg);
  margin-bottom: var(--dds-card-content-spacing-lg);
}
.dds-card-content--md {
  padding: 0 var(--dds-card-content-spacing-md) 0 var(--dds-card-content-spacing-md);
  font-size: var(--dds-card-content-font-size);
}
.dds-card-content--md.dds-card-content-spacing--top, .dds-card-content--md.card-content-spacing--top {
  margin-top: var(--dds-card-content-spacing-md);
}
.dds-card-content--md.dds-card-content-spacing--bottom, .dds-card-content--md.card-content-spacing--bottom {
  margin-bottom: var(--dds-card-content-spacing-md);
}
.dds-card-content--md.dds-card-content-spacing--both, .dds-card-content--md.card-content-spacing--both {
  margin-top: var(--dds-card-content-spacing-md);
  margin-bottom: var(--dds-card-content-spacing-md);
}
.dds-card-content--sm {
  padding: 0 var(--dds-card-content-spacing-sm) 0 var(--dds-card-content-spacing-sm);
  font-size: var(--dds-font-xs);
}
.dds-card-content--sm.dds-card-content-spacing--top, .dds-card-content--sm.card-content-spacing--top {
  margin-top: var(--dds-card-content-spacing-sm);
}
.dds-card-content--sm.dds-card-content-spacing--bottom, .dds-card-content--sm.card-content-spacing--bottom {
  margin-bottom: var(--dds-card-content-spacing-sm);
}
.dds-card-content--sm.dds-card-content-spacing--both, .dds-card-content--sm.card-content-spacing--both {
  margin-top: var(--dds-card-content-spacing-sm);
  margin-bottom: var(--dds-card-content-spacing-sm);
}

.dds-card-actions {
  display: flex;
  align-items: center;
  gap: var(--dds-card-actions-gap);
}
.dds-card-actions--lg {
  padding: 0 var(--dds-card-actions-padding-lg) 0 var(--dds-card-actions-padding-lg);
}
.dds-card-actions--lg.dds-card-actions-spacing--top, .dds-card-actions--lg.card-actions-spacing--top {
  margin-top: var(--dds-card-actions-margin-lg);
}
.dds-card-actions--lg.dds-card-actions-spacing--bottom, .dds-card-actions--lg.card-actions-spacing--bottom {
  margin-bottom: var(--dds-card-actions-margin-lg);
}
.dds-card-actions--lg.dds-card-actions-spacing--both, .dds-card-actions--lg.card-actions-spacing--both {
  margin-top: var(--dds-card-actions-margin-lg);
  margin-bottom: var(--dds-card-actions-margin-lg);
}
.dds-card-actions--md {
  padding: 0 var(--dds-card-actions-padding-md) 0 var(--dds-card-actions-padding-md);
}
.dds-card-actions--md.dds-card-actions-spacing--top, .dds-card-actions--md.card-actions-spacing--top {
  margin-top: var(--dds-ca