.clickable-card--has-padding {
  padding: var(--wds-space-300) var(--wds-space-300);
}

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

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

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

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

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

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

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