.portalx {
	.px-slider {
		--slider-border-radius: 2px;

		cursor: pointer;
		margin: var(--spacing-xs) 0;

		background: linear-gradient(
			to bottom,
			transparent calc(50% - var(--slider-border-radius) / 2),
			var(--colour-filter-track) calc(50% - var(--slider-border-radius) / 2),
			var(--colour-filter-track) calc(50% + var(--slider-border-radius) / 2),
			transparent calc(50% + var(--slider-border-radius) / 2)
		);
		border: none;

		.slider-handle {
			border: var(--slider-border-radius) solid var(--color-primary);
			border-radius: 50%;
			height: 18px;
			width: 18px;

			&:hover {
				background: var(--color-primary);
				border-color: var(--color-primary);
			}

			&:active {
				background: var(--color-primary-hover);
				border-color: var(--color-primary-hover);
			}

			&:focus-visible {
				--focus-indicator-size: 2px;
				outline: var(--slider-border-radius) solid var(--color-primary);
				outline-offset: var(--focus-indicator-size);
				box-shadow: 0 0 0 var(--focus-indicator-size) white;
			}

		}

		.slider-range {
			background: linear-gradient(
				to bottom,
				transparent calc(50% - var(--slider-border-radius) / 2),
				var(--color-primary) calc(50% - var(--slider-border-radius) / 2),
				var(--color-primary) calc(50% + var(--slider-border-radius) / 2),
				transparent calc(50% + var(--slider-border-radius) / 2)
			);
		}
	}
}