.form-group {
	.label {
		display: flex;
		flex-direction: column;
		font-size: $font-size-lg;
		width: 100%;
		max-width: 600px;
		position: relative;

		& > .ph {
			position: absolute;
			color: $color-text-light;
			left: 0;
			bottom: 2px;
			font-size: 28px;
			height: 56px;
			display: inline-flex;
			align-items: center;
			width: 48px;
			justify-content: center;
			transition-duration: .2s;
			transition-property: color, left;
		}

		.input {
			font-family: $font-family-base;
			font-size: $font-size-base;
			font-weight: $font-weight-medium;
			line-height: $line-height-base;
			letter-spacing: $letter-spacing-wide;
			padding: $space-3 $space-lg;
			margin-top: $space-sm;
			border-radius: 0;
			border-width: 2px;
			border-bottom-width: 6px;
			border-style: solid;
			border-color: $color-text-light;
			color: $color-text-light;
			background-color: transparent;
			transition-duration: .2s;
			transition-property: background-color, border-color, color;

			&:hover {
				border-bottom-color: $color-text-dark;
			}

			&:focus {
				outline: none;
				border-color: $color-electric-blue;
			}

			&::placeholder {
				color: $color-text-dark;
			}
		}

		textarea.input {
			height: 120px;
			line-height: $line-height-snug;
			resize: none;
		}

		.ph + .input,
		.ph + .select-wrap .select {
			padding-left: 42px;
		}

		.select-wrap {
			margin-top: $space-sm;
		}

		.select {
			width: 100%;
			height: 56px;
			margin-top: 0;

			/* убрать нативную стрелку */
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;

			&:focus {
				outline: none;
			}

			option {
				color: $color-text-light;
				background: $color-dark;
			}
		}

		.select-wrap::after {
			content: "";
			position: absolute;
			right: $space-lg;
			bottom: 18px;
			transform: translateY(-50%);

			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-top: 10px solid $color-text-light;

			pointer-events: none;
		}

		&.error {
			.input:not(:focus) {
				border-color: $color-error;
			}

			& + .input-info {
				color: $color-warning;
			}
		}
	}

	.input-info {
		font-size: $font-size-md;
		margin-top: $space-2;

		.ph {
			position: relative;
			top: 1px;
		}
	}
}

.radio {
	display: inline-flex;
	flex-direction: row;
	gap: $space-sm;
	align-items: center;

	input[type="radio"] {
		display: none;
	}

	.radio-control {
		display: inline-block;
		border-radius: 100%;
		border: 2px solid $color-primary;
		width: 20px;
		height: 20px;
		background: transparent;
		transition-duration: .2s;
		transition-property: background, border-color;
	}

	&:hover .radio-control {
		background: $color-grey;
	}

	input[type="radio"]:checked + .radio-control {
		background: $color-primary;
	}

	input[type="radio"]:disabled + .radio-control {
		background: $color-grey;
		border-color: $color-grey;
	}

	.radio-label {
		font-size: $font-size-lg;
	}
}

.checkbox {
	display: inline-flex;
	flex-direction: row;
	gap: $space-sm;
	align-items: center;

	input[type="checkbox"] {
		display: none;
	}

	.checkbox-control {
		height: 16px;
		width: 30px;
		border: 2px solid $color-primary;
		position: relative;
		background: transparent;
		transition-duration: .2s;
		transition-property: border-color, background;
		display: block;
	}

	.checkbox-control:before {
		content: "";
		display: block;
		height: 20px;
		width: 20px;
		background: $color-primary;
		position: absolute;
		left: -6px;
		top: -4px;
		transition-duration: .2s;
		transition-property: left, background;
	}

	&:hover .checkbox-control {
		background: $color-grey;
	}

	input[type="checkbox"]:checked:not(:disabled) + .checkbox-control {
		background: $color-secondary;
		border-color: $color-secondary;
	}

	input[type="checkbox"]:checked + .checkbox-control:before {
		left: 12px;
	}

	input[type="checkbox"]:disabled + .checkbox-control {
		border-color: $color-grey;
	}

	input[type="checkbox"]:disabled + .checkbox-control:before {
		background: $color-grey;
	}
}