// =============================================================================
// :: Formfield
// =============================================================================
.c-formfield {
	position: relative;

	font-family: $font-family-secondary;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-formfield__container {
	display: inline-flex;
	align-items: center;
	width: 100%;

	cursor: pointer;
}

.c-formfield__input {
	width: 0;
	margin: 0;
	padding: 0;

	opacity: 0;
	outline: 0;
	-webkit-appearance: none;

	&:checked ~ .c-formfield__holder {
		background-color: $background-color-pink;
		border-color: $border-color-base;
	}

	&:checked ~ .c-formfield__holder > .c-formfield__icon {
		opacity: 1;

		transform: translateX(-50%) translateY(-50%) scale(0.6);
	}

	&:checked ~ .c-formfield__holder > .c-formfield__icon {
		opacity: 1;
	}

	&:hover:not(:checked) ~ .c-formfield__holder > .c-formfield__icon {
		opacity: 0.5;

		fill: $primary-color;

		transform: translateX(-50%) translateY(-50%) scale(0.6);
	}
}

.c-formfield__holder {
	position: relative;

	display: inline-block;

	min-width: 2.7rem;
	height: 2.7rem;
	margin-right: 1rem;

	border: none;
	border-radius: $border-radius-base;
	background-color: $background-color-light;

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

.c-formfield__icon {
	position: absolute;
	top: 50%;
	left: 50%;

	font-size: $font-size-1x-small;

	color: $text-color-light;
	opacity: 0;

	transform: translateX(-50%) translateY(-50%) scale(0.5);

	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.c-formfield__label {
	font-weight: $font-weight-medium;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-formfield--advanced {
	padding: 1.6rem;

	border: $border-width-base solid $border-color-medium;
	border-radius: $border-radius-2x-small;

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

	.c-formfield__label {
		transition: color 0.3s ease-in-out;
	}

	.c-formfield__input {

		&:checked ~ .c-formfield__holder {
			background-color: $background-color-light;
		}
	}

	&.is-checked {
		background-color: $background-color-pink;
		border-color: $border-color-base;

		.c-formfield__label {
			color: $text-color-light;
		}
	}
}

.c-formfield--radio {

	.c-formfield__icon {
		font-size: $font-size-2x-small;
	}
}

.c-formfield--select-alternative {
	padding: 1.5rem;

	border: $border-width-base solid $border-color-medium;
	border-radius: $border-radius-2x-small;

	.c-input__select {
		font-size: $font-size-1x-small;
		font-weight: $font-weight-medium;

		color: $text-color-base;
	}
}

.c-formfield__icon--select {
	color: $text-color-base;
}