as-select2range {
    --color-active: var(--as-color-accent);
    --color-active-darker: var(--as-color-accent-strong);
    --color-active-dark: var(--as-color-text-strong);
    --color-inactive: var(--as-color-text-neutral);
    --size: var(--as-size-m);
    display: block;
    min-width: calc(15 * var(--size));
    width: 100%;
}

as-select2range>div {
    position: relative;
}

as-select2range div[aria-live] {
    display: inline-block;
    padding-inline: var(--as-space-s);
    padding-block: var(--as-space-s);
    border-radius: var(--as-border-radius);
    background-color: var(--as-color-background-nav-weak);
    font-size: var(--as-font-size-m);
}

as-select2range select {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 38px;
    z-index: 1;
    width: 100%;
}

as-select2range [markers] {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 1 * var(--size));
    margin-inline: auto;
}

as-select2range [markers]>div {
    width: 1px;
    height: calc(.5 * var(--size));
    background-color: var(--color-active-dark);
}

as-select2range input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    margin-block-start: 0;
    margin-block-end: var(--size);
    margin-inline: 0;
    width: 100%;
    background: unset;
    outline: none;
}

as-select2range input[type=range]::-webkit-slider-runnable-track {
    box-shadow: 0 calc(.25 * var(--size)) calc(.5 * var(--size)) rgb(0 0 0 / .1);
    width: 100%;
    height: var(--size);
    cursor: pointer;
    background-image: linear-gradient(90deg, var(--color-active) 0%, var(--color-active) var(--val), var(--color-inactive) var(--val), var(--color-inactive));
    border-radius: calc(.5 * var(--size));
}

as-select2range input[type=range]::-webkit-slider-thumb {
    height: calc(2 * var(--size));
    width: calc(1 * var(--size));
    border-radius: calc(1 * var(--size));
    background-color: var(--color-active-dark);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: calc(-.5 * var(--size));
}

as-select2range input[type=range]:is(:HOVER, :FOCUS, :ACTIVE)::-webkit-slider-thumb {
    background-color: var(--color-active-darker);
    outline: calc(.25 * var(--size)) solid var(--color-active);
    outline-offset: calc(.125 * var(--size));
    outline-style: solid;
}