// => oEmbed component
// ------------------------------------------------------------------------------
.px-oembed {
    clear: both;
    margin-bottom: 1.47em;

    .px-oembed-wrapper {
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        padding-bottom: 56.25%;

        &.open {
            > .top {
                z-index: 1;
            }

            > .bottom {
                z-index: 3;
            }
        }
    }

    .embed-responsive-16by9 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        > img,
        > iframe {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin-bottom: 0;
            max-width: none;
        }
    }

    .top {
        z-index: 2;
        cursor: pointer;

        &:after {
            transition: transform .15s ease-in-out, opacity .15s ease-in-out;
            backface-visibility: hidden;
        }

        &:after {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;
            content: '\00ad';
            width: 60px;
            height: 60px;
            background: #fff url('../gfx/icon-play.svg') 50% 50% no-repeat;
            z-index: 3;
            opacity: .72;
            border-radius: 50%;
            box-shadow: 0 0 12px 2px rgba(255, 255, 255, .92);
        }

        &:hover {
            &:after {
                transform: scale(1.17);
                opacity: .85;
            }
        }
    }

    .bottom {
        z-index: 1;
    }
}