$card-border-color: $secondary-l2 !default;
$card-border-radius: $border-radius-xl !default;
$card-border-width: $border-width !default;
$card-box-shadow: c-unset !default;
$card-transition:
	$component-transition,
	transform 0.15s ease-in-out !default;

$card-hover-box-shadow: 0 0.25rem 0.75rem -0.25rem unquote('rgb(from #{$black} r g b / 0.25)') !default;

$card-body-padding-bottom: 1rem !default;
$card-body-padding-left: 1rem !default;
$card-body-padding-right: 1rem !default;
$card-body-padding-top: 1rem !default;

$card-inner-border-radius: calc(
	#{$card-border-radius} - #{$card-border-width}
) !default;

// min-width, see https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106

$card: () !default;
$card: map-deep-merge(
	(
		border-radius: clay-enable-rounded($card-border-radius),
		border-width: $card-border-width,
		outline-color: transparent,
		outline-style: solid,
		outline-width: $card-border-width,
		transition: $card-transition,

		hover: (
			box-shadow: clay-enable-shadows($card-hover-box-shadow),
		),
	),
	$card
);

// Card Title

$card-title: () !default;
$card-title: map-deep-merge(
	(
		color: $gray-900,
		font-size: 0.875rem,
	),
	$card-title
);

$card-title-link: () !default;
$card-title-link: map-deep-merge(
	(
		hover: (
			color: map-get($card-title, color),
		),
	),
	$card-title-link
);

// Card Subtitle

$card-subtitle: () !default;
$card-subtitle: map-deep-merge(
	(
		font-weight: $font-weight-normal,
	),
	$card-subtitle
);

$card-subtitle-link: () !default;
$card-subtitle-link: map-deep-merge(
	(
		hover: (
			color: $gray-600,
		),
	),
	$card-subtitle-link
);

// Card Link

$card-link: () !default;
$card-link: map-deep-merge(
	(
		color: $gray-600,
		font-size: 0.875rem,

		hover: (
			color: $gray-600,
			text-decoration: underline,
		),
	),
	$card-link
);

$checkbox-left-card-padding: 50px !default;

// .form-check-card

$form-check-card-checked-box-shadow: c-unset !default;

$form-check-card: () !default;
$form-check-card: map-deep-merge(
	(
		transition: $card-transition,

		hover: (
			card: (
				border-color: $primary-l1,
				outline-color: $primary-l1,
			),
		),

		active: (
			card: (
				border-color: $primary,
				outline-color: $primary,
			),
		),

		checked: (
			card: (
				border-color: $primary,
				outline-color: $primary,
			),
		),

		disabled: (
			transform: none,

			card: (
				box-shadow: none,
				border-color: $card-border-color,
				outline-color: transparent,
			),
		),
	),
	$form-check-card
);

// Card Interactive

$card-interactive: () !default;
$card-interactive: map-deep-merge(
	(
		outline: c-unset,
		transition: c-unset,

		hover: (
			background-color: $gray-100,
		),

		focus: (
			border-color: $primary-l1,
			box-shadow: none,
			outline-color: $primary-l1,
			outline-offset: 0,
			outline-style: solid,
			outline-width: $card-border-width,
		),

		active: (
			background-color: $gray-200,
		),
	),
	$card-interactive
);

$card-interactive-primary-hover-box-shadow: unquote(
	'#{$card-hover-box-shadow}, 0px -2.5rem 0px -2.25rem #{$primary} inset'
) !default;

$card-interactive-primary: () !default;
$card-interactive-primary: map-deep-merge(
	(
		hover: (
			box-shadow: $card-interactive-primary-hover-box-shadow,
		),

		focus: (
			box-shadow: $card-interactive-primary-hover-box-shadow,
		),

		active: (
			box-shadow: $card-interactive-primary-hover-box-shadow,
		),

		after-highlight: c-unset,
	),
	$card-interactive-primary
);

// Card Interactive Secondary

$card-interactive-secondary: () !default;
$card-interactive-secondary: map-deep-merge(
	(
		hover: (
			background-color: $white,
			border-color: c-unset,
			box-shadow: c-unset,
			color: $gray-900,
			transform: translateY(-0.25rem),
			after: (
				bottom: -0.25rem,
				content: '',
				height: 0.25rem,
				left: 0,
				position: absolute,
				right: 0,
			),
		),

		active: (
			background-color: $white,
		),
	),
	$card-interactive-secondary
);

// Card Type Asset

$card-type-asset: () !default;
$card-type-asset: map-deep-merge(
	(
		transition: $card-transition,

		hover: (
			transform: translateY(-0.25rem),
			after: (
				bottom: -0.25rem,
				content: '',
				height: 0.25rem,
				left: 0,
				position: absolute,
				right: 0,
			),
		),

		aspect-ratio: (
			border-color: $gray-300,
		),

		card-body: (
			padding-top: 0.75rem,
		),

		disabled: (
			transform: none,
		),
	),
	$card-type-asset
);

// Template Card

$template-card: () !default;
$template-card: map-deep-merge(
	(
		hover: (
			transform: translateY(-0.25rem),
			after: (
				bottom: -0.25rem,
				content: '',
				height: 0.25rem,
				left: 0,
				position: absolute,
				right: 0,
			),
		),
	),
	$template-card
);

$image-card: () !default;
$image-card: map-deep-merge(
	(
		aspect-ratio: (
			checkered-foreground-color: $gray-300,
		),
	),
	$image-card
);

$file-card: () !default;
$file-card: map-deep-merge(
	(
		card-type-asset-icon: (
			color: $gray-400,
		),
	),
	$file-card
);

// Card Type Template

$card-type-template-after-highlight: () !default;
$card-type-template-after-highlight: map-deep-merge(
	(
		bottom: -1px,
		left: -1px,
		right: -1px,
	),
	$card-type-template-after-highlight
);

$card-type-template-aspect-ratio: () !default;
$card-type-template-aspect-ratio: map-deep-merge(
	(
		background-image: none,
	),
	$card-type-template-aspect-ratio
);

$card-type-template-aspect-ratio-item: () !default;
$card-type-template-aspect-ratio-item: map-deep-merge(
	(
		color: $gray-600,
	),
	$card-type-template-aspect-ratio-item
);