.supt-line {
	pointer-events: none;

	&:not(.-glow) {
		display: block;
		width: var(--line-xs-width);
		height: var(--line-xs-height);
		background-color: $color-grey-2;

		@media (min-width: $breakpoint-md) {
			width: var(--line-md-width);
			height: var(--line-md-height);
		}

		.supt-line__inner {
			position: absolute;
			top: 0;
			left: 0;
			width: var(--line-xs-width);
			height: var(--line-xs-height);
			background-color: $color-main;
			transform-origin: top;

			@media (min-width: $breakpoint-md) {
				width: var(--line-md-width);
				height: var(--line-md-height);
			}
		}
	}

	&.-glow {
		position: relative;
		width: 100%;
		height: 100%;

		.supt-line__line {
			position: relative;
			display: block;
			width: 1px;
			height: 100%;
			background-color: $color-new;
			left: 50%;
			transform: translateX(-50%);
		}

		.supt-line__glow {
			position: absolute;
			top: 0;
			left: calc(-50% + 1px);
			width: auto;
			height: 100%;
			transform-origin: top;
			overflow: visible;
			transform: scaleY(1.2) translateX(-50%);
			stroke-dasharray: 600;
		}
	}
}