.op3-element[data-op3-element-type="video"] {
    .op3-video-wrapper {
        overflow: hidden;
    }

    [data-op3-code] {
        position: relative;
        width: 100%;
        height: 0;
        transform: translateZ(0);
        border-width: 0;
        border-radius: inherit;
        overflow: hidden;

        &[data-op3-aspect-ratio="16:9"] {
            padding-top: percentage(9/16);
        }

        &[data-op3-aspect-ratio="16:10"] {
            padding-top: percentage(10/16);
        }

        &[data-op3-aspect-ratio="21:9"] {
            padding-top: percentage(9/21);
        }

        &[data-op3-aspect-ratio="4:3"] {
            padding-top: percentage(3/4);
        }

        &[data-op3-aspect-ratio="4:5"] {
            padding-top: percentage(5/4);
        }

        &[data-op3-aspect-ratio="1:1"] {
            padding-top: percentage(1/1);
        }

        &[data-op3-aspect-ratio="9:16"] {
            padding-top: percentage(16/9);
        }

        // Fix for WP Rocket (OP3-2118)
        > .fluid-width-video-wrapper {
            position: absolute;
            top: 0;
        }
    }

    iframe,
    .wistia_embed,
    [data-op3-video-selfhosted] {
        transform: translateZ(0);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .op3-video-image-overlay {
        position: absolute;
        top: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        display: none;
        cursor: pointer;

        &.op3-video-image-overlay-disabled {
            z-index: -1;
            pointer-events: none;

            &[data-op3-video-sticky-position] {
                z-index: 499;
            }
        }
    }

    .op3-video-magic-overlay {
        position: absolute;
        top: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        width: 100%;
        height: 100%;
        display: none;
        cursor: pointer;


        .op3-video-magic-overlay-image {
            position: absolute;
            top: 10px;
            left: 20px;
            background-size: cover;
            width: 100%;
            max-width: 250px;
            height: 100%;
            max-height: 92px;
            display: none;
            cursor: pointer;
            background: url("../../../resources/elements/video/img/sound-on.png") no-repeat center center;
            animation: effectPulsate 2s ease-in-out infinite both;
        }

        @keyframes effectPulsate {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        &.op3-video-magic-overlay-disabled {
            z-index: -1;
            pointer-events: none;

            &[data-op3-video-sticky-position] {
                z-index: 499;
            }
        }
    }

    [data-op3-video-magic-overlay="1"] {
        ~ .op3-video-magic-overlay,
        ~ .op3-video-magic-overlay .op3-video-magic-overlay-image{
            display: block;
        }
        ~ .op3-video-image-overlay {
            display: none !important;
        }
    }

    .op3-icon {
        position: absolute;
        font-size: 125px;
        top: 50%;
        left: 50%;
        color: white;
        transform: translateX(-50%) translateY(-50%);
    }

    [data-op3-video-selfhosted] {
        object-fit: cover;
    }

    &[data-op3-video-sticky-active="1"] [data-op3-video-sticky="1"],
    [data-op3-video-sticky-preview="1"],
    [data-op3-video-sticky-position] {
        position: fixed;
        top: 50px;
        bottom: auto;
        left: 0;
        right: 50px;
        width: 100%;
        max-width: 350px;
        z-index: 500;

        [data-op3-layer="designer"] & {
            overflow: visible;
        }

        &[data-op3-video-sticky-position="bottomright"] {
            left: auto !important;
            top: auto !important;
            bottom: 50px;
            right: 50px;
        }

        &[data-op3-video-sticky-position="bottomleft"] {
            top: auto !important;
            right: auto !important;
            bottom: 50px;
            left: 50px;
        }

        &[data-op3-video-sticky-position="topright"] {
            left: auto !important;
            bottom: auto !important;
            top: 50px;
            right: 50px;
        }

        &[data-op3-video-sticky-position="topleft"] {
            bottom: auto !important;
            right: auto !important;
            left: 50px;
            top: 50px;
        }
    }

    .op3-video-sticky-close {
        position: absolute;
        top: 10px;
        right: 10px;
        display: none;
        width: 20px;
        height: 20px;
        border: none;
        background: none;
        outline: none;
        margin: 0;
        padding: 0;

        &::after {
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Esimple-remove-2%3C/title%3E%3Cg fill='%23ffffff'%3E%3Cpath fill='%23ffffff' d='M17.4,16L27.7,5.7c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L16,14.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4 L14.6,16L4.3,26.3c-0.4,0.4-0.4,1,0,1.4C4.5,27.9,4.7,28,5,28s0.5-0.1,0.7-0.3L16,17.4l10.3,10.3c0.2,0.2,0.5,0.3,0.7,0.3 s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L17.4,16z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
            speak: none;
            text-transform: none;
            -webkit-font-smoothing: subpixel-antialiased;
            color: #fff;
            filter: drop-shadow(0px 0px 1px #000);
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-size: 100%;
        }
    }

    &:not([data-op3-video-sticky-active="1"]) [data-op3-video-sticky]:not([data-op3-video-sticky-preview="1"]) {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        z-index: auto;
    }

    &[data-op3-video-sticky-active="1"],
    &[data-op3-video-sticky-preview="1"] {
        [data-op3-video-sticky-close="1"] .op3-video-sticky-close,
        [data-op3-video-sticky-close="1"] ~ .op3-video-image-overlay .op3-video-sticky-close {
            display: block;
        }
    }
}

@media (min-width: $breakpoint-tablet) {
    .op3-element[data-op3-element-type="video"] {
        &[data-op3-video-sticky-active="1"] [data-op3-video-sticky-desktop="0"][data-op3-video-sticky-devices="1"]:not([data-op3-video-sticky-preview="1"]) {
            position: static !important;
            bottom: auto !important;
            right: auto !important;
            left: auto !important;
            top: auto !important;
            width: auto !important;
            max-width: none !important;
        }
    }
}

@media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet) {
    .op3-element[data-op3-element-type="video"] {
        &[data-op3-video-sticky-active="1"] [data-op3-video-sticky-tablet="0"]:not([data-op3-video-sticky-preview="1"]),
        &[data-op3-video-sticky-active="1"] [data-op3-video-sticky-devices="0"]:not([data-op3-video-sticky-preview="1"]) {
            position: static !important;
            bottom: auto !important;
            right: auto !important;
            left: auto !important;
            top: auto !important;
            width: auto !important;
            max-width: none !important;
        }
    }
}

@media (max-width: $breakpoint-mobile) {
    .op3-element[data-op3-element-type="video"] {
        &[data-op3-video-sticky-active="1"] [data-op3-video-sticky-mobile="0"]:not([data-op3-video-sticky-preview="1"]),
        &[data-op3-video-sticky-active="1"] [data-op3-video-sticky-devices="0"]:not([data-op3-video-sticky-preview="1"]) {
            position: static !important;
            bottom: auto !important;
            right: auto !important;
            left: auto !important;
            top: auto !important;
            width: auto !important;
            max-width: none !important;
        }

        &[data-op3-video-sticky-active="1"] [data-op3-video-sticky="1"],
        [data-op3-video-sticky-preview="1"] {
            max-width: 275px;
        }

        .op3-video-magic-overlay-image {
            animation: none !important;
            max-width: 150px !important;
            background-size: contain !important;
        }
    }
}

// Set overlay over video only in designer mode
html[data-op3-layer="designer"] {
    .op3-element[data-op3-element-type="video"] {
        [data-op3-code] {
            pointer-events: none;
        }
    }
}