// ============================================================================
// :: Toggle buttons
// ============================================================================
/**
 * Toggle buttons component
 */

// ============================================================================
// :: Root
// ============================================================================
.m-toggle-buttons {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;

	padding: 0.4rem;

	border-radius: $border-radius-xl;
	background-color: $background-color-grey-extra-light;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-toggle-buttons__button {
	display: block;
	width: auto;
}

.m-toggle-buttons__input {
	display: none;
}

.m-toggle-buttons__label {
	display: inline-block;
	width: auto;
	height: 100%;
	padding: 1rem 2rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-large;
	text-align: center;
	text-decoration: none;
	line-height: 2.4rem;

	border-radius: $border-radius-l;
	border: none;
	background-color: transparent;
	color: $text-color;

	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

	cursor: pointer;

	@include respond-at($screen-small-base) {
		padding: 1.2rem 3rem;
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-toggle-buttons__input:checked {

	+ .m-toggle-buttons__label {
		color: $text-color-white;
		background-color: $background-color-green;
	}
}