.input {
	transition: 0.15s;
	font-size: var(--font-xs);

	&[type='text'],
	&[type='number'] {
		padding: 0.2rem 0.3rem;

		background: var(--bg-a);
		color: var(--fg-a);
		outline: none;
		border: 1px solid var(--bg-b);
		border-radius: var(--radius);

		&:focus-visible {
			border-color: var(--fg-d);
		}
	}

	&[type='number'] {
		width: 5rem;
	}

	&[type='range'] {
		width: 100%;

		background: none;
		appearance: none;

		&:focus-visible {
			outline: 1px solid var(--bg-d);
			border-radius: 50px;
		}

		&:active {
			outline: none;
		}
		&::-webkit-slider-runnable-track {
			width: 100%;
			height: 15px;

			border: 0.5px solid var(--bg-a);
			border-radius: 50px;
			background: var(--bg-b);

			cursor: pointer;

			transition: border-color 0.1s;

			&:hover {
				border-color: var(--bg-d);
			}
		}
		&::-webkit-slider-thumb {
			width: 12px;
			height: 12px;
			margin-top: 1px;

			border: 1px solid var(--bg-a);
			border-radius: 20px;
			background: var(--fg-d);
			background-image: radial-gradient(ellipse at var(--progress) var(--progress), blue, red);

			cursor: pointer;
			transition: background 0.3s;
			appearance: none;
			appearance: none;
		}
		&:active::-webkit-slider-thumb {
			background: var(--theme-a);
		}
	}
}

label:has(.input) {
	display: flex;
	gap: 0.25rem;

	width: 100%;
	margin: 0.5rem 0;

	color: var(--fg-c);

	font-family: var(--font);
	font-size: var(--font-xs);

	& input[type='range'] {
		margin-left: auto;

		width: 60%;
	}
}
