/**
 * Min-width for elements
 * Used for automatic wrapping of rows
 */
$c-form-element-min-width: 190px;


.c-form {
	@include border-radius();
	color: palette(light);
}

.c-form--on-light {
	color: palette(text);
}

.c-form__title {
	@include font(x-large, 38, 700);
	margin: 20px 0;
	color: palette(light);
}


.c-form__subtitle {
	@include font(mid, 26, 400);
	margin: 20px 0;
	color: palette(light);
}


.c-form__row {

	& + & {
		margin-top: 20px;

		&.c-form__row--split{
			margin-top: 0;
		}
	}
}


.c-form__row--split {
	@include flex(wrap flex-start);
	margin-top: 0;
	margin-right: -20px;

	// Direct children
	& > * {
		flex-grow: 1;
		flex-basis: 10%;
		margin-top: 20px;
		margin-right: 20px;
	}
}


.c-form__error {
	&:not(:empty) {
		@include border-radius;
		@include font-size(x-small);
		display: inline-block;
		margin-top: 5px;
		padding: 2px 8px;
		background: rgba(palette(negative), 0.9);
	}
}


.c-form__element {
	@include flex(wrap);
	width: 100%;
}

.c-form-element--honey{
	position: fixed;
	top: -100px;
	height: 20px;
	width: 100%;
}

.c-form__label {
	@include font-size(small);
	order: 1;
	padding-left: 15px;
	padding-bottom: 5px;
	min-width: $c-form-element-min-width;
	color: rgba(palette(light), 0.5);

	.c-form__value:focus ~ & {
		color: palette(light);

		.c-form--on-light & {
			color: palette(text);
		}
	}

	.c-form--on-light & {
		color: rgba(palette(text), 0.5);
	}
}

.c-form__label__is-required {
	&:after {
		content: '*';
		display: inline-block;
		margin-bottom: -2px;
		color: palette(primary);
		font-weight: bold;
		@include font-size(mid);
	}
}

.c-form__value {
	@include border-radius;
	order: 2;
	min-width: $c-form-element-min-width;
	width: 100%;
	padding: 0 15px;
	line-height: 40px;
	color: palette(text);
	background-color: rgba(palette(light), 0.9);
	border: 3px transparent solid;
	outline: none;

	.c-form__element--select & {
		height: 46px;
		text-indent: 12px;
	}

	&::placeholder {
		@include font-size(x-small);
		color: palette(text, 300);
		transition-property: color, font-size;
		transition-duration: 0.2s;
	}

	&:focus {
		box-shadow: 0 0 0 3px palette(secondary, 600);
		background-color: palette(light);

		&::placeholder {
			color: palette(text, 300);
		}

		.c-form--on-light & {
			box-shadow: 0 0 0 3px palette(secondary, 100);
		}
	}

	.c-form--on-light & {
		border-width: 1px;
		border-color: palette(secondary, 100);
	}

	@at-root textarea#{&} {
		min-height: 80px;
		resize: vertical;
	}
}

input.c-form__value{
	.ie &{
		height: 46px;
	}
}

.c-form__footer {
	margin-top: 40px;
	text-align: right;
}