$overlay-shadow: 0 0 var(--wds-shadow-blur-primary-overlay, 18px) 0
    var(--wds-shadow-fill-primary-overlay, rgba(0, 6, 36, 0.1)),
  0 var(--wds-shadow-y-primary-overlay, 6px)
    var(--wds-shadow-blur-secondary-overlay, 6px) 0
    var(--wds-shadow-fill-secondary-overlay, rgba(0, 6, 36, 0.05));

$raised-shadow: 0 var(--wds-shadow-y-primary-raised, 0)
    var(--wds-shadow-blur-primary-raised, 6px) 0
    var(--wds-shadow-fill-primary-raised, rgba(0, 6, 36, 0.1)),
  var(--wds-shadow-x-secondary-raised, 0)
    var(--wds-shadow-y-secondary-raised, 2px)
    var(--wds-shadow-blur-secondary-raised, 4px)
    var(--wds-shadow-spread-secondary-raised, 0)
    var(--wds-shadow-fill-secondary-raised, rgba(0, 6, 36, 0.05));

.clickable-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: var(--wds-border-radius-surface-default, 8px);
}

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

.clickable-card--disabled {
  cursor: not-allowed;
}

@media (hover: hover) {
  .clickable-card:hover {
    cursor: pointer;
  }
}

.clickable-card__clickable-overlay {
  all: unset;
  position: absolute;
  inset: 0;
}

.clickable-card__clickable-overlay:focus-visible {
  outline: none;
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px #a8caff);
  border-radius: var(--wds-border-radius-surface-default, 8px);
}

.clickable-card--skin-standard {
  background-color: var(--wds-color-fill-surface-default, #ffffff);
}

@media (hover: hover) {
  .clickable-card--skin-standard:not(.clickable-card--disabled):hover {
    box-shadow: $overlay-shadow;
  }
}

.clickable-card--skin-standard:not(.clickable-card--disabled):active {
  box-shadow: $raised-shadow;
}

.clickable-card--skin-shadow {
  background-color: var(--wds-color-fill-surface-default, #ffffff);
  border-radius: var(--wds-border-radius-surface-raised, 8px);
  box-shadow: $raised-shadow;
}

@media (hover: hover) {
  .clickable-card--skin-shadow:not(.clickable-card--disabled):hover {
    box-shadow: $overlay-shadow;
  }
}

.clickable-card--skin-shadow:not(.clickable-card--disabled):active {
  box-shadow: $raised-shadow;
}

.clickable-card--skin-outline {
  border-radius: var(--wds-border-radius-surface-raised, 8px);
  background-color: var(--wds-color-fill-surface-default, #ffffff);
  border: 1px solid;
  border-color: var(
    --wds-clickable-card-outline-border-color,
    var(--wds-color-border-standard-primary, #a8caff)
  );
}

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

.clickable-card--skin-outline:active {
  border-color: var(
    --wds-clickable-card-outline-border-color-active,
    var(--wds-color-border-standard-primary-active, #116dff)
  );
}

.clickable-card--skin-outline.clickable-card--disabled {
  border-color: var(
    --wds-clickable-card-outline-border-color-disabled,
    var(--wds-color-border-standard-primary-disabled, rgba(0, 6, 36, 0.1))
  );
}

.clickable-card--skin-filled {
  background-color: var(
    --wds-clickable-card-filled-fill,
    var(--wds-color-fill-light-primary, #ffffff)
  );
}

@media (hover: hover) {
  .clickable-card--skin-filled:hover {
    background-color: var(
      --wds-clickable-card-filled-fill-hover,
      var(--wds-color-fill-light-primary-hover, #e7f0ff)
    );
  }
}

.clickable-card--skin-filled:active {
  background-color: var(
    --wds-clickable-card-filled-fill-active,
    var(--wds-color-fill-light-primary-active, #d6e6fe)
  );
}

.clickable-card--skin-filled.clickable-card--disabled {
  background-color: var(
    --wds-clickable-card-filled-fill-disabled,
    var(--wds-color-fill-light-primary-disabled, rgba(255, 255, 255, 0.3))
  );
}