/* --- Block Featured Videos
-------------------------------------------------------- */

.wp-block-cover.wp-block-featured-videos {
    .thumbnail-videos {
       .wp-block-cover {
            min-height: 100px;
            width: 150px;
        }
        .thumbnail-video-content {
            position: relative;
            z-index: 1;
        }
    }
    .wp-block-cover__inner-container {
        z-index: inherit;
        .content {
            position: relative;
            .video-play {
                margin-top: 3px;
            }
        }
        .main-video {
            position: relative;
            z-index: 1;
        }
    }
    .wp-block-embed {
        min-height: inherit;
        min-width: inherit;
    }
}

/* --- Block Promotional Video
-------------------------------------------------------- */

.wp-block-promotional-video {
    .wp-block-cover__inner-container {
        z-index: 99;
    }

    .content {
        .video-play {
            position: relative;
            cursor: pointer;
            &:before {
                content: "";
                background: var(--wp--preset--gradient--gradient-1);
                width: 50px;
                height: 50px;
                border-radius: 100%;
            }
            &:hover::before {
                background: var(--wp--preset--gradient--gradient-1-hover);
            }

            &:after {
                content: "";
                border-top: 10px solid transparent;
                border-left: 15px solid var(--wp--preset--color--color-dark);
                border-bottom: 10px solid transparent;
                position: absolute;
            }

            svg {
                display: none;
            }

            span {
                color: var(--wp--preset--color--color-light);
                fill: var(--wp--preset--color--color-light);
                text-transform: uppercase;
                font-weight: 700;
                font-size: 1rem;
            }
        }
    }
    .content.center > .video-play,
    .content.has-text-align-center > .video-play {
        justify-content: center;
        &:after {
            left: 50%;
            transform: translateX(-370%);
        }
    }

    .content.left > .video-play,
    .content.has-text-align-left > .video-play {
        justify-content: flex-start;
        &:after {
            left: 19px;
        }
    }

    .content.right > .video-play,
    .content.has-text-align-right > .video-play {
        justify-content: flex-end;
        &:after {
            right: 115px;
        }
    }
}