.card {
  --card-padding: var(--size-4);

  background-color: var(--color-bg);
  border-radius: var(--rounded-xl);
  border-width: var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding);
  position: relative;

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

  &[aria-disabled="true"]::after {
    background-color: rgb(0 0 0 / 30%);
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
  }
}

.card--unpadded {
  padding: 0;
}

.card__header {
  background: var(--slate-300);
  border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;
  padding: var(--card-padding);
  width: 100%;

  @media (prefers-color-scheme: dark) {
    a {
      color: var(--color-text);
    }

    background: var(--slate-600);
  }
}

.card__body {
  padding: var(--card-padding);
}

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