// Video theme setup
$bigplaybutton-size: 80px;
$bigplaybutton-mobile-size: 74px;

&.kb-vjs-video {
    $transition-duration: 0.2s;

    height: 0;
    padding-bottom: 56.25%;

    // Z-INDEX
    // stylelint-disable-next-line
    z-index: 9;

    .vjs-big-play-button {
        border-radius: 50%;
        border: none;
        background-color: $primary-foreground-color;
        color: $primary-text-color;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: background-color ease-in-out $transition-duration, width $transition-duration,
            height $transition-duration !important;
        width: $bigplaybutton-size;
        height: $bigplaybutton-size;

        .vjs-icon-placeholder::before {
            @include video-js-icon(36px, false, false, "solid");

            content: "\f04b" !important;
            padding-left: 4px;
            transition: font-size $transition-duration, line-height $transition-duration;
        }

        &:hover {
            background-color: $primary-default-color;
            color: $primary-text-color;
        }
    }

    .vjs-control-bar {
        background-color: $primary-background-color;
        padding: 0 6px 0 4px;
        width: 100%;
        height: 16px;
        min-height: 16px;
        margin: 0 auto;
        position: absolute;
        border-radius: 8px;
        align-items: center;
        transform-origin: center;

        &:last-of-type {
            background-color: transparent;
            position: absolute;
            display: flex;
            flex-direction: column;
            order: 9;
            width: 32px !important;
            height: 128px;
            padding: 0;
            max-width: none;
            min-height: auto;
            margin: 0;
            transform: none;
            border-radius: 0;
            bottom: auto;

            .vjs-control {
                margin-bottom: 16px;
            }
        }

        .vjs-captions-button {
            order: 2;
            height: 32px;
            &.hide-caption-button {
                display: none !important;
            }
            .vjs-menu {
                display: block !important;
                width: 32px;
                height: 32px;
                bottom: 0px;
                left: 0px !important;
                position: absolute;
                opacity: 0;
                margin: 0;
                .vjs-menu-content {
                    position: absolute;
                    width: 32px !important;
                    height: 32px !important;
                    bottom: 0 !important;
                    overflow: hidden;

                    // stylelint-disable-next-line
                    .vjs-menu-item {
                        width: 32px !important;
                        height: 32px !important;

                        // stylelint-disable-next-line
                        &.vjs-selected {
                            display: none;
                            padding: 0;
                        }
                    }
                }
                .vjs-texttrack-settings {
                    display: none;
                }
            }
        }
    }

    .vjs-progress-control {
        width: 100%;
        max-height: 8px;
        margin: 0 8px 0 4px;

        .vjs-progress-holder {
            border-radius: 4px;
            margin: 0;
            background-color: rgba(white, 0.5);
            height: 100%;

            .vjs-load-progress {
                overflow: hidden;
                border-radius: 4px;
                background: transparent;
                height: 100%;

                div {
                    background-color: rgba(black, 0.4) !important;
                    height: 100%;
                }
            }

            .vjs-play-progress {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;

                .vjs-time-tooltip {
                    display: none;
                }

                &::before {
                    color: white;
                    font-size: 10px;
                    top: -1px;
                }
            }
        }

        .vjs-mouse-display {
            background-color: $primary-text-color;
        }

        &:hover {
            .vjs-progress-holder {
                font-size: inherit;
            }
        }
    }

    .vjs-time-control {
        font-family: inherit;
        font-size: 12px;
        line-height: 16px;
        margin-top: -1px;
    }

    .vjs-current-time,
    .vjs-time-divider,
    .vjs-duration {
        z-index: 1;
        padding: 0;
        pointer-events: none;
        display: inline-flex;
        align-items: center;
    }

    .vjs-time-divider {
        min-width: 8px;
        text-align: center;
        margin-left: 4px;
    }

    .vjs-captions-button,
    .vjs-mute-control,
    .vjs-fullscreen-control {
        display: block;
        width: 32px;
        height: 32px;
        padding: 0;

        .vjs-icon-placeholder::before {
            font-size: 18px;
            background-color: $primary-foreground-color;
        }

        &:hover .vjs-icon-placeholder::before,
        &.show-closed-caption .vjs-icon-placeholder::before {
            background-color: $primary-default-color;
        }
    }

    .vjs-fullscreen-control {
        order: 1;
    }

    .vjs-mute-control {
        order: 3;
    }

    .vjs-captions-button {
        display: block !important;
        border-radius: 50%;
        overflow: hidden;
    }

    .vjs-play-control,
    .vjs-volume-panel,
    .vjs-volume-panel.vjs-volume-panel-vertical,
    .vjs-volume-panel.vjs-volume-panel-horizontal,
    .vjs-volume-panel .vjs-mute-control,
    .vjs-chapters-button,
    .vjs-fullscreen-control {
        width: 32px;
        display: inline-flex;
        align-items: center;
    }

    .vjs-control:focus::before,
    .vjs-control:hover::before,
    .vjs-control:focus {
        text-shadow: none;
        z-index: 1;
    }

    &.vjs-vimeo {
        .vjs-poster {
            display: inline-block !important;
            background-color: transparent !important;

            &:not(.vjs-hidden) {
                background-color: black !important;
            }
        }

        &.vjs-has-started .vjs-poster {
            background-image: none !important;
            background-color: transparent !important;
        }
    }

    &.vjs-youtube-mobile {
        &.vjs-playing.vjs-user-inactive {
            .vjs-big-play-button {
                display: none;
            }
        }
        .vjs-big-play-button {
            display: block;
            width: $bigplaybutton-mobile-size;
            height: $bigplaybutton-mobile-size;
        }

        &.vjs-controls-disabled .vjs-big-play-button,
        &.vjs-has-started:not(.iPhone) .vjs-big-play-button,
        &.vjs-using-native-controls .vjs-big-play-button,
        &.vjs-error .vjs-big-play-button {
            display: none;
        }

        &.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
            display: block;
        }
    }

    // VIDEO RESIZE
    &[data-player-size~="vjs-xsmall-player"] {
        .vjs-control-bar {
            width: calc(100% - 16px);
            bottom: 8px;

            &:last-of-type {
                top: 8px;
                left: calc(100% - 40px);

                .vjs-control {
                    margin-bottom: 8px;
                }
            }
        }

        .vjs-big-play-button {
            width: $bigplaybutton-mobile-size;
            height: $bigplaybutton-mobile-size;

            .vjs-icon-placeholder::before {
                font-size: 30px;
                line-height: 30px;
                padding-left: 2px;
                margin-top: -1px;
            }
        }
    }

    &[data-player-size~="vjs-large-player"] {
        .vjs-control-bar {
            bottom: 10px;
            max-width: 480px;

            &:not(:last-of-type) {
                width: calc(100% - 32px);
            }

            &:last-of-type {
                left: calc(100% - 48px);
                top: 16px;
            }
        }
    }

    // Player States
    &.vjs-playing {
        .vjs-big-play-button .vjs-icon-placeholder::before {
            content: "\f04c" !important;
            padding-left: 0;
        }
    }

    &.vjs-user-active,
    &.vjs-paused {
        .vjs-big-play-button {
            display: block;
        }
    }

    &.vjs-user-inactive.vjs-has-started,
    &:not(.vjs-has-started) {
        .vjs-control-bar {
            display: none;
        }
    }

    // Not Ready
    &:not(.is-ready) {
        .vjs-big-play-button {
            opacity: 0;
        }
    }

    > * {
        z-index: 5;
    }

    .vjs-tech {
        z-index: -1;
    }

    .vjs-resize-manager {
        z-index: -2;
    }
}