Video

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-video {
    text-align: center;

    .overline {
	    color: var(--color);
    }
}

.video-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.video-item {
    position: relative;
    overflow: hidden;
    display: block;

    img {
        display: block;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        transition: transform 0.3s ease-in-out;
		width: 100%;
    }
    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
		width: 40px;
		height: 40px;
        background-color: $primary-blue;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s ease-in-out;

        .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: $white;
            transition: color 0.3s ease-in-out;
			width: rem-calc(20);
			height: rem-calc(20);
        }

		@include bp($md) {
			width: rem-calc(83);
			height: rem-calc(83);

			.icon {
				width: rem-calc(36);
				height: rem-calc(36);
			}
		}
    }
    &:hover {
        .play-icon {
            background-color: $primary;

            .icon {
                color: $white;
            }
        }
        img {
            transform: scale(1.02);
        }
    }
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/video",
    "title": "Video",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-video.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Video",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/video/block-video.css", "lity-css"],
    "viewScript": ["lity-js"]
}