// Audio theme set up

$audioHeight: 48px;
$audioPosterHeight: 80px;

&.kb-vjs-audio {
    background-color: transparent;
    max-width: 480px;
    height: $audioHeight;
    max-height: $audioHeight;
    margin: 0 auto;

    .vjs-big-play-button {
        display: none;
    }

    .vjs-slider {
        background-color: rgba(#fff, 0.5);
        .vjs-load-progress {
            background-color: transparent;
        }
        .vjs-load-progress div {
            background-color: rgba(0, 0, 0, 0.4);
        }
    }

    .vjs-control-bar {
        background-color: $primary-background-color;
        display: flex !important;
        height: $audioHeight;
        border-radius: 4px;
        padding: 8px 16px 8px 8px;
    }

    .vjs-play-control,
    .vjs-mute-control {
        width: 32px;
        height: 32px;
    }

    .vjs-play-control {
        margin-right: 8px;
    }

    .vjs-mute-control {
        margin-left: 8px;
    }

    .vjs-time-control {
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        padding: 0;
    }

    .vjs-progress-control {
        .vjs-progress-holder {
            height: 4px;
            border-radius: 8px;

            .vjs-load-progress {
                overflow: hidden;
                border-radius: 8px;
            }

            .vjs-play-progress {
                border-radius: 8px;

                &::before {
                    font-size: 10px;
                    top: -3px;
                    right: -4px;
                }
            }
        }

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

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

    &.vjs-audio--big-player {
        .vjs-control-bar {
            padding: 8px;

            &--inner {
                width: calc(100% - 40px);
                display: inline-flex;
                flex-direction: column;

                &-block {
                    position: relative;
                    display: inline-flex;
                    height: 50%;
                }
            }
        }

        .marquee {
            display: flex;
            white-space: nowrap;
            overflow: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 100;

            &__content {
                position: absolute;
                font-size: 14px;
                line-height: 14px;
                display: inline-block;
                text-align: left;
            }

            &.animation-play {
                .marquee__content {
                    animation: marquee 10s linear infinite forwards;
                }
            }

            &:hover {
                .marquee__content {
                    animation-play-state: paused;
                }
            }
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
                left: 100%;
            }
            100% {
                transform: translateX(-100%);
                left: 0;
            }
        }
    }

    &.vjs-audio--has-poster {
        height: $audioPosterHeight;
        max-height: $audioPosterHeight;

        .vjs-poster {
            width: $audioPosterHeight;
            height: $audioPosterHeight;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            background-size: cover;
            z-index: 101;
        }

        .vjs-control-bar {
            height: $audioPosterHeight;
            padding: 0;

            .vjs-play-control {
                width: $audioPosterHeight;
                height: $audioPosterHeight;
                margin: 0;
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: center;
                z-index: 102;

                .vjs-icon-placeholder::before {
                    position: static;
                }

                &:not(:hover) .vjs-icon-placeholder::before {
                    background-color: $primary-foreground-color;
                }
            }

            &--inner {
                padding: 8px;

                &-block:first-child {
                    height: 80%;

                    // stylelint-disable-next-line
                    .marquee {
                        height: 50%;

                        // stylelint-disable-next-line
                        &:not(.marquee--single):last-child {
                            top: 50%;
                        }
                    }
                }
                &-block:last-child {
                    height: 20%;
                }
            }
        }
    }

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