.as-button-range-wrapper {
    border-top: 1px solid rgb(209, 209, 213);
    border-bottom: 1px solid rgb(209, 209, 213);
}

.as-button-range {
    position: relative;
    overflow-y: hidden;
    height: var(--height);
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    --underline-left: 0;
    --underline-width: 0;
    --height: 2em;
}

.as-button-range-scroller {
    font-size: inherit;
    height: calc(var(--height) + 17px);
    box-sizing: border-box;
    overflow-x: scroll;
    position: absolute;
    top: 0;
    left: 0.5em;
    right: 0.5em;
    white-space: nowrap;
}

.as-button-range-scroller::after {
    content: "";
    position: absolute;
    left: var(--underline-left);
    width: var(--underline-width);
    height: 0.2em;
    top: calc(var(--height) - 0.2em);
    background-color: rgb(0, 106, 255);
    transition: left 0.2s, width 0.2s;
}

.as-button-range-left-ctn,
.as-button-range-right-ctn {
    position: absolute;
    top: 0;
    bottom: 0;
}

.as-button-range-right-ctn::after,
.as-button-range-left-ctn::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.as-button-range-left-ctn {
    left: 0;
}

.as-button-range-right-ctn {
    right: 0;
}

.as-button-range-right-btn,
.as-button-range-left-btn {
    font-size: inherit;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    border: none;
    outline: none;
    color: rgb(0, 106, 266);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0.5em;
    overflow: hidden;
}

.as-button-range-left-btn {
    -webkit-box-shadow: 1em 2px 1.5em -1em rgba(255, 255, 255, 0.62);
    -moz-box-shadow: 1em 2px 1.5em -1em rgba(255, 255, 255, 0.62);
    box-shadow: 1em 2px 1.5em -1em rgba(255, 255, 255, 0.62);
}

.as-button-range-right-btn {
    -webkit-box-shadow: -1em 2px 1.5em -1em rgba(255, 255, 255, 0.62);
    -moz-box-shadow: -1em 2px 1.5em -1em rgba(255, 255, 255, 0.62);
    box-shadow: -1em 2px 1.5em -1em rgba(255, 255, 255, 0.62);
}

.as-button-range-right-btn polygon,
.as-button-range-left-btn polygon {
    fill: #2488FF;
}

.as-button-range-right-btn:disabled,
.as-button-range-left-btn:disabled {
    display: none;
}

.as-button-range-left-btn > svg,
.as-button-range-right-btn > svg {
    width: 1.25em;
    height: 1.25em;
    margin-left: -0.25em;
    margin-right: -0.25em;
    vertical-align: middle;
}


.as-button-range-item {
    outline: none;
    font-size: inherit;
    padding: 0 0.5em;
    margin: 0;
    height: var(--height);
    border: none;
    background-color: transparent;
    color:  var(--dark-color);
}

.as-button-range-item.as-active {
    color: rgb(87, 157, 255);
}