:host(.h) {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	--border: 1px solid red;
	--width: 8px;

	div.inner-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
}


div.grip-h {
	cursor: col-resize;
	display: flex;
	height: 100%;
	width: 8px;
	--border: 1px solid red;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><circle cx='10' cy='3' r='1.5' fill='%23999'/><circle cx='10' cy='8' r='1.5' fill='%23999'/><circle cx='10' cy='13' r='1.5' fill='%23999'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 0 0.5px #666);
	transition: filter 0.2s ease;
}
div.grip-h:hover {
	filter: drop-shadow(0 0 1px #333);
}

:host(.v) {
	display: flex;
	flex-direction: row;
	--justify-content: center;
	--border: 1px solid red;
	height: 8px;

	div.inner-container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
}

div.grip-v {
	cursor: row-resize;
	display: flex;
	width: 100%;
	height: 8px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='20'><circle cx='3' cy='10' r='1.5' fill='%23999'/><circle cx='8' cy='10' r='1.5' fill='%23999'/><circle cx='13' cy='10' r='1.5' fill='%23999'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 0 0.5px #666);
	transition: filter 0.2s ease;
}
div.grip-v:hover {
	filter: drop-shadow(0 0 1px #333);
}