/***** SPEED SLIDER *****/
.slider {
    touch-action: manipulation;
    padding: 27px 10px 3px;
    display: inline-block;
    margin: 5px;
}

.track {
    width: 100px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--gray);
    background-color: white;

    position: relative;
    cursor: pointer;
}

.track::before, .track::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background-size: cover;
    bottom: calc(100% + 5px);
}

.track::before {
    background-image: url("https://umimeto.org/asset/global/img/speed-turtle.svg");
    left: -10px;
}
.track::after {
    background-image: url("https://umimeto.org/asset/global/img/speed-hare.svg");
    right: -10px;
}

.handle {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid var(--gray);
    background-color: var(--lightGray);

    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

    touch-action: none;
}

.handle:focus {
    border-color: var(--grayHover);
}

@media screen and (pointer: coarse) {
    .track {
        width: 200px;
        height: 15px;
    }
    .handle {
        width: 30px;
        height: 30px;
    }
}