@import '../../../styles/variables.scss';

.content-card {
  background: var(--tk-card-bg);
  border-radius: var(--tk-card-radius);
  box-shadow: $shadow-sm;
  transition: background 0.15s, opacity 0.15s, transform 0.15s;

  &--outlined {
    box-shadow: none;
    border: 1px solid $bd;
  }

  &--elevated {
    box-shadow: $shadow-md;
  }

  &--pressable {
    cursor: pointer;
  }

  &--feedback-bg.content-card--pressable:active {
    background: $bd-l;
  }

  &--feedback-opacity.content-card--pressable:active {
    opacity: var(--tk-touch-feedback-opacity);
  }

  &--feedback-scale.content-card--pressable:active {
    transform: scale(0.98);
  }
}