/**
 * Strategic Owner Toolkit - Side Scroll Line
 *
 * Sizes and colours match the line on thestrategicowner.com. Colour and
 * distance from the edge come from Settings > Strategic Owner as
 * --tso-sl-color and --tso-sl-x (printed inline with this file).
 */

/* Fixed line: fades in from the top, out at the bottom. Sits under most
   sticky headers (Elementor's default is z-index 99). */
.tso-scroll-line {
	position: fixed;
	top: 0;
	bottom: 0;
	left: var(--tso-sl-x, 32px);
	z-index: 40;
	width: 1px;
	background: linear-gradient(transparent, rgba(30, 173, 115, .5), transparent);
	background: linear-gradient(transparent, color-mix(in srgb, var(--tso-sl-color, #1ead73) 50%, transparent), transparent);
	pointer-events: none;
}

.tso-scroll-line__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tso-sl-color, #1ead73);
	box-shadow: 0 0 10px rgba(30, 173, 115, .6);
	box-shadow: 0 0 10px color-mix(in srgb, var(--tso-sl-color, #1ead73) 60%, transparent);
	transform: translate(-50%, -50%);
}

/* Markers live in the page (not fixed), so they scroll past the line with
   the content. One layer under the line, as on the live site. */
.tso-scroll-markers {
	position: absolute;
	top: 0;
	left: var(--tso-sl-x, 32px);
	z-index: 39;
	width: 1px;
	height: 0;
	pointer-events: none;
}

.tso-scroll-marker {
	position: absolute;
	left: 50%;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
}

.tso-scroll-marker--diamond {
	width: 12px;
	height: 12px;
	background: var(--tso-sl-color, #1ead73);
	transform: translate(-50%, -50%) rotate(45deg);
}

.tso-scroll-marker--diamond-outline {
	width: 16px;
	height: 16px;
	border: 2px solid var(--tso-sl-color, #1ead73);
	transform: translate(-50%, -50%) rotate(45deg);
}

.tso-scroll-marker--circle-outline,
.tso-scroll-marker--circle {
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(30, 173, 115, .5);
	box-shadow: 0 0 12px color-mix(in srgb, var(--tso-sl-color, #1ead73) 50%, transparent);
}

.tso-scroll-marker--circle-outline {
	width: 20px;
	height: 20px;
	border: 2px solid var(--tso-sl-color, #1ead73);
	background: rgba(30, 173, 115, .2);
	background: color-mix(in srgb, var(--tso-sl-color, #1ead73) 20%, transparent);
}

.tso-scroll-marker--circle {
	width: 14px;
	height: 14px;
	background: var(--tso-sl-color, #1ead73);
}

@media print {
	.tso-scroll-line,
	.tso-scroll-markers {
		display: none;
	}
}