.Progress {
    height: 6px;
    padding-bottom: 2px;
    position: relative;
    width: 100%;

    &[data-fullscreen=true] {
        height: 10px;
    }

    &-range {
        -webkit-appearance: none;
        display: block;
        height: 100%;
        width: 100%;
    }

    &-range::-webkit-slider-runnable-track {
        background: #000;
        cursor: pointer;
        height: 100%;
        width: 100%;
    }
    &-range::-moz-range-track {
        background: #000;
        cursor: pointer;
        height: 4px;
        width: 100%;
    }
    &-range::-ms-track {
        background: #000;
        cursor: pointer;
        height: 100%;
        width: 100%;
    }
    &-range::-ms-fill-lower {
        background: #000;
    }
    &-range::-ms-fill-upper {
        background: #000;
    }

    &-range[data-started=true]::-webkit-slider-runnable-track {
        background: $timberwolf;
    }
    &-range[data-started=true]::-moz-range-track {
        background: $timberwolf;
    }
    &-range[data-started=true]::-ms-track {
        background: $timberwolf;
    }
    &-range[data-started=true]::-ms-fill-lower {
        background: $timberwolf;
    }
    &-range[data-started=true]::-ms-fill-upper {
        background: $timberwolf;
    }

    &-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        background: $koala;
        border-radius: 50%;
        cursor: pointer;
        height: 8px;
        position: relative;
        top: -2px;
        transition: height .15s, width .15s;
        visibility: hidden;
        width: 8px;
    }
    &-range::-moz-range-thumb {
        -webkit-appearance: none;
        background: $koala;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        height: 8px;
        position: relative;
        top: -2px;
        transition: height .15s, width .15s;
        visibility: hidden;
        width: 8px;
    }
    &-range::-ms-thumb {
        -webkit-appearance: none;
        background: $koala;
        border-radius: 50%;
        cursor: pointer;
        height: 8px;
        position: relative;
        top: -2px;
        transition: height .15s, width .15s;
        visibility: hidden;
        width: 8px;
    }

    &-range[data-started=true]::-webkit-slider-thumb {
        visibility: visible;
    }
    &-range[data-started=true]::-moz-range-thumb {
        visibility: visible;
    }
    &-range[data-started=true]::-ms-thumb {
        visibility: visible;
    }

    &-range[data-playing=true]::-webkit-slider-thumb {
        background: $fox;
    }
    &-range[data-playing=true]::-moz-range-thumb {
        background: $fox;
    }
    &-range[data-playing=true]::-ms-thumb {
        background: $fox;
    }

    &-range:focus {
        outline: none;
    }

    &-range:hover::-webkit-slider-thumb {
        height: 10px;
        top: -3px;
        transition: height .15s, width .15s;
        width: 10px;
    }
    &-range:hover::-moz-range-thumb {
        height: 10px;
        top: -3px;
        transition: height .15s, width .15s;
        width: 10px;
    }
    &-range:hover::-ms-thumb {
        height: 10px;
        top: -3px;
        transition: height .15s, width .15s;
        width: 10px;
    }

    &[data-fullscreen=true] &-range::-moz-range-track {
        height: 8px;
    }
    &[data-fullscreen=true] &-range::-webkit-slider-thumb {
        height: 16px;
        top: -4px;
        width: 16px;
    }
    &[data-fullscreen=true] &-range::-moz-range-thumb {
        height: 16px;
        top: -4px;
        width: 16px;
    }
    &[data-fullscreen=true] &-range::-ms-thumb {
        height: 16px;
        top: -4px;
        width: 16px;
    }
    &[data-fullscreen=true] &-range:hover::-webkit-slider-thumb {
        height: 20px;
        top: -6px;
        width: 20px;
    }
    &[data-fullscreen=true] &-range:hover::-moz-range-thumb {
        height: 20px;
        top: -6px;
        width: 20px;
    }
    &[data-fullscreen=true] &-range:hover::-ms-thumb {
        height: 20px;
        top: -6px;
        width: 20px;
    }

    &-value {
        background: $koala;
        cursor: pointer;
        display: inline-block;
        float: left;
        height: 4px;
        pointer-events: none;
        position: absolute;
        top: 0;
    }

    &[data-fullscreen=true] &-value {
        height: 8px;
    }

    &-value[data-playing=true] {
        background: $fox;
    }
}