@use "../kit-deps" as *;
@use "typography" as *;

.form-group {
	width: 100%;
	max-width: 600px;

	.label {
		display: flex;
		flex-direction: column;
		font-size: $font-size-base;
		width: 100%;
		position: relative;
		color: $color-text-light;

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

		.input {
			min-height: $control-height-lg;
			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: $border-radius-sm;
			border-width: $border-width-base;
			border-bottom-width: $border-width-accent;
			border-style: $border-style-base;
			border-color: $color-text-light;
			color: $color-text-light;
			background-color: $surface-panel-muted;
			transition-duration: $motion-base;
			transition-timing-function: $motion-ease;
			transition-property: background-color, border-color, color;

			@include hover_touch {
				border-bottom-color: $color-text-dark;
			}

			&:focus {
				@include focus_ring;
				border-color: $color-electric-blue;
				background-color: transparent;
			}

			&:disabled {
				color: $color-text-dark;
				border-color: $border-color-muted;
				background: $surface-panel;
				cursor: not-allowed;
				opacity: 0.72;
			}

			&[readonly] {
				color: $color-text-medium;
				border-color: $border-color-muted;
				background: rgba($color-text-light, 0.03);
			}

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

			&::-webkit-search-cancel-button,
			&::-webkit-search-decoration,
			&::-webkit-search-results-button,
			&::-webkit-search-results-decoration {
				display: none;
				-webkit-appearance: none;
			}

			&[type="date"],
			&[type="time"],
			&[type="datetime-local"],
			&[type="month"] {
				color-scheme: dark;
				cursor: pointer;
				min-width: 0;
				padding-right: $control-height-md;
				text-transform: uppercase;
			}

			&[type="date"]::-webkit-calendar-picker-indicator,
			&[type="time"]::-webkit-calendar-picker-indicator,
			&[type="datetime-local"]::-webkit-calendar-picker-indicator,
			&[type="month"]::-webkit-calendar-picker-indicator {
				width: $control-height-md;
				height: 100%;
				margin: 0;
				padding: 0;
				background: transparent;
				cursor: pointer;
				opacity: 0;
			}

			&[type="date"]::-webkit-datetime-edit,
			&[type="time"]::-webkit-datetime-edit,
			&[type="datetime-local"]::-webkit-datetime-edit,
			&[type="month"]::-webkit-datetime-edit {
				padding: 0;
			}

			&[type="date"]::-webkit-datetime-edit-fields-wrapper,
			&[type="time"]::-webkit-datetime-edit-fields-wrapper,
			&[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
			&[type="month"]::-webkit-datetime-edit-fields-wrapper {
				color: $color-text-light;
			}
		}

		textarea.input {
			height: $control-height-lg * 2;
			line-height: $line-height-snug;
			resize: none;
		}

		.ph + .input,
		.ph + .select-wrap .select {
			padding-left: $control-height-md;
		}

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

		.select {
			width: 100%;
			height: $control-height-lg;
			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;
			}
		}

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

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

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

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

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

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

		&.error {
			color: $color-warning;
		}
	}
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: $space-4;
	width: 100%;
	max-width: 760px;
}

.fieldset {
	width: 100%;
	max-width: 760px;
	margin: 0;
	padding: $space-5;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;
}

.legend {
	padding: $space-1 $space-2;
	color: $color-black;
	background: $color-primary;
	font-size: $font-size-sm;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;
	text-transform: uppercase;
}

@include media_down("md") {
	.form-grid {
		grid-template-columns: 1fr;
	}
}