Title Logos

@import "../../resources/scss/util/variables";
@import ".../.../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-title-logos {
	@include padding-top(rem-calc(48));
	@include padding-bottom(rem-calc(48));

	--gap: 1rem;
	--duration: 40s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));

	&.alignment-center {
		text-align: center;

		.block-title-logos__logos {
			@include bp($md) {
				justify-content: center;
			}
		}
	}

	.heading {
		@include fluid-type(24, 48);
		@include margin-bottom(rem-calc(48));
	}

	&__overline {
		@include fluid-type(18, 24);
		margin-bottom: 0;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.marquee {
		display: flex;
		flex-direction: row;
		gap: var(--gap);
		margin: 2rem 0;

		@include bp($md) {
			margin: rem-calc(58 0);
		}

		&:hover {
			.marquee__group {
				animation-play-state: paused;
			}
		}
	}

	.marquee__group {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: var(--gap);
		animation: scroll-x var(--duration) linear infinite;
	}

	@media (preferences-reduced-motion: reduce) {
		.marquee__group {
			animation-play-state: paused;
		}
	}

	@keyframes scroll-x {
		from {
			transform: translateX(var(--scroll-start));
		}

		to {
			transform: translateX(var(--scroll-end));
		}
	}

	&__logo {
		width: auto;
		height: rem-calc(67);
		border: 1px solid var(--grey-primary);
		border-radius: rem-calc(8);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: rem-calc(16 30);
		flex-shrink: 0;

		&:hover {
			picture,
			img {
				transform: scale(1.1);
			}
		}

		&[href='#'] {
			pointer-events: none;
		}

		picture,
		img {
			@include ts(transform);
		}

		picture {
			display: flex;
			flex-direction: column;
			max-height: 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}

		img {
			filter: brightness(0.5) saturate(0%);
		}
	}
}

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