.octane-slider {
    display: flex;
    align-items: center;
    width: 100%;
    height: 25px;

    .track {
        height: 3px;
        border-radius: .25rem;
        overflow: hidden;

        &.track-0 {
            background-color: #418db0;
        }

        &.track-1 {
            background-color: #b6bec5;
        }
    }

    .thumb {
        border-radius: 50%;
        width: 25px;
        height: 25px;
        background-color: gray;
        font-size: 10px;
        text-align: center;
        line-height: 25px;
        padding: 0 3px;

        &:hover,
        .active {
            cursor: pointer;
        }

        &.active {
            outline: none;
        }

        &.degree {

            &:after {
                content: '\00b0'
            }
        }

        &.percent {

            &:after {
                content: '\0025'
            }
        }
    }
}
.octane-slider.octane-slider--compact {
    height: 16px;

    .thumb {
        width: 12px;
        height: 12px;
        padding: 0;
        line-height: 12px;
    }
}