/* ----------- slider input ----------- */
.slider {
	width: 100%;
	max-width: 30rem;
	height: 4px;
	padding: 0px;
	border: 0px;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--main-color-3);
	outline: none;
	opacity: 0.7;
	-webkit-transition: .15s;
	transition: opacity .15s;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	background: #d9d9d9;
	cursor: ew-resize;
}

.slider::-moz-range-thumb {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #d9d9d9;
	cursor: ew-resize;
}

.slider-accent::-moz-range-thumb { background: var(--accent-color-3); }
.slider-accent::-webkit-slider-thumb { background: var(--accent-color-3); }

.neoInput > * {
	outline: none;
	line-height: 1.3;
	font-size: 1rem;
}
/* ----------- text input ----------- */

.neoInput > label {
	display: block;
	margin-left: .5rem;
	transform: translateY(calc(100% + .5rem));
	color: hsl(0, 0%, 80%);
	transform-origin: top left;
	pointer-events: none;
	user-select: none;
}

.neoInput > input,
.neoInput > textarea,
.neoInput > select {
	width: 30rem;
	max-width: 100%;
	border-radius: 0px;
	padding: .5rem;
	border: 0px;
	border-bottom: 2px solid hsla(0, 0%, 50%, 0.4);
	background: hsla(0, 0%, 50%, 0.15);
}

.neoInput:has(:focus:not(button)) > label,
.neoInput:has([readonly]) > label,
.neoInput:has(.has-value) > label {
	transform: translateY(0px) scale(.85);
}

.neoInput:has(:focus:not(button)) > label {
	color: var(--accent-color-1);
}

.neoInput:has(:focus:not(button):not([readonly])) > :focus,
.neoInput:has(:focus:not(button):not([readonly])) > .action-bt {
	border-bottom: 2px solid var(--accent-color-1);
}

/* .neoInput > :invalid {
	border-bottom: 2px solid hsl(0, 80%, 60%);
} */

/* ----------- checkbox ----------- */
.neoInput:has(> input[type=checkbox]) {
	padding: .5rem;
	border: 0px;
	position: relative;
	background: hsla(0, 0%, 50%, 0.15);
	color: hsl(0, 0%, 80%);
	display: flex;
	align-items: center;
	gap: .5rem;
	line-height: 100%;
}

.neoInput > input[type=checkbox] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.neoInput:has(input[type=checkbox]):before {
	content: '';
	display: grid;
	place-items: center;
	border-radius: 2px;
	width: 1.5rem;
	height: 1.5rem;
	background: hsla(0, 0%, 50%, 0.15);
	transition: .15s ease-out;
}

.neoInput:has(input[type=checkbox]):hover:before {
	background: hsla(0, 0%, 50%, 0.5);
}

.neoInput:has(input[type=checkbox]:checked):before {
	content: "✔";
	font-weight: 300;
	color: hsl(120, 60%, 70%);
	background: hsla(120, 40%, 30%, 0.6);
}

/* ----------- select ----------- */
.neoInput > select {
	padding: .5rem;
	height: calc(2.3rem + 2px);
	background: hsla(0, 0%, 50%, 0.15);
}

.neoInput:has(select) > label {
	transform: translateY(0px) scale(.85);
}

/* ----------- buttons ----------- */

.action-bt {
	width: 2rem;
	height: calc(1rem + 1.3rem + 2px);
	margin: 0px;
	border-bottom: 2px solid hsla(0, 0%, 50%, .4);
	display: grid;
	place-items: center;
	position: absolute;
	right: 0px;
	bottom: 0px;
	background: hsla(0, 0%, 50%, .15);
	transition: .15s ease-out;
}

.action-bt::after {
	content: '';
	position: absolute;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .15s ease-out;
}

.action-bt:hover::after {
	background: hsla(0, 0%, 50%, .4);
}

.neoInput:has(.action-bt) > input,
.neoInput:has(.action-bt) > textarea,
.neoInput:has(.action-bt) > select {
	width: calc(100% - 2rem);
	max-width: calc(30rem - 2rem);
}
.neoInput:has(.action-bt),
.neoInput:has(.action-bt),
.neoInput:has(.action-bt) {
	position: relative;
}