.input,
.input-b,
.input-l,
.input-before,
.input-after {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	position: relative;

	& > input,
	& > select,
	& > textarea {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		color: var(--ink);
		font-family: inherit;
		font-size: .9375rem;
		line-height: 1.4;
		min-height: 2.75rem;
		outline: none;
		padding: .625rem .75rem;
		resize: none;
		text-overflow: ellipsis;
		transition: border-color .15s ease, box-shadow .15s ease;
		width: 100%;

		&:disabled {
			opacity: .5;
			pointer-events: none;
			user-select: none;
		}

		&:focus {
			border-color: var(--accent);
			box-shadow: var(--focus);
		}

		&::placeholder {
			color: var(--placeholder);
		}

		&::-webkit-scrollbar {
			height: .4rem;
			width: .4rem;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--line-strong);
			border-radius: 3px;
		}
	}

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

	& > input[type="checkbox"] + .toogle {
		margin: .25rem 0;
	}

	& > input[type="checkbox"]:checked + .toogle {
		background: var(--accent);

		&::before {
			left: 1.25rem;
		}
	}

	&.active > input,
	&.active > select,
	&.active > textarea {
		border-color: var(--accent);
	}

	& > label {
		color: var(--ink-2);
		font-size: .875rem;
		font-weight: 500;
		user-select: none;
	}
}

.input-b {
	& > input,
	& > select,
	& > textarea {
		border-width: 0 0 1px 0;
		border-radius: 0;
		padding: .625rem 0;
	}
}

.input-l {
	& > label {
		background: var(--surface);
		left: .6rem;
		padding: 0 .25rem;
		position: absolute;
		top: 0;
		transform: translateY(-50%);
		z-index: 1;
	}
}

.input-before,
.input-after {
	& > input,
	& > select {
		padding-left: 3rem;
	}

	& > label {
		align-items: center;
		bottom: 0;
		display: flex;
		justify-content: center;
		left: 0;
		position: absolute;
		top: 0;
		width: 2.5rem;
		z-index: 1;
	}
}

.input-after {
	& > input,
	& > select {
		padding-left: .75rem;
		padding-right: 3rem;
	}

	& > label {
		left: initial;
		right: 0;
	}
}