@layer range-slider-element {
	range-slider {
        --track-size: 0.4rem;
        --thumb-size: 1.3rem;
		position: relative;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		block-size: var(--thumb-size);
		inline-size: 99%;
		outline: none;
		user-select: none;
		-webkit-user-select: none;
		touch-action: none
	}

    &:not([orientation="vertical"]) {
        inline-size: 100%;
    }

	range-slider[orientation=vertical] {
		flex-direction: column;
		inline-size: var(--thumb-size);
		block-size: 130px
	}

	range-slider [data-track] {
		pointer-events: none;
		flex: 1;
		block-size: var(--track-size);
		border-radius: inherit;
		box-sizing: inherit
	}

	range-slider[orientation=vertical] [data-track] {
		inline-size: var(--track-size);
		block-size: 100%
	}

	range-slider [data-track-fill] {
		background-color: var(--c-p);
		block-size: var(--track-size);
		border-start-start-radius: inherit;
		border-end-start-radius: inherit;
		box-sizing: inherit;
		pointer-events: none;
		position: absolute;
		/*
		pointer-events: none;
		position: absolute;
		block-size: var(--track-size);
		border-start-start-radius: inherit;
		border-end-start-radius: inherit;
		box-sizing: inherit
		*/
	}

	range-slider[orientation=vertical] [data-track-fill] {
		inline-size: var(--track-size);
		block-size: auto;
		border-start-start-radius: unset;
		border-end-end-radius: inherit
	}

	range-slider [data-runnable-track] {
		pointer-events: none;
		position: absolute;
		inset: 0;
		box-sizing: inherit
	}

	range-slider[orientation=vertical] [data-runnable-track] {
		inset: calc(var(--thumb-size) / 2) 0;
	}

	range-slider [data-thumb] {
		pointer-events: auto;
		touch-action: none;
		inline-size: var(--thumb-size);
		block-size: var(--thumb-size);
		position: absolute;
		margin-inline-start: calc(var(--thumb-size) / 2 * -1);
		box-sizing: inherit;
	}

	range-slider [data-thumb]:active {
		scale: 1.2;
		cursor: pointer;
		span.min{
			scale: none;
		}
	}
	range-slider [data-thumb]:focus-visible {
		outline: 2px solid var(--c-p);
		cursor: pointer;
	}

	range-slider[orientation=vertical] [data-thumb] {
		margin-inline-start: unset;
		margin-block: calc(var(--thumb-size) / 2 * -1)
	}

	range-slider {
		border-radius: var(--track-size);
		margin: 2px
	}

	range-slider:active {
		opacity: .8
	}

	range-slider[disabled] {
		filter: grayscale(1);
		opacity: .4
	}

	range-slider [data-track] {
		background-color: #515560;
	}


	range-slider [data-thumb] {
		background-color: var(--c-p);
		border-radius: 100%;
		border: 2px solid white;
		cursor: pointer;
	}
}