.op3-element {
    position: relative;
    background: none transparent center center no-repeat;
    transition: all 0s ease;

    [data-op3element-hidden="1"] {
        display: none !important;
    }

    [data-op-visibility-hidden="1"] {
        visibility: hidden;
    }

    * {
        transition: all 0s ease;
    }

    // Border & Background
    [data-op3-element-container] {
        border-color: transparent !important;
        border-width: 0;
    }

    [data-op3-border] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: auto;
        border-width: 0;
        overflow: hidden;

        /* Forcing the element to its own layer to prevent overflow of the
           borders on position:fixed (sticky in particular) elements.
           Bug report: https://www.screencast.com/t/ZvDyCZROxT */
        will-change: transform;
    }

    /* We need this data attr to be available
       both on frontend and admin.
       Attr is placed here because section element
       is wrapper around all op3 elements */
    [data-op3-background] {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        transition: inherit;
        pointer-events: none;

        /* Transition not working on gradients, so
           we gonna let css handle transitions:
           real image is on ::before element, transient
           image on ::after, hovering over op3 element
           is changing opacity of ::before and ::after
           giving us the wanted effect */
        &::before,
        &::after {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: inherit;
            pointer-events: none;
        }

        &::before {
            opacity: 1;
        }

        &::after {
            opacity: 0;
        }
    }

    [data-op3-background="video"] {
        iframe {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        [data-op3-code] {
            border-width: 0;
        }

        // Object Fit
        [data-op3-aspect-ratio] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
        }

        [data-op3-aspect-ratio=""],
        [data-op3-aspect-ratio="16:9"] { padding-top: 56.25%; }
        [data-op3-aspect-ratio="16:10"] { padding-top: 62.5%; }
        [data-op3-aspect-ratio="21:9"] { padding-top: 42.86%; }
        [data-op3-aspect-ratio="4:3"] { padding-top: 75%; }

        [data-object-fit][data-object-fit] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(0);
        }
    }

    [data-op3-background="map"] {
        display: none;
    }

    .op3-background-ancestor,
    .op3-background-parent {
        position: relative;
    }

    &:hover {
        > [data-op3-background],
        > .op3-background-ancestor > [data-op3-background],
        > .op3-background-parent > [data-op3-background],
        > .op3-background-ancestor > [data-op3-border] > [data-op3-background],
        > .op3-background-parent > [data-op3-border] > [data-op3-background],
        > .op3-background-ancestor > [data-op3-element-container] > [data-op3-border] > [data-op3-background],
        > .op3-background-parent > [data-op3-element-container] > [data-op3-border] > [data-op3-background],
        > [data-op3-element-container] > [data-op3-border] > [data-op3-background] {
            &::before {
                opacity: 0;
            }

            &::after {
                opacity: 1;
            }
        }
    }

    // Animation & Delay
    &[data-op-animation-state~="enter"] {
        opacity: 0;
        pointer-events: none;
    }

    &[data-op-animation-state="enter"] {
        transition: all 0s !important;
    }

    &[data-op-animation-state~="enter-active"] {
        // z-index commented out because it messes up
        // the z-index property and wp menu element
        // z-index: 9999;
        opacity: 1;
        pointer-events: all;
    }

    /**
     * Animation Styles
     */
    $duration: 0.7s;

    &[data-op-animation-style="fade"] {
        // &[data-op-animation-state~="enter"] {
        //     transition: transform 0s !important;
        // }

        &[data-op-animation-state~="enter-active"] {
            transition: opacity $duration ease !important;
        }
    }

    &[data-op-animation-style="scale-up"] {
        &[data-op-animation-state~="enter"] {
            transform: scale(0.5);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: scale(1);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="scale-down"] {
        &[data-op-animation-state~="enter"] {
            transform: scale(1.5);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: scale(1);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="slide-up"] {
        &[data-op-animation-state~="enter"] {
            transform: translateY(10%);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: translateY(0);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="slide-down"] {
        &[data-op-animation-state~="enter"] {
            transform: translateY(-10%);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: translateY(0);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="slide-left"] {
        &[data-op-animation-state~="enter"] {
            transform: translateX(10%);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: translateX(0);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="slide-right"] {
        &[data-op-animation-state~="enter"] {
            transform: translateX(-10%);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: translateX(0);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="grow"] {
        &[data-op-animation-state~="enter"] {
            transform: scale(0);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: scale(1);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }

    &[data-op-animation-style="shrink"] {
        &[data-op-animation-state~="enter"] {
            transform: scale(2.5);
        }

        &[data-op-animation-state~="enter-active"] {
            transform: scale(1);
            transition: opacity $duration ease, transform $duration ease !important;
        }
    }
}

@media (max-width: $breakpoint-mobile) {
    .op3-element [data-op3-background="video"][data-op3-show-on-mobile="0"] {
        display: none;
    }
}