/*

Currently in use at:
- NDN
		/perl/Ndn/Dhwebpanel/Domain/Secure.pm.tp
- DH.com
		Numerous pages
- Signup:
		/signup/src/presentation/components/PlanPicker/includes/SharedIncludes.js
		/signup/src/presentation/components/PlanPicker/includes/DreamPressIncludes.js

Cards

	Useful for displaying a heading, content, and call-to-action in a box.
	Optionally supports a label, and two different sized icons. Use with
	the grid for positioning.

	Options:
	- .Card__wrapper            Cards occupy same vertical space with flexbox
	- .Card__icon               Include on an <img> to add a small icon
	- .Card__large-icon         Include on an <img> to add a large icon
	- .Card--disabled           Makes the card appear disabled

	Usage:
	<div class="Card g-1_3">
		<svg class="Card__icon Icon Icon--size-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"></path></svg>
		<h4 class="Card__heading"><strong>Whatever</strong></h4>
		<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		<a href="#" class="Button">Go!</a>
	</div>

	Note: Labels require large icons.

*/

.Card__wrapper {
	display: inline-flex;
	flex-wrap: wrap;

	.Card {
		display: flex;
		flex-direction: column;
	}

	.Card__content {
		flex: 1 0 auto;
	}
}

.Card {
	padding: 2.5rem;
	position: relative;
	margin-bottom: 2rem;

	hr {
		border-bottom-color: $c-b100;
		margin: 1rem 0;
	}

	.Card__heading {
		color: $c-b700;
		margin-bottom: 0.5rem;
	}

	.Card__content {
		margin-bottom: 1.5rem;
		color: $c-g400;
		@include fontsize($t-1, $t-h-2);

	}

	.Card__icon,
	.Card__large-icon {
		display: inline-block;
		margin-right: 0.5rem;
		margin-bottom: 0;
	}

	&.Card__number {
		text-align: center;
		color: $c-b700;

		.Card__heading {
			margin-bottom: 0;
		}

		.Card__content {
			color: $c-b700;
			@include fontsize($t-2);
		}
	}

	&.Card__featured {
		border:solid 1px $c-b300;
		border-radius: $border-radius;

		.Card__heading {
			color: $c-b700;
			@include fontsize($t-2);
			margin-bottom: 1rem;
		}

		.Card__content {
			color: $c-b700;
		}
	}

	&.Card__plan {
		text-align: center;
		border:solid 1px $c-g200;
		border-radius: $border-radius;

		.Card__heading {
			color: $c-b700;
			@include fontsize($t-3);
			margin-bottom: 1rem;
		}

		.Card__subheading {
			@include fontsize($t-0);
			color: $c-b300;
			text-transform: uppercase;
		}

		.Card__number {
			margin: 1rem 0;
			@include fontsize($t-5);
			color: $c-b700;
		}
	}

	&.Card__plan--highlighted {
		text-align: center;
		border:solid 1px $c-g200;
		border-radius: $border-radius;

		.Card__heading {
			color: $c-b700;
			@include fontsize($t-3);
			margin-bottom: 1rem;
		}

		.Card__subheading {
			@include fontsize($t-0);
			color: $c-b300;
			text-transform: uppercase;
		}

		.Card__number {
			margin: 1rem 0;
			@include fontsize($t-5);
			color: $c-b700;
		}
		border:solid 1px $c-o300;

		.Tag{
			position: absolute;
			top:-24px;
			right:-1px;
		}
	}

	&.Card__plan--extended {
		text-align: center;
		border:solid 1px $c-g200;
		border-radius: $border-radius;

		.Card__heading {
			color: $c-b700;
			@include fontsize($t-3);
			margin-bottom: 1rem;
		}

		.Card__subheading {
			@include fontsize($t-0);
			color: $c-b300;
			text-transform: uppercase;
		}

		.Card__number {
			margin: 1rem 0;
			@include fontsize($t-5);
			color: $c-b700;
		}

		.Card__heading {
			color: $c-b300;
		}

		p{
			@include fontsize($t-1);
		}

		.Card__subheading {
			text-transform: none;
			color: $c-g500;
			margin-bottom: 0;
		}
		.Card__number {
			color: $c-b300;
		}

		.List{
			margin: 2rem 0;
		}
	}
}

.Card__icon {
	position: absolute;
	margin: 0;
	color: $c-b300;

	& + .Card__heading,
	& ~ .Card__content,
	& ~ .Button {
		margin-left: 2.5rem;
	}
}

.Card__large-icon {
	position: relative;
	height: 56px;
	width: 56px;

	& ~ .Card__super {
		position: absolute;
		top: 2.5rem;
		left: 6.25rem;
	}

	& ~ .Card__heading {
		position: relative;
		display: inline-block;
		margin-bottom: 1rem;
		top: -0.5rem;
	}
}

.Card__super {
	text-transform: uppercase;
	@include fontsize($t-0);
	color: $c-g400;
}

.Card--disabled {
	cursor: not-allowed;

	.Card__heading,
	.Card__content,
	.Button {
		color: $c-g300;
	}

	.Button:before {
		display: none;
	}
}