.bp-media-scrubber-container {
    position: relative;
    width: 100%;
    height: 16px;
}

.bp-media-scrubber-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
}

.bp-media-scrubber {
    position: absolute;
    top: 7px; /* Wrapper is 16px high. Bar is 3px high leaving 13px. 7px for top buffer and 6px for bottom. */
    left: -50%;
    width: 100%;
    height: 3px;
}

.bp-media-scrubber-converted,
.bp-media-scrubber-buffered,
.bp-media-scrubber-played,
.bp-media-scrubber-underlay {
    position: absolute;
    height: 3px;
    transition: transform .1s ease-in-out; /* timing is double of handle timing since bar scales to 2 instead of 1 */
}

.bp-media-scrubber-converted {
    background-color: rgba($white, .5);
    cursor: pointer;
}

.bp-media-scrubber-buffered {
    position: absolute;
    height: 3px;
    background-color: $white;
}

.bp-media-scrubber-played {
    background-color: $box-blue;
    cursor: pointer;
}

.bp-media-scrubber-underlay {
    width: 100%;
    cursor: not-allowed;
}

.bp-media-scrubber-handle {
    position: absolute;
    top: -4.25px;
    width: 12px;
    height: 12px;
    margin-left: -6px; // Half of the width, to account for the width of the handle
    background-color: $box-blue;
    border-radius: 6px;
    transform: scale(0);
    cursor: pointer;
    transition: transform .05s ease-in-out; /* timing is half of bar timing since handle scales to 1 instead of 2 */
}

.bp-media-scrubber-container:hover .bp-media-scrubber-handle,
.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-handle {
    transform: scale(1);
}

.bp-media-scrubber-container:hover .bp-media-scrubber-converted,
.bp-media-scrubber-container:hover .bp-media-scrubber-buffered,
.bp-media-scrubber-container:hover .bp-media-scrubber-played,
.bp-media-scrubber-container:hover .bp-media-scrubber-underlay,
.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-converted,
.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-buffered,
.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-played,
.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-underlay {
    transform: scaleY(2);
}

.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-handle {
    transform: scale(1);
}

.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-converted,
.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-buffered,
.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-played,
.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-underlay {
    transform: scaleY(2);
}
