.line {
	position: absolute;
	z-index: 100;
	display: block;
	background: var(--color-red);
	pointer-events: none;

	--line-width: 1px;
	--icon-size: 6px;
}

.horizontal {
	left: 50%;
	width: var(--line-width);
	height: 100%;
	transform: translateX(-50%);
}

.vertical {
	top: 50%;
	width: 100%;
	height: var(--line-width);
	transform: translateY(-50%);
}

.horizontal::before,
.horizontal::after,
.vertical::before,
.vertical::after {
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1C1.69785 1.69785 2.84781 2.84781 4 4M7 7C6.2921 6.2921 5.14495 5.14495 4 4M4 4L7 1M4 4L1 7' stroke='%23f24822' stroke-width='1'/%3E%3C/svg%3E%0A");
	content: ' ';
}

.horizontal::before {
	top: 0;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
.horizontal::after {
	bottom: 0;
	left: 50%;
	transform: translate3d(-50%, 50%, 0);
}

.vertical::before {
	top: 50%;
	left: 0;
	transform: translate3d(-50%, -50%, 0);
}
.vertical::after {
	top: 50%;
	right: 0;
	transform: translate3d(50%, -50%, 0);
}
