.ui_form_group {
	.ui_label {
		display: flex;
		flex-direction: column;
		font-size: $font_size_lg;
		max-width: 420px;
		position: relative;

		.ph {
			position: absolute;
			color: $color-text-light;
			left: -0px;
			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;
		}

		.ui_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.ui_input {
			height: 120px;
			line-height: $line_height_snug;
			resize: none;
		}

		.ph + .ui_input,
		.ph + .ui_select_wrap .ui_select {
			padding-left: 42px;
		}

		.ui_select_wrap {
			margin-top: $space-sm;
		}

		.ui_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;
		  }
		}

		.ui_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; /* чтобы клики шли в select */
		}
	}
}

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

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

	.ui_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 .ui_radio_control{
		background: $color-grey;
	}

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

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

	.ui_radio_label {
		font-size: $font_size_lg;
	}
}

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

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

	.ui_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;
	}

	.ui_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 .ui_checkbox_control{
		background: $color-grey;
	}

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

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

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

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