/*
Disclaimer: This CSS is used by a custom web component and is scoped to JUST
the corresponding web component. Importing this into other files is forbidden
*/

@use "../mixins/material";
@use "./common.scss";

.container {
	@include material.elevate(4);
	display: grid;
	flex-direction: row;
	gap: 4px;
	border-radius: 4px;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	padding: 4px;
	box-sizing: border-box;
}

input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;

	&:focus ~ .container {
		@include material.elevate(8)
	}
}

.range-increment {
	grid-row: 1;

	&:empty {
		@include material.elevate(4);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 2px;
		margin: 0;
		cursor: pointer;
		width: 1.25rem;
		height: 1.25rem;
		position: relative;

		&:hover {
			@include material.elevate(8);
		}

		&.filled::before {
			content: "";
			background: var(--checkbox-checked);
			border-radius: 3px;
			$margin: 4px;
			top: $margin;
			bottom: $margin;
			left: $margin;
			right: $margin;
			position: absolute;
		}
	}
}