:host(nine-splitter) {
	flex: 0 0 6px;
}

:host(nine-splitter.h) {
	div.inner-container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	div.grip {
		background-repeat: no-repeat;
		background-position: center;
		filter: drop-shadow(0 0 0.5px #666);
		transition: filter 0.2s ease;
	}

	div.grip:hover {
		filter: drop-shadow(0 0 1px #333);
	}
}

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

	div.grip {
		cursor: col-resize;
		display: flex;
		height: 100%;
		width: 8px;
		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>");
	}
}

:host(nine-splitter.v) {
	display: flex;
	flex-direction: row;
	height: 8px;

	div.grip {
		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>");
	}
}

:host(nine-popup) {
	display: none; position: fixed; top:0; left:0; width:100vw; height:100vh; z-index: 9999;
	&.open {
		display: block;
	}
	.popup-dimmed { position:absolute; width:100%; height:100%; background: rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; }
	.popup-content { background: #fff; border-radius: 8px; min-width: 400px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
	.popup-header { padding: 15px; border-bottom: 1px solid #eee; font-weight: bold; }
	.popup-body { padding: 20px; min-height: 150px; }
}