/* Choice Box

Currently in use at:
- NDN:
		Numerous pages
- Signup:
		Numerous pages

	A style for larger box-style radio buttons. Includes
	a heading and content underneath it. Use alongside
	grid framework for positioning.

	Usage:
	<ul class="u-clearfix">
		<li class="ChoiceBox g-1_2__m">
			<input type="radio" class="ChoiceBox__radio"
				name="example" id="example" value="example" />
			<label for="example" class="ChoiceBox__label">
				<div class="ChoiceBox__title">
					Example Title
				</div>
				<div class="ChoiceBox__content">
					This is one of two choice boxes that appear
					next to each other.
				</div>
			</label>
		</li>
	</ul>

*/

.ChoiceBox__label {
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px $c-g200;
	cursor: pointer;
	display: block;
	padding: 1rem;
	transition: all .2s ease-in-out;

	&:hover {
		background: $c-g100;
	}
}

.ChoiceBox__radio:focus ~ .ChoiceBox__label {
	background: $c-g100;
}

.ChoiceBox__title {
	color: $c-g500;
	font-weight: bold;
	display: block;
	overflow: hidden;
	padding-bottom: 0.5rem;
	text-align: center;
	transition: all .2s ease-in-out;
	width: 100%;
}

.ChoiceBox__content {
	border-top: 0;
	color: $c-g500;
	overflow: hidden;
	text-align: center;
	transition: all .2s ease-in-out;
}

.ChoiceBox {
	display: inline-block;
	@include fontsize($t-1);
	margin-bottom: 0.5rem;
	margin-right: 0.5rem;
	vertical-align: top;
	width: 100%;

	&:hover,
	&:focus {
		.ChoiceBox__title,
		.ChoiceBox__content {
			color: $black;
		}
	}
}

.ChoiceBox .ChoiceBox__radio {
	display: none;
}

.ChoiceBox .ChoiceBox__radio + .ChoiceBox__label {
	display: block;
}

.ChoiceBox .ChoiceBox__radio:checked + .ChoiceBox__label {
	box-shadow: inset 0 0 0 2px $c-b300;
	position: relative;

	.ChoiceBox__content,
	.ChoiceBox__title {
		color: $c-black;
	}

	&:hover {
		background: $c-w100;
	}
}