.input {
	position: relative;
	width: 100%;
	color: $text-color;
	background-color: $co-base-1;
	background-image: none;
	background-clip: padding-box;
	appearance: none;
	border: 1px solid $co-gray-70;
	border-radius: 2.6rem;

	@include bitSize($hasHeight:true);


	&::placeholder {
		color: $co-gray-40;
	}

	.was-validated &:invalid {
		z-index: 10;
		border-color: $co-error;
	}

	&:focus {
		border-color: $co-alpha;
		outline: 0;
	}

	&[list] {
		@include hover() {
			&::-webkit-calendar-picker-indicator {
				opacity: .5;
			}
		}
	}

	&[type="file"] {
		padding-top: 0;
		padding-bottom: 0;
		cursor: pointer;
		background-color: $co-base-1;

		&:not(:disabled):not([readonly]) {
			overflow: hidden;
		}

		&::file-selector-button {
			pointer-events: none;
			height: $btn-input-size-md;
			padding: 0 $sp-4;
			margin-left: -$sp-4;
			margin-right: $sp-4;
			border: 0;
			color: $text-color;
			border-right: 1px solid $co-gray-70;
			background-color: $co-gray-80;
		}

		&:hover::file-selector-button {
			background-color: lighten($co-gray-80, 3%);
		}

		&[disabled]:hover::file-selector-button {
			background-color: $co-gray-80;
		}
	}
}

input[list],
select.input {
	line-height: $line-height-base;
	padding-right: $sp-5;
	background-repeat: no-repeat;
	background-position: right $sp-1 center;
	background-size: 16px 12px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

input[list]::-webkit-calendar-picker-indicator {
	display: none !important;
}

textarea.input {
	display: block;
	height: auto;
	max-width: 100%;
	resize: vertical;
	padding-top: $sp-3;
	padding-bottom: $sp-3;
}

.input-title {
	display: inline-block;
	margin-bottom: $sp-1;
}

@if 'custom' and false {
	.input-check {
		position: relative;
		padding-left: 1.3em;

		input {
			opacity: 0;
			position: absolute;
			left: 0;

			&:focus ~ .has-ico {
				box-shadow: 0 0 0 8px rgba($co-base-0,.05);
			}

			.was-validated &:invalid {
				~ .has-ico { border-color: $co-error;}
			}

			&[disabled] ~ .has-ico { opacity: 0.5;}
		}

		.has-ico {
			position: absolute;
			left: 0;
			top: $sp-1;
			width: $sp-4;
			height: $sp-4;
			border: 1px solid $co-gray-50;
			background-color: $co-base-1;

			&::after {
				content:"";
				position: absolute;
			}
		}

		&-checkbox {
			input:checked ~ .has-ico {
				border-color: $co-alpha;
				background-color: $co-alpha;
				&::after {
					top: $sp-1;
					bottom: $sp-1;
					left: 0.2rem;
					right: 0.2rem;
					border-left: 2px solid $co-base-1;
					border-bottom: 2px solid $co-base-1;
					transform: rotate(-45deg) translate3d(0.1rem, -0.1rem, 0);
				}
			}
		}

		&-radio {
			.has-ico { border-radius: 50%; }

			input:checked ~ .has-ico {
				border-color: $co-alpha;
				&::after {
					top: 0.2rem;
					bottom: 0.2rem;
					left: 0.2rem;
					right: 0.2rem;
					border-radius: 50%;
					background-color: $co-alpha;
				}
			}
		}

		&-switch {
			padding-left: $sp-6 + .8;

			.has-ico {
				width: $sp-6;
				border-radius: $sp-6;
				background-color: $co-gray-90;
				&::after {
					top: -0.2rem;
					left: -0.2rem;
					width: ($sp-4 + .4);
					height: ($sp-4 + .4);
					margin-top: -0.1rem;
					margin-left: -0.1rem;
					border: 1px solid $co-gray-50;
					background-color: $co-base-1;
					border-radius: 50%;
					transform: translate3d(0,0,0);
					transition: transform .15s ease-in-out;
				}
			}

			input:checked ~ .has-ico {
				border-color: $co-alpha;
				background-color: $co-alpha;
				&::after {
					border-color: $co-alpha;
					transform: translate3d($sp-4,0,0);
					background-color: $co-base-1;
				}
			}

			.was-validated & input:invalid ~ .has-ico::after {
				border-color: $co-error;
			}
		}
	}
}

.input-check {
	position: relative;
	padding-left: 2rem;
	cursor: pointer;

	input {
		accent-color: $co-alpha;
		position: absolute;
		left: 0;
		top: 0.3em;

		&:focus-visible {
			outline: 1px solid $text-color;
		}

		.was-validated &:invalid {
			outline: 1px solid $co-error;
			outline-offset: 2px;
		}

		&[disabled] { opacity: 0.5;}
	}

	&-switch {
		padding-left: $sp-6 + .8;

		input {
			opacity: 0 !important;
			position: absolute;
			left: 0;

			&:focus-visible ~ .has-ico {
				box-shadow: 0 0 0 8px rgba($co-base-0,.1);
			}

			.was-validated &:invalid {
				~ .has-ico { border-color: $co-error;}
			}

			&[disabled] ~ .has-ico { opacity: 0.5;}
		}

		.has-ico {
			position: absolute;
			left: 0;
			top: $sp-1;
			width: $sp-6;
			height: $sp-4;
			border: 1px solid $co-gray-50;
			border-radius: $sp-6;
			background-color: $co-gray-90;

			&::after {
				content:"";
				position: absolute;
				top: -0.2rem;
				left: -0.2rem;
				width: ($sp-4 + .4);
				height: ($sp-4 + .4);
				margin-top: -0.1rem;
				margin-left: -0.1rem;
				border: 1px solid $co-gray-50;
				background-color: $co-base-1;
				border-radius: 50%;
				transform: translate3d(0,0,0);
				transition: transform .15s ease-in-out;
			}
		}

		input:checked ~ .has-ico {
			border-color: $co-alpha;
			background-color: $co-alpha;
			&::after {
				border-color: $co-alpha;
				transform: translate3d($sp-4,0,0);
				background-color: $co-base-1;
			}
		}

		.was-validated & input:invalid ~ .has-ico::after {
			border-color: $co-error;
		}
	}
}

.input-datepicker {
	position: relative;

	input {
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding: 0;
		width: auto;
		height: auto;
		opacity: 0;
		pointer-events: none;
	}

	.input:focus-visible {
		box-shadow: none;
	}

	&.input-floating:not(.has-value) {
		.input-title {
			font-size: $font-size-base;
			transform: translate3d(0,1.8rem,0);
		}
	}

	.was-validated & input:invalid + .input-icon .input {
		border-color: $co-error;
	}
}

.input-floating {
	position: relative;

	.input {
		padding-top: 2rem;
		height: $btn-input-size-lg;

		&:placeholder-shown ~ .input-title {
			font-size: $font-size-base;
			transform: translate3d(0,1.6rem,0);
		}

		&::placeholder { opacity: 0;}

		&:focus::placeholder { opacity: 1;}
	}

	// select.input {
	// 	padding-top: 2.2rem;
	// }

	&-textarea {
		padding-top: $sp-5;
		background-color: $co-base-1;

		.input {
			position: relative;
			height: auto;
			min-width: 100%;
			max-height: none;
			padding-top: 0;
			border-color: transparent;
			display: block;

			~ .input-floating-bd {
				position: absolute;
				pointer-events: none;
				inset: 0;
				border: 1px solid $co-gray-70;
				// @if $useBorderRadius { border-radius: $border-radius-1;}
			}
			&:focus ~ .input-floating-bd {
				border-color: $co-alpha;
			}
		}

		.was-validated & .input:invalid {
			border-color: transparent;
			~ .input-floating-bd { border-color: $co-error;}
		}
	}

	.input-title {
		pointer-events: none;
	}

	.input-title,
	.input:focus  ~ .input-title {
		position: absolute;
		top: 0;
		left: $sp-4;
		right: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		z-index: 10;
		font-size: $font-size-xsmall;
		// line-height: $font-size-small + .2;
		transform: translate3d(0,.4rem,0);
		transition: transform .3s ease-in-out, font-size .3s ease-in-out;
	}
}

.input-icon {
	position: relative;

	.input { padding-right: $sp-5 + .8;}

	select.input {
		background-image: none;
	}

	&-ico.ico {
		pointer-events: none;
		position: absolute;
		top: 50%;
		right: .5em;
		transform: translateY(-50%);
	}

	&-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		padding: 0 $sp-2;
		display: flex;
		align-items: center;
	}
}

.form-group-captcha {
	container-type: inline-size;
	container-name: captcha;
	display: flex;
	flex-wrap: wrap;
	gap: $sp-1;

	> label {
		width: 19rem;
	}

	&-code {
		display: flex;
		gap: $sp-3;
	}
}

@container captcha (max-width: 540px) {
	.form-group-captcha {
		> label {
			width: 100%;
		}
	}
}