@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;

		& > .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: 0;
			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;
}

.file-upload {
	display: inline-flex;
	align-items: center;
	gap: $space-2;
	min-height: $control-height-md;
	padding: $space-2 $space-3;
	border: $border-width-base solid $color-secondary;
	border-left-width: $border-width-accent;
	color: $color-secondary;
	background: $surface-panel-muted;
	font-size: $font-size-sm;
	font-weight: $font-weight-bold;
	text-transform: uppercase;
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: color, background, border-color;

	input[type="file"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	@include hover_touch {
		color: $color-black;
		background: $color-secondary;
	}

	&:focus-within {
		@include focus_ring;
	}
}

.file-upload-panel {
	width: 100%;
	max-width: 760px;
	@include hard_panel($border-color-muted, $border-width-accent);
}

.file-upload-form {
	display: flex;
	flex-direction: column;
	gap: $space-4;
	margin: 0;
}

.file-upload-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: $space-4;
	padding: $space-4 $space-4 0;
}

.file-upload-heading {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	min-width: 0;
}

.file-upload-title {
	margin: 0;
	color: $color-text-light;
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-transform: uppercase;
}

.file-upload-description {
	margin: 0;
	color: $color-text-medium;
	font-size: $font-size-sm;
	line-height: $line-height-relaxed;
}

.file-upload-dropzone {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: $space-4;
	margin: 0 $space-4;
	padding: $space-5;
	border: $border-width-base dashed $color-secondary;
	background: rgba($color-secondary, 0.08);
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: background, border-color;

	input[type="file"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	@include hover_touch {
		border-color: $color-primary;
		background: rgba($color-primary, 0.1);
	}

	&:focus-within {
		@include focus_ring;
	}
}

.file-upload-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: $control-height-lg;
	height: $control-height-lg;
	color: $color-black;
	background: $color-secondary;
	font-size: $icon-size-lg;
}

.file-upload-body {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	min-width: 0;
}

.file-upload-primary {
	color: $color-text-light;
	font-size: $font-size-base;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-transform: uppercase;
}

.file-upload-secondary {
	color: $color-text-medium;
	font-size: $font-size-sm;
	line-height: $line-height-normal;
}

.file-upload-preview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: $space-3;
	margin: 0 $space-4;

	&[hidden] {
		display: none;
	}
}

.file-upload-preview-item {
	position: relative;
	min-width: 0;
	margin: 0;
	border: $border-width-base solid $border-color-muted;
	background: $surface-panel-muted;
}

.file-upload-preview-remove {
	position: absolute;
	top: $space-2;
	right: $space-2;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: $control-icon-rail-sm;
	height: $control-icon-rail-sm;
	padding: 0;
	border: $border-width-base solid $color-error;
	color: $color-error;
	background: $surface-panel;
	font-size: $icon-size-sm;
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: color, background, border-color;

	@include hover_touch {
		color: $color-black;
		background: $color-error;
	}

	&:focus-visible {
		@include focus_ring;
	}
}

.file-upload-preview-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: $surface-panel;
}

.file-upload-preview-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.file-upload-preview-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: $control-height-lg;
	min-height: $control-height-lg;
	padding: $space-2;
	color: $color-black;
	background: $color-secondary;
	font-size: $font-size-sm;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;
	text-transform: uppercase;
}

.file-upload-preview-item figcaption {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	overflow: hidden;
	padding: $space-2;
}

.file-upload-preview-name {
	overflow: hidden;
	color: $color-text-light;
	font-size: $font-size-xs;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-upload-preview-meta {
	color: $color-text-medium;
	font-size: $font-size-xs;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-transform: uppercase;
}

.file-upload-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: $space-2;
	padding: 0 $space-4 $space-4;
}

.range {
	width: 100%;
	max-width: 600px;
	accent-color: $color-secondary;

	input[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		height: $control-height-md;
		margin: 0;
		background: transparent;
		cursor: pointer;
	}

	input[type="range"]::-webkit-slider-runnable-track {
		height: $border-width-accent;
		background: $surface-panel-strong;
		border: $border-width-base solid $border-color-muted;
	}

	input[type="range"]::-webkit-slider-thumb {
		width: $control-choice-size;
		height: $control-height-sm;
		margin-top: calc(-#{$control-height-sm} / 2);
		border: $border-width-base solid $color-secondary;
		background: $color-secondary;
		-webkit-appearance: none;
	}

	input[type="range"]::-moz-range-track {
		height: $border-width-accent;
		background: $surface-panel-strong;
		border: $border-width-base solid $border-color-muted;
	}

	input[type="range"]::-moz-range-thumb {
		width: $control-choice-size;
		height: $control-height-sm;
		border: $border-width-base solid $color-secondary;
		border-radius: 0;
		background: $color-secondary;
	}
}

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

	.file-upload-header {
		flex-direction: column;
		align-items: stretch;
	}

	.file-upload-dropzone {
		grid-template-columns: 1fr;
	}

	.file-upload-actions {
		justify-content: stretch;

		.btn {
			width: 100%;
		}
	}
}

.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: $border-width-base solid $color-primary;
		width: $control-choice-size;
		height: $control-choice-size;
		background: transparent;
		transition-duration: $motion-base;
		transition-property: background, border-color;
	}

	@include hover_touch {
	 .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;
	}

	input[type="radio"]:focus-visible + .radio-control {
		@include focus_ring;
	}

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

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

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

	.checkbox-control {
		height: $control-switch-height;
		width: $control-switch-width;
		border: $border-width-base solid $color-primary;
		position: relative;
		background: transparent;
		transition-duration: $motion-base;
		transition-property: border-color, background;
		display: block;
	}

	.checkbox-control:before {
		content: "";
		display: block;
		height: $control-switch-knob;
		width: $control-switch-knob;
		background: $color-primary;
		position: absolute;
		left: -$space-1;
		top: -$space-1;
		transition-duration: $motion-base;
		transition-property: left, background;
	}

	@include hover_touch {
		.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: $control-switch-width - $control-switch-knob + $space-1;
	}

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

	input[type="checkbox"]:focus-visible + .checkbox-control {
		@include focus_ring;
	}

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