.slider.svelte-x7oaj0.svelte-x7oaj0 {
    ---track-width: var(--track-width, unset);
    ---track-height: var(--track-height, 6px);
    ---track-background: var(--track-background, #949494);
    ---track-border: var(--track-border, none);
    ---thumb-size: var(--thumb-size, 16px);
    ---thumb-background: var(--thumb-background, #2d2d2d);
    ---thumb-border: var(--thumb-border, none);
    ---position: var(--position, 0px);
    ---margin-inline-thumb-bigger: max(var(---thumb-size) - var(---track-height), 0px);
    ---margin-inline-thumb-smaller: max(var(---track-height) - var(---thumb-size), 0px);
    position: relative;
    margin: auto;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

[aria-orientation=horizontal].svelte-x7oaj0.svelte-x7oaj0 {
    width: var(---track-width);
    max-width: calc(100% - 2 * var(---margin-inline-thumb-bigger));
    height: calc(max(var(---track-height),var(---thumb-size)) + 4px);
    height: max(var(---track-height),var(---thumb-size));
    margin-inline:var(---margin-inline-thumb-bigger);margin-block: var(--margin-block, 8px)
}

[aria-orientation=vertical].svelte-x7oaj0.svelte-x7oaj0 {
    width: calc(max(var(---track-height),var(---thumb-size)) + 4px);
    width: max(var(---track-height),var(---thumb-size));
    height: var(---track-width);
    max-height: calc(100% - 2 * var(---margin-inline-thumb-bigger));
    margin-block:var(---margin-inline-thumb-bigger);margin-inline: var(--margin-block, 8px)
}

.track.svelte-x7oaj0.svelte-x7oaj0 {
    position: absolute;
    pointer-events: none;
    background: var(---track-background);
    border: var(---track-border);
    border-radius: calc(var(---track-height) / 2);
    box-sizing: border-box
}

[aria-orientation=horizontal].svelte-x7oaj0 .track.svelte-x7oaj0 {
    height: var(---track-height);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0
}

[aria-orientation=vertical].svelte-x7oaj0 .track.svelte-x7oaj0 {
    width: var(---track-height);
    left: 50%;
    transform: translate(-50%);
    top: 0;
    bottom: 0
}

.thumb.svelte-x7oaj0.svelte-x7oaj0 {
    pointer-events: none;
    position: absolute;
    height: var(---thumb-size);
    width: var(---thumb-size);
    border-radius: calc(var(---thumb-size) / 2);
    background: var(---thumb-background);
    border: var(---thumb-border);
    box-sizing: border-box;
    transform: translate(-50%,-50%);
    --margin-left: ( 2 * var(---track-height) - var(---thumb-size) - var(---margin-inline-thumb-smaller) ) / 2;
    --left: calc(var(---position) * (100% - 2 * var(--margin-left)) + var(--margin-left))
}

[aria-orientation=horizontal].svelte-x7oaj0:not(.reverse) .thumb.svelte-x7oaj0 {
    top: 50%;
    left: var(--left)
}

[aria-orientation=vertical].svelte-x7oaj0:not(.reverse) .thumb.svelte-x7oaj0 {
    left: 50%;
    bottom: calc(var(--left) - var(---thumb-size))
}

[aria-orientation=horizontal].reverse.svelte-x7oaj0 .thumb.svelte-x7oaj0 {
    top: 50%;
    right: calc(var(--left) - var(---thumb-size))
}

[aria-orientation=vertical].reverse.svelte-x7oaj0 .thumb.svelte-x7oaj0 {
    left: 50%;
    top: calc(var(--left))
}

.slider.svelte-x7oaj0.svelte-x7oaj0:focus-visible {
    outline: none
}

.slider.svelte-x7oaj0:focus-visible .track.svelte-x7oaj0 {
    outline: 2px solid var(--focus-color, red);
    outline-offset: 2px
}