.PanelResizeLineHandle {
	background-color: var(--color-base-300);
	position: relative;
	--size: 1px;

	&:hover,
	&[data-resize-handle-state="hover"],
	&[data-resize-handle-state="drag"] {
		&::before {
			background-color: oklch(from var(--color-base-300) calc(l - 0.2) c h);
			position: absolute;
			inset: 0;
			content: "";
			z-index: 30;
		}

		&[data-resize-handle-state="drag"] {
			/* stronger vision indication */

			&::before {
				background-color: var(--color-info);
			}
		}
	}

	&[data-panel-group-direction="horizontal"] {
		width: var(--size);
		cursor: col-resize;

		&::before {
			width: 3px;
			height: 100%;
			translate: -1px 0;
		}
	}

	&[data-panel-group-direction="vertical"] {
		height: var(--size);
		cursor: row-resize;

		&::before {
			width: 100%;
			height: 3px;
			translate: 0 -1px;
		}
	}
}