@clayui/css 3.43.0 → 3.45.0

package/src/scss/mixins/_cards.scss

@@ -34,38 +34,40 @@
 /// - Add @link to documentation
 
 @mixin clay-card-section-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
-
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-		)
-	);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+			)
+		);
 
-	$autofit-col: setter(map-get($map, autofit-col), ());
-	$autofit-col: map-merge(
-		$autofit-col,
-		(
-			padding-left:
-				setter(
-					map-get($map, autofit-col-padding-left),
-					map-get($autofit-col, padding-left)
-				),
-			padding-right:
-				setter(
-					map-get($map, autofit-col-padding-right),
-					map-get($autofit-col, padding-right)
-				),
-		)
-	);
+		$autofit-col: setter(map-get($map, autofit-col), ());
+		$autofit-col: map-merge(
+			$autofit-col,
+			(
+				padding-left:
+					setter(
+						map-get($map, autofit-col-padding-left),
+						map-get($autofit-col, padding-left)
+					),
+				padding-right:
+					setter(
+						map-get($map, autofit-col-padding-right),
+						map-get($autofit-col, padding-right)
+					),
+			)
+		);
 
-	@if ($enabled) {
-		@include clay-css($base);
+		@if ($enabled) {
+			@include clay-css($base);
 
-		.autofit-col {
-			@include clay-css($autofit-col);
+			.autofit-col {
+				@include clay-css($autofit-col);
+			}
 		}
 	}
 }
@@ -270,641 +272,712 @@
 /// after-highlight: {Map | Null},
 
 @mixin clay-card-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+			)
+		);
 
-	$base: setter($map, ());
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-		)
-	);
+		$hover: setter(map-get($map, hover), ());
+		$hover: map-merge(
+			$hover,
+			(
+				background-color:
+					setter(
+						map-get($map, hover-bg),
+						map-get($hover, background-color)
+					),
+				border-color:
+					setter(
+						map-get($map, hover-border-color),
+						map-get($hover, border-color)
+					),
+				box-shadow:
+					setter(
+						map-get($map, hover-box-shadow),
+						map-get($hover, box-shadow)
+					),
+				color:
+					setter(map-get($map, hover-color), map-get($hover, color)),
+				text-decoration:
+					setter(
+						map-get($map, hover-text-decoration),
+						map-get($hover, text-decoration)
+					),
+			)
+		);
 
-	$hover: setter(map-get($map, hover), ());
-	$hover: map-merge(
-		$hover,
-		(
-			background-color:
-				setter(
-					map-get($map, hover-bg),
-					map-get($hover, background-color)
-				),
-			border-color:
-				setter(
-					map-get($map, hover-border-color),
-					map-get($hover, border-color)
-				),
-			box-shadow:
-				setter(
-					map-get($map, hover-box-shadow),
-					map-get($hover, box-shadow)
-				),
-			color: setter(map-get($map, hover-color), map-get($hover, color)),
-			text-decoration:
-				setter(
-					map-get($map, hover-text-decoration),
-					map-get($hover, text-decoration)
-				),
-		)
-	);
+		$old-hover-card-title: setter(map-get($map, hover-card-title), ());
+		$hover-card-title: setter(map-get($hover, card-title), ());
+		$hover-card-title: map-merge($hover-card-title, $old-hover-card-title);
 
-	$old-hover-card-title: setter(map-get($map, hover-card-title), ());
-	$hover-card-title: setter(map-get($hover, card-title), ());
-	$hover-card-title: map-merge($hover-card-title, $old-hover-card-title);
+		$old-hover-card-subtitle: setter(
+			map-get($map, hover-card-subtitle),
+			()
+		);
+		$hover-card-subtitle: setter(map-get($hover, card-subtitle), ());
+		$hover-card-subtitle: map-merge(
+			$hover-card-subtitle,
+			$old-hover-card-subtitle
+		);
 
-	$old-hover-card-subtitle: setter(map-get($map, hover-card-subtitle), ());
-	$hover-card-subtitle: setter(map-get($hover, card-subtitle), ());
-	$hover-card-subtitle: map-merge(
-		$hover-card-subtitle,
-		$old-hover-card-subtitle
-	);
+		$old-hover-card-text: setter(map-get($map, hover-card-text), ());
+		$hover-card-text: setter(map-get($hover, card-text), ());
+		$hover-card-text: map-merge($hover-card-text, $old-hover-card-text);
 
-	$old-hover-card-text: setter(map-get($map, hover-card-text), ());
-	$hover-card-text: setter(map-get($hover, card-text), ());
-	$hover-card-text: map-merge($hover-card-text, $old-hover-card-text);
+		$old-hover-card-link: setter(map-get($map, hover-card-link), ());
+		$hover-card-link: setter(map-get($hover, card-link), ());
+		$hover-card-link: map-merge($hover-card-link, $old-hover-card-link);
 
-	$old-hover-card-link: setter(map-get($map, hover-card-link), ());
-	$hover-card-link: setter(map-get($hover, card-link), ());
-	$hover-card-link: map-merge($hover-card-link, $old-hover-card-link);
+		$focus: setter(map-get($map, focus), ());
+		$focus: map-merge(
+			$focus,
+			(
+				background-color:
+					setter(
+						map-get($map, focus-bg),
+						map-get($focus, background-color)
+					),
+				border-color:
+					setter(
+						map-get($map, focus-border-color),
+						map-get($focus, border-color)
+					),
+				box-shadow:
+					setter(
+						map-get($map, focus-box-shadow),
+						map-get($focus, box-shadow)
+					),
+				color:
+					setter(map-get($map, focus-color), map-get($focus, color)),
+				text-decoration:
+					setter(
+						map-get($map, focus-text-decoration),
+						map-get($focus, text-decoration)
+					),
+			)
+		);
 
-	$focus: setter(map-get($map, focus), ());
-	$focus: map-merge(
-		$focus,
-		(
-			background-color:
-				setter(
-					map-get($map, focus-bg),
-					map-get($focus, background-color)
-				),
-			border-color:
-				setter(
-					map-get($map, focus-border-color),
-					map-get($focus, border-color)
-				),
-			box-shadow:
-				setter(
-					map-get($map, focus-box-shadow),
-					map-get($focus, box-shadow)
-				),
-			color: setter(map-get($map, focus-color), map-get($focus, color)),
-			text-decoration:
-				setter(
-					map-get($map, focus-text-decoration),
-					map-get($focus, text-decoration)
-				),
-		)
-	);
+		$old-focus-card-title: setter(map-get($map, focus-card-title), ());
+		$focus-card-title: setter(map-get($focus, card-title), ());
+		$focus-card-title: map-merge($focus-card-title, $old-focus-card-title);
 
-	$old-focus-card-title: setter(map-get($map, focus-card-title), ());
-	$focus-card-title: setter(map-get($focus, card-title), ());
-	$focus-card-title: map-merge($focus-card-title, $old-focus-card-title);
+		$old-focus-card-subtitle: setter(
+			map-get($map, focus-card-subtitle),
+			()
+		);
+		$focus-card-subtitle: setter(map-get($focus, card-subtitle), ());
+		$focus-card-subtitle: map-merge(
+			$focus-card-subtitle,
+			$old-focus-card-subtitle
+		);
 
-	$old-focus-card-subtitle: setter(map-get($map, focus-card-subtitle), ());
-	$focus-card-subtitle: setter(map-get($focus, card-subtitle), ());
-	$focus-card-subtitle: map-merge(
-		$focus-card-subtitle,
-		$old-focus-card-subtitle
-	);
+		$old-focus-card-text: setter(map-get($map, focus-card-text), ());
+		$focus-card-text: setter(map-get($focus, card-text), ());
+		$focus-card-text: map-merge($focus-card-text, $old-focus-card-text);
 
-	$old-focus-card-text: setter(map-get($map, focus-card-text), ());
-	$focus-card-text: setter(map-get($focus, card-text), ());
-	$focus-card-text: map-merge($focus-card-text, $old-focus-card-text);
+		$old-focus-card-link: setter(map-get($map, focus-card-link), ());
+		$focus-card-link: setter(map-get($focus, card-link), ());
+		$focus-card-link: map-merge($focus-card-link, $old-focus-card-link);
 
-	$old-focus-card-link: setter(map-get($map, focus-card-link), ());
-	$focus-card-link: setter(map-get($focus, card-link), ());
-	$focus-card-link: map-merge($focus-card-link, $old-focus-card-link);
+		$active: setter(map-get($map, active), ());
+		$active: map-merge(
+			$active,
+			(
+				background-color:
+					setter(
+						map-get($map, active-bg),
+						map-get($active, background-color)
+					),
+				border-color:
+					setter(
+						map-get($map, active-border-color),
+						map-get($active, border-color)
+					),
+				color:
+					setter(
+						map-get($map, active-color),
+						map-get($active, color)
+					),
+			)
+		);
 
-	$active: setter(map-get($map, active), ());
-	$active: map-merge(
-		$active,
-		(
-			background-color:
-				setter(
-					map-get($map, active-bg),
-					map-get($active, background-color)
-				),
-			border-color:
-				setter(
-					map-get($map, active-border-color),
-					map-get($active, border-color)
-				),
-			color: setter(map-get($map, active-color), map-get($active, color)),
-		)
-	);
+		$old-active-card-title: setter(map-get($map, active-card-title), ());
+		$active-card-title: setter(map-get($active, card-title), ());
+		$active-card-title: map-merge(
+			$active-card-title,
+			$old-active-card-title
+		);
 
-	$old-active-card-title: setter(map-get($map, active-card-title), ());
-	$active-card-title: setter(map-get($active, card-title), ());
-	$active-card-title: map-merge($active-card-title, $old-active-card-title);
+		$old-active-card-subtitle: setter(
+			map-get($map, active-card-subtitle),
+			()
+		);
+		$active-card-subtitle: setter(map-get($active, card-subtitle), ());
+		$active-card-subtitle: map-merge(
+			$active-card-subtitle,
+			$old-active-card-subtitle
+		);
 
-	$old-active-card-subtitle: setter(map-get($map, active-card-subtitle), ());
-	$active-card-subtitle: setter(map-get($active, card-subtitle), ());
-	$active-card-subtitle: map-merge(
-		$active-card-subtitle,
-		$old-active-card-subtitle
-	);
+		$old-active-card-text: setter(map-get($map, active-card-text), ());
+		$active-card-text: setter(map-get($active, card-text), ());
+		$active-card-text: map-merge($active-card-text, $old-active-card-text);
 
-	$old-active-card-text: setter(map-get($map, active-card-text), ());
-	$active-card-text: setter(map-get($active, card-text), ());
-	$active-card-text: map-merge($active-card-text, $old-active-card-text);
+		$old-active-card-link: setter(map-get($map, active-card-link), ());
+		$active-card-link: setter(map-get($active, card-link), ());
+		$active-card-link: map-merge($active-card-link, $old-active-card-link);
 
-	$old-active-card-link: setter(map-get($map, active-card-link), ());
-	$active-card-link: setter(map-get($active, card-link), ());
-	$active-card-link: map-merge($active-card-link, $old-active-card-link);
+		$aspect-ratio: setter(map-get($map, aspect-ratio), ());
 
-	$aspect-ratio: setter(map-get($map, aspect-ratio), ());
+		$aspect-ratio-custom-control-label: setter(
+			map-deep-get($aspect-ratio, custom-control, label),
+			()
+		);
 
-	$aspect-ratio-custom-control-label: setter(
-		map-deep-get($aspect-ratio, custom-control, label),
-		()
-	);
+		$checkbox: setter(map-get($map, checkbox), ());
+		$checkbox: map-merge(
+			$checkbox,
+			(
+				cursor:
+					setter(
+						map-get($map, checkbox-cursor),
+						map-get($checkbox, cursor),
+						map-get($aspect-ratio-custom-control-label, cursor)
+					),
+			)
+		);
 
-	$checkbox: setter(map-get($map, checkbox), ());
-	$checkbox: map-merge(
-		$checkbox,
-		(
-			cursor:
-				setter(
-					map-get($map, checkbox-cursor),
-					map-get($checkbox, cursor),
-					map-get($aspect-ratio-custom-control-label, cursor)
+		$aspect-ratio-custom-control-label: map-deep-merge(
+			$aspect-ratio-custom-control-label,
+			$checkbox
+		);
+
+		$aspect-ratio: map-deep-merge(
+			$aspect-ratio,
+			(
+				background-color:
+					setter(
+						map-get($map, aspect-ratio-bg),
+						map-get($map, aspect-ratio-checkered-bg),
+						map-get($aspect-ratio, background-color)
+					),
+				checkered-foreground-color:
+					setter(
+						map-get($map, aspect-ratio-checkered-fg),
+						map-get($aspect-ratio, checkered-foreground-color)
+					),
+				border-color:
+					setter(
+						map-get($map, aspect-ratio-border-color),
+						map-get($aspect-ratio, border-color)
+					),
+				border-style:
+					setter(
+						map-get($map, aspect-ratio-border-style),
+						map-get($aspect-ratio, border-style)
+					),
+				border-width:
+					setter(
+						map-get($map, aspect-ratio-border-bottom-width),
+						map-get($map, aspect-ratio-border-width),
+						map-get($aspect-ratio, border-width)
+					),
+				horizontal:
+					setter(
+						map-get($map, aspect-ratio-horizontal),
+						map-get($aspect-ratio, horizontal)
+					),
+				vertical:
+					setter(
+						map-get($map, aspect-ratio-vertical),
+						map-get($aspect-ratio, vertical)
+					),
+				custom-control: (
+					label: $aspect-ratio-custom-control-label,
 				),
-		)
-	);
+			)
+		);
 
-	$aspect-ratio-custom-control-label: map-deep-merge(
-		$aspect-ratio-custom-control-label,
-		$checkbox
-	);
+		$aspect-ratio-checkered-fg: map-get(
+			$aspect-ratio,
+			checkered-foreground-color
+		);
 
-	$aspect-ratio: map-deep-merge(
-		$aspect-ratio,
-		(
-			background-color:
-				setter(
-					map-get($map, aspect-ratio-bg),
-					map-get($map, aspect-ratio-checkered-bg),
-					map-get($aspect-ratio, background-color)
-				),
-			checkered-foreground-color:
-				setter(
-					map-get($map, aspect-ratio-checkered-fg),
-					map-get($aspect-ratio, checkered-foreground-color)
-				),
-			border-color:
-				setter(
-					map-get($map, aspect-ratio-border-color),
-					map-get($aspect-ratio, border-color)
-				),
-			border-style:
-				setter(
-					map-get($map, aspect-ratio-border-style),
-					map-get($aspect-ratio, border-style)
-				),
-			border-width:
-				setter(
-					map-get($map, aspect-ratio-border-bottom-width),
-					map-get($map, aspect-ratio-border-width),
-					map-get($aspect-ratio, border-width)
-				),
-			horizontal:
-				setter(
-					map-get($map, aspect-ratio-horizontal),
-					map-get($aspect-ratio, horizontal)
-				),
-			vertical:
-				setter(
-					map-get($map, aspect-ratio-vertical),
-					map-get($aspect-ratio, vertical)
-				),
-			custom-control: (
-				label: $aspect-ratio-custom-control-label,
-			),
-		)
-	);
+		$card-body: setter(map-get($map, card-body), ());
+		$card-body: map-merge(
+			$card-body,
+			(
+				padding-bottom:
+					setter(
+						map-get($map, card-body-padding-bottom),
+						map-get($card-body, padding-bottom)
+					),
+				padding-left:
+					setter(
+						map-get($map, card-body-padding-left),
+						map-get($card-body, padding-left)
+					),
+				padding-right:
+					setter(
+						map-get($map, card-body-padding-right),
+						map-get($card-body, padding-right)
+					),
+				padding-top:
+					setter(
+						map-get($map, card-body-padding-top),
+						map-get($card-body, padding-top)
+					),
+			)
+		);
 
-	$aspect-ratio-checkered-fg: map-get(
-		$aspect-ratio,
-		checkered-foreground-color
-	);
+		$card-row: setter(map-get($map, card-row), ());
+		$card-row: map-merge(
+			$card-row,
+			(
+				align-items:
+					setter(
+						map-get($map, card-row-align-items),
+						map-get($card-row, align-items)
+					),
+			)
+		);
 
-	$card-body: setter(map-get($map, card-body), ());
-	$card-body: map-merge(
-		$card-body,
-		(
-			padding-bottom:
-				setter(
-					map-get($map, card-body-padding-bottom),
-					map-get($card-body, padding-bottom)
-				),
-			padding-left:
-				setter(
-					map-get($map, card-body-padding-left),
-					map-get($card-body, padding-left)
-				),
-			padding-right:
-				setter(
-					map-get($map, card-body-padding-right),
-					map-get($card-body, padding-right)
-				),
-			padding-top:
-				setter(
-					map-get($map, card-body-padding-top),
-					map-get($card-body, padding-top)
-				),
-		)
-	);
+		$card-type-asset-icon: setter(map-get($map, card-type-asset-icon), ());
 
-	$card-row: setter(map-get($map, card-row), ());
-	$card-row: map-merge(
-		$card-row,
-		(
-			align-items:
-				setter(
-					map-get($map, card-row-align-items),
-					map-get($card-row, align-items)
-				),
-		)
-	);
+		$asset-icon: setter(map-get($map, asset-icon), ());
 
-	$card-type-asset-icon: setter(map-get($map, card-type-asset-icon), ());
+		$asset-icon-lexicon-icon: setter(
+			map-get($asset-icon, lexicon-icon),
+			()
+		);
 
-	$asset-icon: setter(map-get($map, asset-icon), ());
+		$card-type-asset-icon-lexicon-icon: setter(
+			map-get($card-type-asset-icon, lexicon-icon),
+			()
+		);
+		$card-type-asset-icon-lexicon-icon: map-merge(
+			$card-type-asset-icon-lexicon-icon,
+			$asset-icon-lexicon-icon
+		);
+		$card-type-asset-icon-lexicon-icon: map-merge(
+			$card-type-asset-icon-lexicon-icon,
+			(
+				height:
+					setter(
+						map-get($map, asset-icon-lexicon-icon-height),
+						map-get($card-type-asset-icon-lexicon-icon, height)
+					),
+				width:
+					setter(
+						map-get($map, asset-icon-lexicon-icon-width),
+						map-get($card-type-asset-icon-lexicon-icon, width)
+					),
+			)
+		);
 
-	$asset-icon-lexicon-icon: setter(map-get($asset-icon, lexicon-icon), ());
+		$card-type-asset-icon: map-deep-merge(
+			$card-type-asset-icon,
+			$asset-icon
+		);
+		$card-type-asset-icon: map-deep-merge(
+			$card-type-asset-icon,
+			(
+				color:
+					setter(
+						map-get($map, asset-icon-color),
+						map-get($card-type-asset-icon, color)
+					),
+				max-width:
+					setter(
+						map-get($map, asset-icon-max-width),
+						map-get($card-type-asset-icon, max-width)
+					),
+				min-width:
+					setter(
+						map-get($map, asset-icon-min-width),
+						map-get($card-type-asset-icon, min-width)
+					),
+				width:
+					setter(
+						map-get($map, asset-icon-width),
+						map-get($card-type-asset-icon, width)
+					),
+				lexicon-icon: $card-type-asset-icon-lexicon-icon,
+			)
+		);
 
-	$card-type-asset-icon-lexicon-icon: setter(
-		map-get($card-type-asset-icon, lexicon-icon),
-		()
-	);
-	$card-type-asset-icon-lexicon-icon: map-merge(
-		$card-type-asset-icon-lexicon-icon,
-		$asset-icon-lexicon-icon
-	);
-	$card-type-asset-icon-lexicon-icon: map-merge(
-		$card-type-asset-icon-lexicon-icon,
-		(
-			height:
-				setter(
-					map-get($map, asset-icon-lexicon-icon-height),
-					map-get($card-type-asset-icon-lexicon-icon, height)
-				),
-			width:
-				setter(
-					map-get($map, asset-icon-lexicon-icon-width),
-					map-get($card-type-asset-icon-lexicon-icon, width)
-				),
-		)
-	);
+		$card-type-asset-icon-sticker: setter(
+			map-get($card-type-asset-icon, sticker),
+			()
+		);
+		$card-type-asset-icon-sticker: map-merge(
+			$card-type-asset-icon-sticker,
+			(
+				border-radius:
+					setter(
+						map-get($map, asset-icon-sticker-border-radius),
+						map-get($card-type-asset-icon-sticker, border-radius)
+					),
+				font-size:
+					setter(
+						map-get($map, asset-icon-sticker-font-size),
+						map-get($card-type-asset-icon-sticker, font-size)
+					),
+			)
+		);
 
-	$card-type-asset-icon: map-deep-merge($card-type-asset-icon, $asset-icon);
-	$card-type-asset-icon: map-deep-merge(
-		$card-type-asset-icon,
-		(
-			color:
-				setter(
-					map-get($map, asset-icon-color),
-					map-get($card-type-asset-icon, color)
-				),
-			max-width:
-				setter(
-					map-get($map, asset-icon-max-width),
-					map-get($card-type-asset-icon, max-width)
-				),
-			min-width:
-				setter(
-					map-get($map, asset-icon-min-width),
-					map-get($card-type-asset-icon, min-width)
-				),
-			width:
-				setter(
-					map-get($map, asset-icon-width),
-					map-get($card-type-asset-icon, width)
-				),
-			lexicon-icon: $card-type-asset-icon-lexicon-icon,
-		)
-	);
+		$dropdown-action: setter(map-get($map, dropdown-action), ());
+		$dropdown-action: map-merge(
+			$dropdown-action,
+			(
+				margin-bottom:
+					setter(
+						map-get($map, dropdown-action-offset-bottom),
+						map-get($dropdown-action, margin-bottom)
+					),
+				margin-left:
+					setter(
+						map-get($map, dropdown-action-offset-left),
+						map-get($dropdown-action, margin-left)
+					),
+				margin-right:
+					setter(
+						map-get($map, dropdown-action-offset-right),
+						map-get($dropdown-action, margin-right)
+					),
+				margin-top:
+					setter(
+						map-get($map, dropdown-action-offset-top),
+						map-get($dropdown-action, margin-top)
+					),
+			)
+		);
 
-	$card-type-asset-icon-sticker: setter(
-		map-get($card-type-asset-icon, sticker),
-		()
-	);
-	$card-type-asset-icon-sticker: map-merge(
-		$card-type-asset-icon-sticker,
-		(
-			border-radius:
-				setter(
-					map-get($map, asset-icon-sticker-border-radius),
-					map-get($card-type-asset-icon-sticker, border-radius)
-				),
-			font-size:
-				setter(
-					map-get($map, asset-icon-sticker-font-size),
-					map-get($card-type-asset-icon-sticker, font-size)
-				),
-		)
-	);
+		@if ($enabled) {
+			@include clay-css($base);
+
+			&:hover,
+			&.hover {
+				@include clay-css($hover);
+
+				&::after {
+					@include clay-css(map-get($hover, after));
+				}
 
-	$dropdown-action: setter(map-get($map, dropdown-action), ());
-	$dropdown-action: map-merge(
-		$dropdown-action,
-		(
-			margin-bottom:
-				setter(
-					map-get($map, dropdown-action-offset-bottom),
-					map-get($dropdown-action, margin-bottom)
-				),
-			margin-left:
-				setter(
-					map-get($map, dropdown-action-offset-left),
-					map-get($dropdown-action, margin-left)
-				),
-			margin-right:
-				setter(
-					map-get($map, dropdown-action-offset-right),
-					map-get($dropdown-action, margin-right)
-				),
-			margin-top:
-				setter(
-					map-get($map, dropdown-action-offset-top),
-					map-get($dropdown-action, margin-top)
-				),
-		)
-	);
+				.card-title {
+					@include clay-link($hover-card-title);
+				}
 
-	@if ($enabled) {
-		@include clay-css($base);
+				.card-subtitle {
+					@include clay-link($hover-card-subtitle);
+				}
 
-		&:hover,
-		&.hover {
-			@include clay-css($hover);
+				.card-text {
+					@include clay-link($hover-card-text);
+				}
 
-			&::after {
-				@include clay-css(setter(map-get($hover, after), ()));
+				.card-link {
+					@include clay-link($hover-card-link);
+				}
 			}
 
-			.card-title {
-				@include clay-link($hover-card-title);
-			}
+			&:focus,
+			&.focus {
+				@include clay-css($focus);
 
-			.card-subtitle {
-				@include clay-link($hover-card-subtitle);
-			}
+				&::after {
+					@include clay-css(map-get($focus, after));
+				}
 
-			.card-text {
-				@include clay-link($hover-card-text);
-			}
+				.card-title {
+					@include clay-link($focus-card-title);
+				}
 
-			.card-link {
-				@include clay-link($hover-card-link);
-			}
-		}
+				.card-subtitle {
+					@include clay-link($focus-card-subtitle);
+				}
 
-		&:focus,
-		&.focus {
-			@include clay-css($focus);
+				.card-text {
+					@include clay-link($focus-card-text);
+				}
 
-			&::after {
-				@include clay-css(setter(map-get($focus, after), ()));
+				.card-link {
+					@include clay-link($focus-card-link);
+				}
 			}
 
-			.card-title {
-				@include clay-link($focus-card-title);
-			}
+			&:active,
+			&.active {
+				@include clay-css($active);
 
-			.card-subtitle {
-				@include clay-link($focus-card-subtitle);
-			}
+				&::after {
+					@include clay-css(map-get($active, after));
+				}
 
-			.card-text {
-				@include clay-link($focus-card-text);
-			}
+				.card-title {
+					@include clay-link($active-card-title);
+				}
 
-			.card-link {
-				@include clay-link($focus-card-link);
-			}
-		}
+				.card-subtitle {
+					@include clay-link($active-card-subtitle);
+				}
 
-		&:active,
-		&.active {
-			@include clay-css($active);
+				.card-text {
+					@include clay-link($active-card-text);
+				}
 
-			&::after {
-				@include clay-css(setter(map-get($active, after), ()));
+				.card-link {
+					@include clay-link($active-card-link);
+				}
 			}
 
-			.card-title {
-				@include clay-link($active-card-title);
-			}
+			&:disabled,
+			&.disabled {
+				@include clay-css(map-get($map, disabled));
 
-			.card-subtitle {
-				@include clay-link($active-card-subtitle);
-			}
+				&::after {
+					@include clay-css(map-deep-get($map, disabled, after));
+				}
 
-			.card-text {
-				@include clay-link($active-card-text);
-			}
+				.card-title {
+					@include clay-link(
+						map-deep-get($map, disabled, card-title)
+					);
+				}
 
-			.card-link {
-				@include clay-link($active-card-link);
+				.card-subtitle {
+					@include clay-link(
+						map-deep-get($map, disabled, card-subtitle)
+					);
+				}
+
+				.card-text {
+					@include clay-link(map-deep-get($map, disabled, card-text));
+				}
+
+				.card-link {
+					@include clay-link(map-deep-get($map, disabled, card-link));
+				}
 			}
-		}
 
-		&:disabled,
-		&.disabled {
-			@include clay-css(setter(map-get($map, disabled), ()));
+			@include clay-after-highlight-variant(
+				setter(map-get($map, after-highlight), ())
+			);
 
-			&::after {
-				@include clay-css(
-					setter(map-deep-get($map, disabled, after), ())
-				);
+			&::before {
+				@include clay-css(map-get($map, before));
 			}
 
-			.card-title {
-				@include clay-link(
-					setter(map-deep-get($map, disabled, card-title), ())
-				);
+			&::after {
+				@include clay-css(map-get($map, after));
 			}
 
-			.card-subtitle {
-				@include clay-link(
-					setter(map-deep-get($map, disabled, card-subtitle), ())
+			&.form-check-card {
+				@include clay-form-check-card-variant(
+					map-get($map, form-check-card)
 				);
 			}
 
-			.card-text {
-				@include clay-link(
-					setter(map-deep-get($map, disabled, card-text), ())
+			.aspect-ratio {
+				@include clay-aspect-ratio-variant(
+					setter(map-get($map, aspect-ratio), ())
 				);
+
+				@if ($aspect-ratio-checkered-fg) {
+					@include clay-bg-checkered($aspect-ratio-checkered-fg);
+				}
+
+				.custom-control label,
+				.form-check-label {
+					@include clay-css(
+						map-deep-get($aspect-ratio, custom-control, label)
+					);
+				}
+
+				.label {
+					@include clay-label-variant(map-get($aspect-ratio, label));
+				}
 			}
 
-			.card-link {
-				@include clay-link(
-					setter(map-deep-get($map, disabled, card-link), ())
+			.aspect-ratio-item {
+				@include clay-aspect-ratio-item-variant(
+					setter(map-get($map, aspect-ratio-item), ())
 				);
 			}
-		}
 
-		@include clay-after-highlight-variant(
-			setter(map-get($map, after-highlight), ())
-		);
+			.aspect-ratio-item-top-left {
+				@include clay-css(map-get($map, aspect-ratio-item-top-left));
+			}
 
-		.aspect-ratio {
-			@include clay-aspect-ratio-variant(
-				setter(map-get($map, aspect-ratio), ())
-			);
+			.aspect-ratio-item-top-center {
+				@include clay-css(map-get($map, aspect-ratio-item-top-center));
+			}
 
-			@if ($aspect-ratio-checkered-fg) {
-				@include clay-bg-checkered($aspect-ratio-checkered-fg);
+			.aspect-ratio-item-top-right {
+				@include clay-css(map-get($map, aspect-ratio-item-top-right));
 			}
 
-			.custom-control label,
-			.form-check-label {
+			.aspect-ratio-item-right-middle {
 				@include clay-css(
-					setter(
-						map-deep-get($aspect-ratio, custom-control, label),
-						()
-					)
+					map-get($map, aspect-ratio-item-right-middle)
 				);
 			}
 
-			.label {
-				@include clay-label-variant(
-					setter(map-get($aspect-ratio, label), ())
+			.aspect-ratio-item-bottom-right {
+				@include clay-css(
+					map-get($map, aspect-ratio-item-bottom-right)
 				);
 			}
-		}
 
-		.aspect-ratio-item {
-			@include clay-aspect-ratio-item-variant(
-				setter(map-get($map, aspect-ratio-item), ())
-			);
-		}
+			.aspect-ratio-item-bottom-center {
+				@include clay-css(
+					map-get($map, aspect-ratio-item-bottom-center)
+				);
+			}
 
-		.aspect-ratio-item-top-left {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-top-left), ())
-			);
-		}
+			.aspect-ratio-item-bottom-left {
+				@include clay-css(map-get($map, aspect-ratio-item-bottom-left));
+			}
 
-		.aspect-ratio-item-top-center {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-top-center), ())
-			);
-		}
+			.sticker {
+				@include clay-sticker-variant(
+					setter(map-get($map, sticker), ())
+				);
+			}
 
-		.aspect-ratio-item-top-right {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-top-right), ())
-			);
-		}
+			.card {
+				@include clay-css(map-get($map, card));
+			}
 
-		.aspect-ratio-item-right-middle {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-right-middle), ())
-			);
-		}
+			.card-header {
+				@include clay-card-section-variant(map-get($map, card-header));
+			}
 
-		.aspect-ratio-item-bottom-right {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-bottom-right), ())
-			);
-		}
+			.card-body {
+				@include clay-card-section-variant($card-body);
+			}
 
-		.aspect-ratio-item-bottom-center {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-bottom-center), ())
-			);
-		}
+			.card-footer {
+				@include clay-card-section-variant(map-get($map, card-footer));
+			}
 
-		.aspect-ratio-item-bottom-left {
-			@include clay-css(
-				setter(map-get($map, aspect-ratio-item-bottom-left), ())
-			);
-		}
+			.card-row {
+				@include clay-card-section-variant($card-row);
+			}
 
-		.sticker {
-			@include clay-sticker-variant(setter(map-get($map, sticker), ()));
-		}
+			.card-title {
+				@include clay-link(map-get($map, card-title));
+			}
 
-		.card {
-			@include clay-css(setter(map-get($map, card), ()));
-		}
+			.card-subtitle {
+				@include clay-link(map-get($map, card-subtitle));
+			}
 
-		.card-header {
-			@include clay-card-section-variant(
-				setter(map-get($map, card-header), ())
-			);
-		}
+			.card-text {
+				@include clay-link(map-get($map, card-text));
+			}
 
-		.card-body {
-			@include clay-card-section-variant($card-body);
-		}
+			.card-link {
+				@include clay-link(map-get($map, card-link));
+			}
 
-		.card-footer {
-			@include clay-card-section-variant(
-				setter(map-get($map, card-footer), ())
-			);
-		}
+			.card-divider {
+				@include clay-css(map-get($map, card-divider));
+			}
 
-		.card-row {
-			@include clay-card-section-variant($card-row);
-		}
+			.card-type-asset-icon {
+				@include clay-css($card-type-asset-icon);
 
-		.card-title {
-			@include clay-link(setter(map-get($map, card-title), ()));
-		}
+				.inline-item {
+					@include clay-css(
+						map-get($card-type-asset-icon, inline-item)
+					);
+				}
 
-		.card-subtitle {
-			@include clay-link(setter(map-get($map, card-subtitle), ()));
-		}
+				> .lexicon-icon {
+					@include clay-css(
+						map-get($card-type-asset-icon, lexicon-icon)
+					);
+				}
 
-		.card-text {
-			@include clay-link(setter(map-get($map, card-text), ()));
-		}
+				> .sticker {
+					@include clay-css($card-type-asset-icon-sticker);
 
-		.card-link {
-			@include clay-link(setter(map-get($map, card-link), ()));
-		}
+					.sticker-overlay {
+						@include clay-css(
+							map-get(
+								$card-type-asset-icon-sticker,
+								sticker-overlay
+							)
+						);
+					}
+				}
+			}
 
-		.card-divider {
-			@include clay-css(setter(map-get($map, card-divider), ()));
-		}
+			.form-check-input {
+				&:hover {
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get($map, custom-control, hover, card)
+						);
+					}
+				}
 
-		.card-type-asset-icon {
-			@include clay-css($card-type-asset-icon);
+				&:focus {
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get($map, custom-control, focus, card)
+						);
+					}
+				}
 
-			.inline-item {
-				@include clay-css(
-					setter(map-get($card-type-asset-icon, inline-item), ())
-				);
-			}
+				&:active {
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get($map, custom-control, active, card)
+						);
+					}
+				}
 
-			> .lexicon-icon {
-				@include clay-css(
-					setter(map-get($card-type-asset-icon, lexicon-icon), ())
-				);
-			}
+				&[disabled],
+				&:disabled {
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get($map, custom-control, disabled, card)
+						);
+					}
+				}
 
-			> .sticker {
-				@include clay-css($card-type-asset-icon-sticker);
+				&:checked {
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get($map, custom-control, checked, card)
+						);
+					}
+				}
 
-				.sticker-overlay {
-					@include clay-css(
-						setter(
-							map-get(
-								$card-type-asset-icon-sticker,
-								sticker-overlay
-							),
-							()
-						)
-					);
+				&:indeterminate {
+					~ .card {
+						@include clay-card-variant(
+							map-deep-get(
+								$map,
+								custom-control,
+								indeterminate,
+								card
+							)
+						);
+					}
 				}
 			}
-		}
 
-		.dropdown-action {
-			@include clay-button-variant($dropdown-action);
+			.dropdown-action {
+				@include clay-button-variant($dropdown-action);
+			}
 		}
 	}
 }
@@ -1405,3 +1478,124 @@
 		}
 	}
 }
+
+/// A mixin to help create `form-check-card` variants.
+/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
+/// @example
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .form-check-card
+/// 	hover: (
+/// 		// .form-check-card:hover
+/// 		card: (
+/// 			// .form-check-card:hover .card
+/// 			//     @include clay-card-variant();
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// .form-check-card.focus
+/// 		card: (
+/// 			// .form-check-card.focus .card
+/// 			//     @include clay-card-variant();
+/// 		),
+/// 	),
+/// 	active: (
+/// 		// .form-check-card.active
+/// 		card: (
+/// 			// .form-check-card.active .card
+/// 			//     @include clay-card-variant();
+/// 		),
+/// 	),
+/// 	checked: (
+/// 		// .form-check-card.checked
+/// 		card: (
+/// 			// .form-check-card.checked .card
+/// 			//     @include clay-card-variant();
+/// 		),
+/// 	),
+/// 	indeterminate: (
+/// 		// .form-check-card.indeterminate
+/// 		card: (
+/// 			// .form-check-card.indeterminate .card
+/// 			//     @include clay-card-variant();
+/// 		),
+/// 	),
+/// 	card: (
+/// 		// .form-check-card .card
+/// 		//     @include clay-card-variant();
+/// 	),
+/// 	form-check-input: (
+/// 		// .form-check-card .form-check-input
+/// 	),
+/// 	form-check-label: (
+/// 		// .form-check-card .form-check-label
+/// 	),
+/// 	custom-control: (
+/// 		// .form-check-card .custom-control
+/// 		//     @include clay-custom-control-variant();
+/// 	),
+/// )
+
+@mixin clay-form-check-card-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			&:hover {
+				.card {
+					@include clay-card-variant(map-deep-get($map, hover, card));
+				}
+			}
+
+			&.focus {
+				.card {
+					@include clay-card-variant(map-deep-get($map, focus, card));
+				}
+			}
+
+			&.active {
+				.card {
+					@include clay-card-variant(
+						map-deep-get($map, active, card)
+					);
+				}
+			}
+
+			&.checked {
+				.card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, card)
+					);
+				}
+			}
+
+			&.indeterminate {
+				.card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, card)
+					);
+				}
+			}
+
+			.card {
+				@include clay-card-variant(map-get($map, card));
+			}
+
+			.form-check-input {
+				@include clay-css(map-get($map, form-check-input));
+			}
+
+			.form-check-label {
+				@include clay-css(map-get($map, form-check-label));
+			}
+
+			.custom-control {
+				@include clay-custom-control-variant(
+					map-get($map, custom-control)
+				);
+			}
+		}
+	}
+}