@use "sass:math";
// http://www.scriptsmashup.com/Video_Skin_Generator/Videojs/videojs-skin-generator.html

$vjs-color-primary: #ea5451 !default;
$vjs-color-secondary: #00a9a4 !default;
$vjs-color-dark: #223843 !default;
$vjs-color-dark-rgb: 34,56,67 !default;
$vjs-color-medium: #989aa2 !default;
$vjs-color-medium-rgb: 152,154,162 !default;
$vjs-color-light: #eff1f3 !default;
$vjs-color-light-rgb: 239,241,243 !default;

$vjs-big-play-button-color: $vjs-color-light;
$vjs-big-play-button-color-background: unquote("rgba(#{$vjs-color-dark-rgb}, 0.4)");
$vjs-big-play-button-active-color-background: $vjs-color-dark;

$vjs-control-bar-color: $vjs-color-light;
$vjs-control-bar-color-background: unquote("rgba(#{$vjs-color-dark-rgb}, 0.54)");

$vjs-play-progress-color-background: $vjs-color-secondary;
$vjs-load-progress-color-background: unquote("rgba(#{$vjs-color-light-rgb}, 0.3)");
$vjs-progress-holder-color-background: unquote("rgba(#{$vjs-color-medium-rgb}, 0.54)");

$vjs-menu-item-color: $vjs-color-light;
$vjs-menu-item-color-background: unquote("rgba(#{$vjs-color-dark-rgb}, 0.84)");
$vjs-menu-item-hover-color-background: unquote("rgba(#{$vjs-color-dark-rgb}, 0.54)");
$vjs-menu-item-selected-color-background: $vjs-color-secondary;
$vjs-menu-title-color-background: $vjs-color-medium;

$vjs-chapters-title-color-background: transparent;
$vjs-chapters-color-background: unquote("rgba(#{$vjs-color-dark-rgb}, 0.64)");

$vjs-loading-spinner-color: $vjs-color-dark;

$vjs-volume-bar-color-background: unquote("rgba(#{$vjs-color-light-rgb}, 0.54)");
$vjs-volume-level-color-background: $vjs-color-secondary;

$vjs-slider-color-background: unquote("rgba(#{$vjs-color-light-rgb}, 0.54)");

$vjs-track-setting-selected-color: $vjs-color-dark;

.video-js *,
.video-js:after,
.video-js:before {
    box-sizing: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit
}

.video-js {
    font-size: 14px;
    overflow: hidden;
    background: $vjs-color-dark;
    background-size: cover;
    background-repeat: no-repeat;

    .vjs-layout-container {
        background-size: cover;
        background-repeat: no-repeat;
        background-clip: border-box;
    }

    // menu button inline
    .vjs-menu-button-inline {
        .vjs-menu {
            left: 3em;
        }
    }
    .vjs-menu-button-inline.vjs-slider-active,
    .vjs-menu-button-inline:focus,
    .vjs-menu-button-inline:hover {
        width: 10em; // width: 8.35em;
    }
    &.vjs-no-flex {
        .vjs-menu-button-inline {
            width: 8.35em; // width: 10em;
        }
    }
    .vjs-menu-button-inline:before {
        width: 1.5em;
    }

    // Big play button
    .vjs-big-play-button {
        margin-left: -1em;
        margin-top: -1em;
        width: 2em;
        height: 2em;
        line-height: 2em;
        border: none;
        border-radius: 50%;
        font-size: 10em;
        background-color: $vjs-big-play-button-color-background;
        color: $vjs-big-play-button-color;
        -webkit-transition: border-color .4s,outline .4s,background-color .4s;
        -moz-transition: border-color .4s,outline .4s,background-color .4s;
        -ms-transition: border-color .4s,outline .4s,background-color .4s;
        -o-transition: border-color .4s,outline .4s,background-color .4s;
        transition: border-color .4s,outline .4s,background-color .4s;
    }
    &.vjs-has-started {
        .vjs-big-play-button {
            font-size: 4em;
        }
    }
    &.vjs-paused.vjs-has-started,
    &.vjs-ended,
    &.vjs-paused {
        .vjs-big-play-button {
            display: block;
        }
    }
    &.vjs-seeking,
    &.vjs-waiting,
    &.vjs-waiting-pip,
    &.vjs-controls-disabled {
        .vjs-big-play-button {
            display: none!important;
        }
    }
    
    &:hover .vjs-big-play-button,
    .vjs-big-play-button:focus,
    .vjs-big-play-button:active {
        background-color: $vjs-big-play-button-active-color-background;
    }

    // Control

    .vjs-control {
        width: 3em;
        color: inherit;
        &:focus:before,
        &:hover:before {
            text-shadow: 0 0 1em #fff,0 0 1em #fff,0 0 1em #fff;
        }
    }

    .vjs-slider {
        background-color: $vjs-slider-color-background;
    }

    // time control
    .vjs-time-control {
        display: flex;
        flex: 0 1 auto;
        width: auto;
        padding: 0;

        &.vjs-time-divider {
            width: 14px;
            div {
                width: 100%;
                text-align: center;
            }
        }
        &.vjs-current-time {
            margin-left: 1em;
        }

        .vjs-current-time-display,
        .vjs-duration-display {
            width: 100%;
        }
        .vjs-current-time-display {
            text-align: right;
        }
        .vjs-duration-display {
            text-align: left;
        }
    }
    &.vjs-live {
        .vjs-time-control.vjs-current-time,
        .vjs-time-control.vjs-duration,
        .vjs-time-control.vjs-time-divider {
            display: none;
        }
        .vjs-live-control {
            margin-left: 1em;
        }
    }
    .vjs-remaining-time,
    &.vjs-no-flex .vjs-time-control.vjs-remaining-time {
        display: none;
    }
    &.vjs-no-flex .vjs-time-control {
        display: table-cell;
        width: 4em;
    }

    // Volume level
    .vjs-slider.vjs-volume-bar {
        background-color: $vjs-volume-bar-color-background;
        .vjs-volume-level {
            background-color: $vjs-volume-level-color-background;

            &:after,
            &:before {
                display: none;
            }
        }
    }

    // Control Bar
    .vjs-control-bar {
        transition: transform .1s ease 0s;
        background-color: $vjs-control-bar-color-background !important;
        color: $vjs-control-bar-color;
        font-size: 13px;
        // progress control
        .vjs-progress-control {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: .5em;
            top: -.5em;
            &:hover {
                height: .5em; // 1.5em
                top: -.5em; // -1.5em
            }
            .vjs-mouse-display:after,
            .vjs-play-progress:after,
            .vjs-time-tooltip  {
                top: calc(-100% - 54px);
            }
            .vjs-play-progress {
                background-color: $vjs-play-progress-color-background;
                &:before {
                    font-size: 0.6em;
                    top: -0.25em;
                    right: -0.4em;
                }
                .vjs-time-tooltip,
                &:after {
                    display: none;
                }
            }
            &:not(:hover) {
                .vjs-play-progress:before {
                    display: none;
                }
            }

            .vjs-load-progress,
            .vjs-play-progress,
            .vjs-progress-holder {
                height: 100%;
            }
            .vjs-progress-holder {
                margin: 0;
            }
            .vjs-load-progress {
                background: $vjs-load-progress-color-background;
            }

            .vjs-progress-holder {
                background: $vjs-progress-holder-color-background;
            }
        }
    }
    .vjs-control-bar2 {
        background-color: #000000;
    }

    &.not-hover.vjs-has-started.vjs-paused.vjs-user-active,
    &.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive,
    &.not-hover.vjs-has-started.vjs-playing.vjs-user-active,
    &.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive,
    &.vjs-has-started.vjs-playing.vjs-user-inactive {
        .vjs-control-bar {
            visibility: visible;
            opacity: 1;
            -webkit-backface-visibility: hidden;
            transform: translateY(3em);
            transition: transform 1s ease 0s;
            .vjs-progress-control {
                height: .25em;
                top: -.25em;
                pointer-events: none;
                transition: height 1s,top 1s;
            }
        }
    }


    // Menu button popup
    .vjs-menu-button-popup {
        .vjs-menu {
            left: -3em;
            .vjs-menu-content {
                background-color: transparent;
                width: 12em;
                left: -3em;
                // padding-bottom: .5em;
            }
            .vjs-menu-item,
            .vjs-menu-title {
                background-color: $vjs-menu-item-color-background;
                margin: .3em 0;
                padding: .5em;
                border-radius: .3em;
                color: $vjs-menu-item-color;
            }
            .vjs-menu-item.vjs-selected {
                background-color: $vjs-menu-item-selected-color-background;
            }
            .vjs-menu-item:not(.vjs-selected):hover {
                background-color: $vjs-menu-item-hover-color-background;
            }
            .vjs-menu-title {
                border-radius: initial;
                background-color: $vjs-menu-title-color-background;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }
    .vjs-menu-button-popup.vjs-chapters-button {
        .vjs-menu {
            left: auto;
            right: -3em;
            .vjs-menu-content {
                left: auto;
                right: 0;
                width: 20em;
                background-color: $vjs-chapters-color-background;
                .vjs-menu-item,
                .vjs-menu-title {
                    border-radius: initial;
                }
                .vjs-menu-title {
                    background-color: $vjs-chapters-title-color-background;
                }
            }
        }
    }
    div.vjs-menu-button-popup.vjs-playback-rate {
        width: 3.5em;
        margin: 0;
        .vjs-playback-rate-value {
            font-size: 1.3em;
            line-height: math.div(3, 1.3);
        }
        .vjs-menu {
            left: auto;
            right: 100%;
            margin: 0;
            height: 100%;
            .vjs-menu-content {
                left: auto;
                right: 8px;
                bottom: 0;
                padding: 0;
                height: 100%;
                width: auto;
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                .vjs-menu-item {
                    min-width: 40px;
                    font-size: 1.2em;
                    border-radius: 2px;
                    margin: 0 1px;
                    padding: 4px;
                }
            }
        }
    }

    // Track settings
    .vjs-track-setting {
        select {
            color: $vjs-track-setting-selected-color;
        }
    }
    // Other
    .vjs-load-progress div {
        display: none!important;
    }

    .vjs-mouse-display:after,
    .vjs-play-progress:after {
        padding: 0 .4em .3em;
    }

    .vjs-spacer {
        display: flex;
        flex: 1 1 auto
    }

    .vjs-loading-spinner {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border-width: 6px;
        border-color: $vjs-loading-spinner-color;
    }

    &.vjs-waiting-pip {
        .vjs-loading-spinner {
            display: block;
            animation: 0s linear 0.3s forwards vjs-spinner-show;
        }

        // only animate when showing because it can be processor heavy
        .vjs-loading-spinner:before,
        .vjs-loading-spinner:after {
            -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
            animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
        }

        .vjs-loading-spinner:before {
            border-top-color: rgb(255,255,255);
        }

        .vjs-loading-spinner:after {
            border-top-color: rgb(255,255,255);
            -webkit-animation-delay: 0.44s;
            animation-delay: 0.44s;
        }
    }

    &.vjs-ended {
        .vjs-loading-spinner {
            display: none;
        }

    }

    // fullscreen
    &.vjs-fullscreen {
        width: 100%!important;
        height: 100%!important;
    }
    
    // Youtube specific
    &.vjs-youtube {
        &.vjs-has-started.vjs-controls-enabled:not(.vjs-fullscreen) {
            > .vjs-tech-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                max-height: calc(100% - 3em);
            }
            .vjs-control-bar {
                transform: none !important;
                transition: none !important;
                .vjs-progress-control {
                    transition: none !important;
                }
            }
        }

        &.vjs-has-started.vjs-controls-enabled {
            .vjs-big-play-button {
                top: calc(50% - 19.5px);
            }
            .vjs-loading-spinner {
                top: calc(50% - 30px);
                left: calc(50% - 10px);
            }
        }

        &.vjs-paused.vjs-has-started.vjs-controls-enabled {
            .vjs-iframe-blocker {
                visibility: hidden;
                transition: visibility 0s .5s;
            }
        }
        &:not(.vjs-has-started) {
            .vjs-big-play-button,
            .vjs-poster {
                pointer-events: none;
            }
            .vjs-iframe-blocker {
                display: none;
            }
        }
    }

    //vimeo specific
    &.vjs-vimeo {
        .vjs-tech {
            > iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        &:not(.vjs-has-started) {
            .vjs-big-play-button,
            .vjs-poster {
                pointer-events: none;
            }
            .vjs-iframe-blocker {
                display: none;
            }
        }

        &.vjs-vimeo-mobile {
            .vjs-loading-spinner,
            .vjs-big-play-button,
            .vjs-poster,
            .vjs-control-bar {
                display: none;
            }
        }
    }

    // Pip (picture in picture plugin)
    .vjs-pip {
        .video-js {
            .vjs-loading-spinner {
                display: none;
            }
            &.vjs-youtube {
                > .vjs-tech-wrapper {
                    max-height: 100%;
                }
            }
        }
    }
}

@media (max-width: 1600px) {
    .video-js {
        &:not(.vjs-has-started) {
            .vjs-big-play-button {
                font-size: 8em;
            }
        }
    }
}

@media (max-width: 960px) {
    .video-js {
        &:not(.vjs-has-started) {
            .vjs-big-play-button {
                font-size: 6em;
            }
        }
    }
}

@media (max-width: 520px) {
    .video-js {    
        .vjs-playback-rate.vjs-menu-button-popup {
            .vjs-menu {
                display: none !important;
            }
        }
        &:not(.vjs-has-started) {
            .vjs-big-play-button {
                font-size: 4em;
            }
        }
    }
}
@media (max-width: 400px) {
    .video-js {
        .vjs-control-bar {
            font-size: 12px;
        }
        &.video-js .vjs-big-play-button {
            font-size: 3em;
        }      
    }
}

@media (max-width: 260px) {
    .video-js {
        &.video-js .vjs-big-play-button {
            font-size: 2.5em;
        }
    }
}
