.input {
	position: relative;
	width: 100%;
	color: var(--text-color);
	background-color: transparent;
	background-image: none;
	background-clip: padding-box;
	appearance: none;
	border: 1px solid var(--co-gray-60);
	accent-color: var(--co-alpha);

	@include bitSize();

	@if $useBorderRadius {
		border-radius: $border-radius-1;
		&.is-lg { border-radius: .6rem; }
	} @else {
		border-radius: 0;
	}

	&::placeholder {
		color: var(--co-gray-40);
	}

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

	&:focus {
		border-color: var(--co-alpha);
		outline: 0;
	}

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

	&[readonly] {
		background-color: var(--co-gray-80);
		&:focus {
			border-color: var(--co-gray-60);
		}
	}

	&[type="file"] {
		padding-top: 0;
		padding-bottom: 0;
		cursor: pointer;

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

		&::file-selector-button {
			pointer-events: none;
			height: 3.8rem;
			padding: 0 $sp-4;
			margin-left: -$sp-4;
			margin-right: $sp-4;
			border: 0;
			color: var(--text-color);
			border-right: 1px solid var(--co-gray-60);
			background-color: var(--co-muted);
		}

		&:hover::file-selector-button {
			background-color: color-mix(in srgb, var(--co-muted), #fff 10%);
		}

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

// data-required for editor text area
label:has([required]),
label:has([data-required]) {
	.input-title {
		&:after {
			content: ' *';
		}
	}
}

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;
	+ .is-input-error {
		margin-top: -1rem;
	}
}

/* @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 color-mix(in srgb, var(--co-theme-0) 5%, transparent);
			}

			.was-validated &:invalid {
				~ .has-ico { border-color: var(--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 var(--co-gray-50);
			background-color: var(--co-theme-1);

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

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

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

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

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

			.has-ico {
				width: $sp-6;
				border-radius: $sp-6;
				background-color: var(--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 var(--co-gray-50);
					background-color: var(--co-theme-1);
					border-radius: 50%;
					transform: translate3d(0,0,0);
					transition: transform .15s ease-in-out;
				}
			}

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

			.was-validated & input:invalid ~ .has-ico::after {
				border-color: var(--co-error);
			}
		}
	}
} */

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

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

		&:focus-visible {
			outline: 1px solid var(--text-color);
		}

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

		&[disabled] { opacity: 0.5;}
	}

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

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

			&:focus-visible ~ .has-ico {
				box-shadow: 0 0 0 8px color-mix(in srgb, var(--co-theme-0) 10%, transparent);
			}

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

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

		.has-ico {
			position: absolute;
			left: 0;
			top: $sp-1;
			width: $sp-6;
			height: $sp-4;
			border: 1px solid var(--co-gray-50);
			border-radius: $sp-6;
			background-color: var(--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 var(--co-gray-50);
				background-color: var(--co-gray-90);
				border-radius: 50%;
				transform: translate3d(0,0,0);
				transition: transform .15s ease-in-out;
			}
		}

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

		.was-validated & input:invalid ~ .has-ico::after {
			border-color: var(--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: var(--co-error);
	}
}

.input-floating {
	position: relative;

	.input {
		padding-top: 1.8rem;
		height: 5.6rem;

		&: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: var(--co-theme-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 var(--co-gray-60);
				@if $useBorderRadius { border-radius: $border-radius-1;}
			}
			&:focus ~ .input-floating-bd {
				border-color: var(--co-alpha);
			}
		}

		.was-validated & .input:invalid {
			border-color: transparent;
			~ .input-floating-bd { border-color: var(--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-small;
		// 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%);
		opacity: .7;
	}

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

.input-char-counter {
	position: absolute;
	top: 0;
	right: 0;
	padding: $sp-1 $sp-2 .2rem;
	line-height: 1;
	font-size: $font-size-small;
	color: var(--co-base-1);
	border-radius: $border-radius-1;
	background-color: var(--co-gray-60);
}

.input-sh {
	.btn:not(.is-visible) .ico:last-child { display: none; }
	.btn.is-visible .ico:first-child { display: none; }
}

html[data-theme="dark"] {
	select > option {
		color: var(--text-color);
		background-color: var(--co-gray-80);
	}

	.input-icon {
		&-ico {
			opacity: .5;
		}
	}
}