.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-standard {
  border: var(--wds-clickable-card-standard-border-width, 1px) solid transparent;
}

@media (hover: hover) {
  .clickable-card--skin-standard:not(.clickable-card--disabled):hover {
    border-color: var(--wds-clickable-card-standard-border-color-hover, var(--wds-color-black-500));
  }
}

.clickable-card--skin-standard:not(.clickable-card--disabled):active {
  border-color: var(--wds-clickable-card-standard-border-color-active, var(--wds-color-black-400));
}

.clickable-card--skin-standard.clickable-card--disabled {
  border-color: var(--wds-clickable-card-standard-border-color-disabled, var(--wds-color-border-standard-primary-disabled));
}

.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:not(.clickable-card--disabled):hover {
    border-color: var(--wds-clickable-card-outline-border-color-hover, var(--wds-color-black-500));
  }
}

.clickable-card--skin-outline:not(.clickable-card--disabled):active {
  border-color: var(--wds-clickable-card-outline-border-color-active, var(--wds-color-black-400));
}

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