.card {
  background-color: var(--color-bg);
  border-radius: var(--rounded-xs);
  box-shadow: 0 0 0 var(--border) var(--color-border-dark), var(--shadow-xs);
  padding-left: var(--size-1_5);
  padding-right: var(--size-1_5);

  &[aria-disabled=true] {
    pointer-events: none;
  }

  &[aria-disabled=true]::after {
    background-color: rgba(0, 0, 0, .3);
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
  }
}

.card--selectable:has(:checked) {
  background-color: var(--color-secondary);
  border-color: var(--color-primary);
}