.handle {
	--size: 1.5em;
	flex: 0 0 var(--size);
	position: relative;
	outline: none;
	--background-color: #efefef;
}

.handle:hover {
	--background-color: #dbdbdb;
}

.handle[data-resize-handle-active] {
	--background-color: #f5f5f5;
}

.handle > div {
	position: absolute;
	top: 0.25em;
	bottom: 0.25em;
	left: 0.25em;
	right: 0.25em;
	background-color: var(--background-color);
	border: 1px solid #0000000f;
	border-radius: 4px;
	transition: background-color 0.2s linear;
}

.handle[data-panel-group-direction="horizontal"] > div {
	top: 0;
	bottom: 0;
}

.handle[data-panel-group-direction="vertical"] > div {
	left: 0;
	right: 0;
}

.handle svg {
	width: calc(var(--size) * 0.666);
	height: 1em;
	position: absolute;
	left: calc(50% - ((var(--size) * 0.666) / 2));
	top: calc(50% - ((var(--size) * 0.666) / 2));
}

.handle[data-panel-group-direction="horizontal"] svg {
	transform: rotate(90deg);
}

.LineHandle {
	background-color: var(--color-base-200);

	&:hover,
	&[data-resize-handle-state="hover"] {
		background-color: var(--color-base-300);
	}

	&[data-panel-group-direction="horizontal"] {
		width: 1px;
	}

	&[data-panel-group-direction="vertical"] {
		height: 1px;
	}
}