.container {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--dev-panel-spacing-md);
	align-items: center;
	width: 100%;
}

.range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: var(--dev-panel-border-radius-full);
	background: var(--dev-panel-input-background-color);
	border: 1px solid var(--dev-panel-input-border-color);
	outline: none;
	cursor: pointer;
	transition: var(--dev-panel-transition);

	&:hover {
		border-color: var(--dev-panel-input-border-color-hover);
	}

	&:focus {
		border-color: var(--dev-panel-input-border-color-focus);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--dev-panel-accent-color) 20%, transparent);
	}

	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 20px;
		height: 20px;
		border-radius: var(--dev-panel-border-radius-full);
		background: var(--dev-panel-accent-color);
		cursor: pointer;
		border: 2px solid var(--dev-panel-foreground-color);
		box-shadow: var(--dev-panel-shadow-md);
		transition: var(--dev-panel-transition);

		&:hover {
			transform: scale(1.1);
			background: var(--dev-panel-accent-color-hover);
			box-shadow: var(--dev-panel-shadow-lg);
		}

		&:active {
			transform: scale(0.95);
			background: var(--dev-panel-accent-color-active);
		}
	}

	&::-moz-range-thumb {
		width: 20px;
		height: 20px;
		border-radius: var(--dev-panel-border-radius-full);
		background: var(--dev-panel-accent-color);
		cursor: pointer;
		border: 2px solid var(--dev-panel-foreground-color);
		box-shadow: var(--dev-panel-shadow-md);
		transition: var(--dev-panel-transition);

		&:hover {
			transform: scale(1.1);
			background: var(--dev-panel-accent-color-hover);
		}

		&:active {
			transform: scale(0.95);
			background: var(--dev-panel-accent-color-active);
		}
	}

	&::-moz-range-track {
		width: 100%;
		height: 6px;
		border-radius: var(--dev-panel-border-radius-full);
		background: var(--dev-panel-input-background-color);
		border: 1px solid var(--dev-panel-input-border-color);
	}

	&::-ms-track {
		width: 100%;
		height: 6px;
		background: transparent;
		border-color: transparent;
		color: transparent;
	}

	&::-ms-fill-lower {
		background: var(--dev-panel-accent-color);
		border-radius: var(--dev-panel-border-radius-full);
	}

	&::-ms-fill-upper {
		background: var(--dev-panel-input-background-color);
		border-radius: var(--dev-panel-border-radius-full);
	}

	&::-ms-thumb {
		width: 20px;
		height: 20px;
		border-radius: var(--dev-panel-border-radius-full);
		background: var(--dev-panel-accent-color);
		cursor: pointer;
		border: 2px solid var(--dev-panel-foreground-color);
		box-shadow: var(--dev-panel-shadow-md);
	}

	&:disabled {
		cursor: not-allowed;
		opacity: var(--dev-panel-opacity-50);

		&::-webkit-slider-thumb {
			cursor: not-allowed;
			background: var(--dev-panel-text-color-disabled);
		}

		&::-moz-range-thumb {
			cursor: not-allowed;
			background: var(--dev-panel-text-color-disabled);
		}

		&::-ms-thumb {
			cursor: not-allowed;
			background: var(--dev-panel-text-color-disabled);
		}
	}
}

.value {
	font-size: var(--dev-panel-font-size-sm);
	color: var(--dev-panel-text-color);
	font-weight: var(--dev-panel-font-weight-medium);
	width: 7ch;
	text-align: right;
	user-select: none;
	padding: var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);
	background: var(--dev-panel-input-background-color);
	border: 1px solid var(--dev-panel-input-border-color);
	border-radius: var(--dev-panel-border-radius);
	font-family: var(--dev-panel-font-family);
}
