.video-container {
    position: relative;
    margin-top: 16px;
    padding-top: 75%;
    background: lightgray;
}

.video-container .controls {
    position: absolute;
    height: 32px;
    background: #777;
    color: white;
    z-index: 5;
    bottom: 10px;
    border-radius: 8px;
    left: 10px;
}

.video-container .controls>* {
    float: left;
    width: 20px;
    height: 100%;
    margin-left: 8px;
    display: block;
}

.video-container .controls>*:first-child {
    margin-left: 0;
}

.video-container .controls>*:last-child {
    margin-right: 16px;
}

.video-container .controls button {
    border: none;
    cursor: pointer;
    background: transparent;
    background-size: contain;
    background-repeat: no-repeat;
}

.video-container video {
    position: absolute;
    border-radius: 12px;
}

.video-container video[data-type=local] {
    width: 25%;
    z-index: 10;
    bottom: 10px;
    right: 10px;
}

.video-container video[data-type=remote] {
    z-index: 1;
    width: 100%;
    top: 0;
    height: 100%;
}

.video-container .video-finished,
.video-container .video-loading {
    position: absolute;
    right: 0;
    top: 50%;
    margin: -32px 0 0 -32px;
    width: 100%;
    text-align: center;
}

button[data-state="leave"] {
    color: #dc3545 !important;
}

@media all and (min-width: 768px) {
    button[data-state]::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        color: white;
    }

    button[data-state="mute"]::before {
        content: "\f130";
    }

    button[data-state="unmute"]::before {
        content: "\f131";
        color: red;
    }

    button[data-state="go-fullscreen"]::before {
        content: "\f065";
    }

    button[data-state="exit-fullscreen"]::before {
        content: "\f066";
    }

    button[data-state="on-video"]::before {
        content: "\f4e2";
        color: red;
    }

    button[data-state="off-video"]::before {
        content: "\f03d";
    }

    button[data-state="config"]::before {
        content: "\f013";
    }

    button[data-state="leave"]::before {
        content: "\f3dd";
    }
}

@media all and (max-width: 768px) {
    .video-container {
        height: calc(100vh - 80px);
        margin-top: initial;
        padding-top: initial;
    }

    .video-container .controls {
        background: rgba(0, 0, 0, 0.72);
        bottom: 0;
        display: flex;
        flex-direction: row;
        height: 64px;
        margin: 1rem;
        justify-content: space-around;
        width: calc(100vw - 2rem);
        left: initial;
    }

    .video-container .controls>* {
        width: 40px;
        float: initial;
        margin-left: initial;
    }

    .video-container .controls>*:first-child {
        margin-left: initial;
    }

    .video-container .controls>*:last-child {
        margin-right: initial;
    }

    .video-container video[data-type=local] {
        position: absolute;
        border-radius: 12px;
        bottom: calc(64px + 2.5rem);
        right: 1rem;
        width: 25vw;
    }

    .video-container video[data-type=remote] {
        border-radius: initial;
    }

    button[data-state] {
        color: #0d6efd;
    }

    button[data-state="on-video"],
    button[data-state="off-video"] {
        color: #198754;
    }

    button[data-state="mute"] .btn-state::before {
        content: "\f130";
    }

    button[data-state="unmute"] .btn-state::before {
        content: "\f131";
    }

    button[data-state="go-fullscreen"] .btn-state::before {
        content: "\f065";
    }

    button[data-state="exit-fullscreen"] .btn-state::before {
        content: "\f066";
    }

    button[data-state="on-video"] .btn-state::before {
        content: "\f4e2";
    }

    button[data-state="off-video"] .btn-state::before {
        content: "\f03d";
    }

    button[data-state="config"] .btn-state::before {
        content: "\f013";
    }

    button[data-state="leave"] .btn-state::before {
        content: "\f3dd";
    }
}

@media all and (display-mode: fullscreen) {
    .video-container:not(.kindVideoNative) {
        position: static;
        margin: 0;
        padding: 0;
    }
}