@import "~@knowbly/tools-global";
@import "mixins";
@import "videojs";

$primary-default-color: #0096c6;
$progress-color: #ffc246;
$primary-foreground-color: rgba(0, 0, 0, 0.5);
$primary-background-color: rgba(0, 0, 0, 0.8);
$primary-text-color: #ffffff;

.video-js:not(.kb-vjs-ignore) {
    font-family: Lato, "Open Sans", sans-serif;
    font-size: 16px;
    width: 100%;

    &:hover {
        cursor: pointer;
    }

    .vjs-control:focus {
        text-shadow: none;
    }

    .vjs-play-progress {
        background-color: $progress-color;
    }

    .vjs-mouse-display {
        opacity: 0;
    }

    &.vjs-disable-progress {
        .vjs-progress-holder {
            pointer-events: none;
        }
    }

    .vjs-modal-dialog {
        background: $primary-background-color;
    }

    .vjs-error-display {
        &::before {
            display: none;
        }
    }

    .w-bpb-wrapper,
    .w-bottom-bar {
        display: none !important;
    }

    .vjs-error {
        .vjs-error-display {
            .vjs-modal-dialog-content {
                font-family: inherit;
                font-size: 10px;
                padding: 4px 16px;
            }
        }
    }

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

    .vjs-icon-play:hover .vjs-icon-placeholder::before,
    .vjs-play-control:hover .vjs-icon-placeholder::before,
    .vjs-icon-pause:hover .vjs-icon-placeholder::before,
    .vjs-play-control.vjs-playing:hover .vjs-icon-placeholder::before,
    .vjs-icon-volume-high:hover .vjs-icon-placeholder::before,
    .vjs-mute-control:hover .vjs-icon-placeholder::before,
    .vjs-volume-panel:hover .vjs-icon-placeholder::before,
    .vjs-icon-volume-mute:hover .vjs-icon-placeholder::before,
    .vjs-mute-control.vjs-vol-0:hover .vjs-icon-placeholder::before,
    .vjs-icon-volume-low:hover .vjs-icon-placeholder::before,
    .vjs-mute-control.vjs-vol-1:hover .vjs-icon-placeholder::before,
    .vjs-icon-volume-mid:hover .vjs-icon-placeholder::before,
    .vjs-mute-control.vjs-vol-2:hover .vjs-icon-placeholder::before,
    .vjs-chapters-button:hover .vjs-icon-placeholder::before,
    .vjs-fullscreen-control:hover .vjs-icon-placeholder::before {
        background: $primary-default-color;
    }

    .vjs-loading-spinner {
        width: 48px;
        height: 48px;
        margin: -24px 0 0 -24px;
    }

    // Not Ready
    &:not(.is-ready) {
        .vjs-loading-spinner {
            display: block;
            animation: 0s linear 0.3s forwards vjs-spinner-show;

            &::before,
            &::after {
                animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
                    vjs-spinner-fade 1.1s linear infinite;
            }
        }
    }

    @import "./knowbly-video";

    @import "./knowbly-audio";
}

//Font Awesome 5

.vjs-captions-button .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f20a" !important;
}

.vjs-play-control .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px, "solid");

    content: "\f04b" !important;
    padding-left: 2px;
}

.vjs-play-control.vjs-playing .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px, "solid");

    content: "\f04c" !important;
    padding-left: 0;
}

.vjs-icon-volume-mute .vjs-icon-placeholder::before,
.vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f2e2" !important;
}

.vjs-icon-volume-low .vjs-icon-placeholder::before,
.vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f026" !important;
}

.vjs-icon-volume-mid .vjs-icon-placeholder::before,
.vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f027" !important;
}

.vjs-mute-control .vjs-icon-placeholder::before,
.vjs-icon-volume-high .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f028" !important;
}

.vjs-chapters-button .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f03a" !important;
}

.vjs-fullscreen-control .vjs-icon-placeholder::before {
    @include video-js-icon(16px, btn, 32px);

    content: "\f320" !important;
}

.vjs-fullscreen {
    .vjs-fullscreen-control .vjs-icon-placeholder::before {
        content: "\f326" !important;
    }
}

.fr-media-container {
    overflow: hidden;
    display: block;
    position: relative;
}

.video-js .vjs-captions-button .vjs-icon-placeholder::before {
    font-size: 18px;
}

@import "knowbly-fr";