.clickable-card--has-padding {
  padding: var(--wds-card-content-paddings-vertical, var(--wds-space-300)) var(--wds-card-content-paddings-horizontal, var(--wds-space-300));
}

.clickable-card--skin-outline {
  border-color: var(--wds-clickable-card-outline-border-color, var(--wds-color-black-550));
}

@media (hover: hover) {
  .clickable-card--skin-outline:hover {
    border-color: var(--wds-clickable-card-outline-border-color-hover, var(--wds-color-border-standard-secondary-hover));
  }
}

.clickable-card--skin-outline:active {
  border-color: var(--wds-clickable-card-outline-border-color-active, var(--wds-color-border-standard-secondary-active));
}

.clickable-card--skin-filled {
  background-color: var(--wds-clickable-card-filled-fill, var(--wds-color-black-750));
}

@media (hover: hover) {
  .clickable-card--skin-filled:hover {
    background-color: var(--wds-clickable-card-filled-fill-hover, var(--wds-color-black-700));
  }
}

.clickable-card--skin-filled:active {
  background-color: var(--wds-clickable-card-filled-fill-active, var(--wds-color-black-600));
}

.clickable-card--skin-filled.clickable-card--disabled {
  background-color: var(--wds-clickable-card-filled-fill-disabled, var(--wds-color-black-750));
}