.card,
.card-horizontal {
	background-color: $card-bg;
	border-style: $card-border-style;
	border-width: $card-border-width;

	@include box-shadow($card-box-shadow);

	display: block;
	margin-bottom: $card-margin-bottom;
	position: relative;

	@if ($card-border-radius > 0) {
		.autofit-col {
			&:first-child {
				@include border-left-radius($card-inner-border-radius);
			}

			&:last-child {
				@include border-right-radius($card-inner-border-radius);
			}
		}
	}
}

.card-body {
	padding-bottom: $card-body-padding-bottom;
	padding-left: $card-body-padding-left;
	padding-right: $card-body-padding-right;
	padding-top: $card-body-padding-top;
}

.card-section-header {
	color: $card-section-header-color;
	font-size: $card-section-header-font-size;
	font-weight: $card-section-header-font-weight;
	line-height: $card-section-header-line-height;
	margin-bottom: $card-section-header-margin-bottom;
	padding: $card-section-header-padding;
	text-transform: $card-section-header-text-transform;
}

// Card Title

.card-title {
	@include clay-text-typography($card-title);
}

.card-title a {
	@include clay-link($card-title-link);
}

// Card Subtitle

.card-subtitle {
	@include clay-text-typography($card-subtitle);
}

.card-subtitle a {
	@include clay-link($card-subtitle-link);
}

// Card Link

.card-link {
	@include clay-link($card-link);

	&.btn-unstyled {
		white-space: normal;
	}

	+ .card-link {
		margin-left: 0;
	}
}

.card-divider {
	background-color: $card-divider-bg;
	height: $card-divider-height;
	margin-bottom: $card-divider-spacer-y;
	margin-left: $card-divider-spacer-x;
	margin-right: $card-divider-spacer-x;
	margin-top: $card-divider-spacer-y;
}

.card-row {
	display: flex;
	width: 100%;

	.autofit-col {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
	}

	.autofit-col-expand {
		min-width: 25px;
	}
}

.card-row .autofit-col-gutters {
	padding-left: 10px;
	padding-right: 10px;

	.card-divider {
		margin-left: -10px;
		margin-right: -10px;
	}
}

// Card Row Content Alignment

.autofit-col {
	.justify-content-center & {
		justify-content: center;
	}

	.justify-content-start & {
		justify-content: flex-start;
	}

	.justify-content-end & {
		justify-content: flex-end;
	}

	.text-center & {
		text-align: center;
	}

	.text-left & {
		text-align: left;
	}

	.text-right & {
		text-align: right;
	}
}

// Card Helpers

.card-item-first {
	@include border-top-radius($card-inner-border-radius);

	width: 100%;
}

.autofit-col:first-child .card-item-first {
	@include border-radius($card-inner-border-radius 0 0 $card-inner-border-radius);
}

.card-item-last {
	@include border-bottom-radius($card-inner-border-radius);

	width: 100%;
}

.autofit-col:last-child .card-item-last {
	@include border-radius(0 $card-inner-border-radius $card-inner-border-radius 0);
}

.rounded {
	.card-header,
	.card-item-first {
		border-top-left-radius: $card-rounded-inner-border-radius;
		border-top-right-radius: $card-rounded-inner-border-radius;
	}

	.card-footer,
	.card-item-last {
		border-bottom-left-radius: $card-rounded-inner-border-radius;
		border-bottom-right-radius: $card-rounded-inner-border-radius;
	}

	.autofit-col:first-child {
		border-bottom-left-radius: $card-rounded-inner-border-radius;
		border-top-left-radius: $card-rounded-inner-border-radius;

		.card-item-first {
			border-radius: $card-rounded-inner-border-radius 0 0 $card-rounded-inner-border-radius;
		}
	}

	.autofit-col:last-child{
		border-bottom-right-radius: $card-rounded-inner-border-radius;
		border-top-right-radius: $card-rounded-inner-border-radius;

		.card-item-last {
			border-radius: 0 $card-rounded-inner-border-radius $card-rounded-inner-border-radius 0;
		}
	}
}

.rounded-0 {
	.card-header,
	.card-item-first {
		border-top-left-radius: $card-rounded-0-inner-border-radius;
		border-top-right-radius: $card-rounded-0-inner-border-radius;
	}

	.card-footer,
	.card-item-last {
		border-bottom-left-radius: $card-rounded-0-inner-border-radius;
		border-bottom-right-radius: $card-rounded-0-inner-border-radius;
	}

	.autofit-col:first-child {
		border-bottom-left-radius: $card-rounded-0-inner-border-radius;
		border-top-left-radius: $card-rounded-0-inner-border-radius;

		.card-item-first {
			border-radius: $card-rounded-0-inner-border-radius 0 0 $card-rounded-0-inner-border-radius;
		}
	}

	.autofit-col:last-child {
		border-bottom-right-radius: $card-rounded-0-inner-border-radius;
		border-top-right-radius: $card-rounded-0-inner-border-radius;

		.card-item-last {
			border-radius: 0 $card-rounded-0-inner-border-radius $card-rounded-0-inner-border-radius 0;
		}
	}
}

.rounded-circle {
	.card-header,
	.card-item-first {
		border-top-left-radius: $card-rounded-circle-inner-border-radius;
		border-top-right-radius: $card-rounded-circle-inner-border-radius;
	}

	.card-footer,
	.card-item-last {
		border-bottom-left-radius: $card-rounded-circle-inner-border-radius;
		border-bottom-right-radius: $card-rounded-circle-inner-border-radius;
	}

	.autofit-col:first-child {
		border-bottom-left-radius: $card-rounded-circle-inner-border-radius;
		border-top-left-radius: $card-rounded-circle-inner-border-radius;

		.card-item-first {
			border-radius: $card-rounded-circle-inner-border-radius 0 0 $card-rounded-circle-inner-border-radius;
		}
	}

	.autofit-col:last-child {
		border-bottom-right-radius: $card-rounded-circle-inner-border-radius;
		border-top-right-radius: $card-rounded-circle-inner-border-radius;

		.card-item-last {
			border-radius: 0 $card-rounded-circle-inner-border-radius $card-rounded-circle-inner-border-radius 0;
		}
	}
}

// Checkbox and Radio Cards

.form-check-card {
	margin-bottom: $card-margin-bottom;
	margin-top: 0;
	padding-left: 0;

	.card {
		margin-bottom: 0;
	}

	.custom-control {
		display: inline;
		margin-right: 0;
		position: static;

		> label {
			font-weight: $font-weight-normal;
			padding-left: 0;
		}
	}

	.custom-control-input {
		z-index: 2;
	}

	.custom-control-label {
		position: absolute;
		z-index: 1;

		&::before,
		&::after {
			top: 0;
		}
	}

	.form-check-input {
		margin-left: 0;
		margin-top: 0;
		position: absolute;
		z-index: 1;
	}

	.form-check-label {
		color: $body-color;
		display: inline;
		font-weight: $font-weight-normal;
		padding-left: 0;
		position: static;
	}

	&.active .card,
	.custom-control-input:checked ~ .card,
	.form-check-input:checked ~ .card {
		box-shadow: $form-check-card-checked-box-shadow;
	}
}

.form-check-card {
	&:hover {
		.card {
			box-shadow: $form-check-card-checked-box-shadow;
		}
	}
}

.custom-control-input,
.form-check-input {
	&:hover {
		~ .card {
			box-shadow: $form-check-card-checked-box-shadow;
		}
	}
}

.form-check-bottom-left,
.form-check-middle-left,
.form-check-top-left {
	.card-horizontal {
		> .card-body {
			padding-left: $checkbox-left-card-padding;
		}
	}
}

.form-check-bottom-right,
.form-check-middle-right,
.form-check-top-right {
	.card-horizontal {
		> .card-body {
			padding-right: $checkbox-right-card-padding;
		}
	}
}

.form-check-bottom-left {
	.custom-control-input,
	.custom-control-label,
	.form-check-input {
		bottom: $checkbox-position;
		left: $checkbox-position;
		top: auto;
		transform: none;
	}
}

.form-check-bottom-right {
	.custom-control-input,
	.custom-control-label,
	.form-check-input {
		bottom: $checkbox-position;
		left: auto;
		right: $checkbox-position;
		top: auto;
		transform: none;
	}
}

.form-check-middle-left {
	.custom-control-input,
	.custom-control-label,
	.form-check-input {
		left: $checkbox-position;
		margin-top: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.form-check-middle-right {
	.custom-control-input,
	.custom-control-label,
	.form-check-input {
		left: auto;
		margin-top: 0;
		right: $checkbox-position;
		top: 50%;
		transform: translateY(-50%);
	}
}

.form-check-top-left {
	.custom-control-input,
	.custom-control-label,
	.form-check-input {
		left: $checkbox-position;
		top: $checkbox-position;
		transform: none;
	}
}

.form-check-top-right {
	.custom-control-input,
	.custom-control-label,
	.form-check-input {
		left: auto;
		right: $checkbox-position;
		top: $checkbox-position;
		transform: none;
	}
}

// Card Page

.card-page {
	@extend %clay-custom-grid-wrapper !optional;

	&.card-page-equal-height {
		.card-page-item,
		.card-page-item-asset,
		.card-page-item-directory {
			display: flex;
			flex-direction: column;
		}

		.form-check-card {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}

		.card {
			flex-grow: 1;
		}
	}
}

.card-page-item-header {
	padding-left: $grid-gutter-width / 2;
	padding-right: $grid-gutter-width / 2;
	width: 100%;
}

.card-page-item-directory {
	@include clay-custom-grid-columns($card-page-item-directory);
}

.card-page-item-asset {
	@include clay-custom-grid-columns($card-page-item-asset);
}

.card-page-item-user {
	@include clay-custom-grid-columns($card-page-item-user);
}

// Card Interactive

.card-interactive {
	@include clay-card-variant($card-interactive);

	label {
		cursor: $link-cursor;
	}
}

.card-interactive-primary {
	@include clay-card-variant($card-interactive-primary);
}

.card-interactive-secondary {
	@include clay-card-variant($card-interactive-secondary);
}

// Card Type Asset

.card-type-asset {
	@include clay-card-type-asset($card-type-asset);
}

.image-card {
	@include clay-card-type-asset-variant($image-card);
}

.file-card {
	@include clay-card-type-asset-variant($file-card);
}

.user-card {
	@include clay-card-type-asset-variant($user-card);
}

// Card Type Directory

.card-type-directory {
	@include clay-card-type-directory($card-type-directory);
}

// Card Type Template

.card-type-template {
	@include clay-card-variant($card-type-template);
}

// Template Card

.template-card {
	@include clay-card-variant($template-card);
}

// Template Card Horizontal

.template-card-horizontal {
	@include clay-card-variant($template-card-horizontal);
}