.vidCustomControls {
    position: relative;
}

.vidControlsWrapper {
    position: absolute;
    bottom: 1.75em;
    left: 1.5em;
    width: calc(100% - 3em);
    display: flex;
    align-items: stretch;
}

.vidControl[type="button"] {
    width: 2.5em;
    height: 2.5em;
    max-width: 2.5em;
    max-height: 2.5em;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    border: none;
    padding: initial;
    background-color: transparent;
}

.vidControl[type="button"]:hover {
    background-color: transparent;
}

.vidControlsWrapper .vidPlay {
    background-image: var(--videoControlPlayImage);
    filter: var(--videoControlImageFilter);
}

.vidControlsWrapper .vidPause {
    background-image: var(--videoControlPauseImage);
    filter: var(--videoControlImageFilter);
}

.vidControlsWrapper .duration {
    align-self: center;
    flex: 1;
    color: var(--videoControlDurationThumbBackgroundColor);
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.vidControlsWrapper .duration,
.vidControlsWrapper .duration::-webkit-slider-runnable-track,
.vidControlsWrapper .duration::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    transition: all ease 100ms;
    height: var(--videoControlDurationThumbHeight);
}

.vidControlsWrapper .duration::-moz-range-track,
.vidControlsWrapper .duration::-moz-range-thumb,
.vidControlsWrapper .duration::-moz-range-progress {
    background: transparent;
}

.vidControlsWrapper .duration::-webkit-slider-runnable-track,
.vidControlsWrapper .duration::-webkit-slider-thumb {
    position: relative;
}

.vidControlsWrapper .duration::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--videoControlDurationThumbWidth);
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
        50% calc(var(--track-videoControlDurationSliderTrackHeight) + 1px);
    background-color: currentColor;
    --thumb-radius: calc((var(--videoControlDurationThumbHeight) * 0.5) - 1px);
    --clip-top: calc((var(--videoControlDurationThumbHeight) - var(--videoControlDurationSliderTrackHeight)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--videoControlDurationThumbHeight) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--videoControlDurationThumbWidth, var(--videoControlDurationThumbHeight))) 0 0 100vmax currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--videoControlDurationThumbWidth, var(--videoControlDurationThumbHeight));
    filter: brightness(100%);
    
    --clip-edges: 0.125em;
    clip-path: polygon(
        100% -1px,
        var(--clip-edges) -1px,
        0 var(--clip-top),
        -100vmax var(--clip-top),
        -100vmax var(--clip-bottom),
        0 var(--clip-bottom),
        var(--clip-edges) 100%,
        var(--clip-further) var(--clip-further)
    );
}

.vidControlsWrapper .duration::-webkit-slider-runnable-track {
    background: linear-gradient(var(--videoControlDurationSliderTrackBackgroundColor) 0 0) scroll no-repeat center /
    100% calc(var(--videoControlDurationSliderTrackHeight) + 1px);
}

.vidControlsWrapper .duration,
.vidControlsWrapper .duration::-moz-range-track,
.vidControlsWrapper .duration::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    transition: all ease 100ms;
    height: var(--videoControlDurationThumbHeight);
}

.vidControlsWrapper .duration::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--videoControlDurationThumbWidth, var(--videoControlDurationThumbHeight));
    border-radius: var(--videoControlDurationThumbWidth, var(--videoControlDurationThumbHeight));
    cursor: grab;
}

.vidControlsWrapper .duration::-moz-range-track {
    width: 100%;
    background: var(--videoControlDurationSliderTrackBackgroundColor);
}

.vidControlsWrapper .duration::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

.vidControlsWrapper .duration::-moz-range-track,
.vidControlsWrapper .duration::-moz-range-progress {
    height: calc(var(--videoControlDurationSliderTrackHeight) + 1px);
    border-radius: var(--videoControlDurationSliderTrackHeight);
}

.vidControlsWrapper .duration::-moz-range-thumb,
.vidControlsWrapper .duration::-moz-range-progress {
    filter: brightness(100%);
}

.vidControlsWrapper .vidMute {
    background-image: var(--videoControlMuteImage);
    filter: var(--videoControlImageFilter);
}

.vidControlsWrapper .vidUnMute {
    background-image: var(--videoControlUnMuteImage);
    filter: var(--videoControlImageFilter);
}

.vidControlsWrapper .vidFullScreen {
    background-image: var(--videoControlFullScreenImage);
    filter: var(--videoControlImageFilter);
}