Card Select

/* No shadow: the card is drawn with a border instead of the raised elevation.
   The selectors are doubled on the card label so they win over the package
   rules regardless of stylesheet order. */
.pds-card-select--no-shadow
	.pds-card-select__option-label.pds-card-select__option-label {
	border: var(--pds-border-width-default) solid var(--pds-color-border-input);
	box-shadow: none;
}

/* Hover tint (the secondary Button hover) layered over the card background, so
   the default, secondary and transparent backgrounds all keep their fill. */
.pds-card-select--no-shadow
	.pds-card-select__option-label.pds-card-select__option-label:hover {
	background-image: linear-gradient(
		var(--pds-color-button-secondary-background-hover),
		var(--pds-color-button-secondary-background-hover)
	);
}

/* Selected: the focus ring, only when the radio indicator is hidden. With the
   indicator, the check icon marks the selected card and the border stays. */
.pds-card-select--no-shadow.pds-card-select--no-indicator
	.pds-card-select__option-label.pds-card-select__option-label--selected {
	border-color: var(--pds-color-interactive-focus);
	box-shadow: 0 0 0 var(--pds-border-width-default)
		var(--pds-color-interactive-focus);
}