Hover List

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

.block-hover-list {
	@include padding-top(rem-calc(120));
	@include padding-bottom(rem-calc(32));

	&.border-type-all,
	&.border-type-no-top {
		.list-item {
			&:last-of-type {
				border-bottom: none;
			}
		}
	}

	.content-container {
		text-align: center;
	}

	.list-container {
		margin-top: rem-calc(48);

		@include bp($lg) {
			margin-top: rem-calc(100);
		}
	}

	.list-item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 1rem;

		padding: rem-calc(32 0 24);

		position: relative;

		text-decoration: none;

		border-top: 1px solid rgba(0,0,0,0.3);
		@include ts(border-color);

		@include bp($lg) {
			align-items: center;
			padding: rem-calc(32 0);
		}

		&:last-of-type {
			border-bottom: 1px solid rgba(0,0,0,0.3);
		}

		&[href='#'] {
			cursor: default;
		}

		&:hover {
			border-color: transparent;

			+ .list-item {
				border-top-color: transparent;
			}

			&:before,
			picture {
				opacity: 1;
			}
		}

		&:before {
			width: calc(100% + #{rem-calc(24)});
			height: 100%;
			content: '';
			background-color: var(--white);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -50%, 0);
			opacity: 0;
			@include ts(opacity);

			box-shadow: 0px -16px 34px 0px #83C3DC80;

			pointer-events: none;

			@include bp(1400px) {
				width: calc(100% + #{rem-calc(72)});
				border: 1px solid rgba(0,0,0,0.3);
				border-radius: rem-calc(100);
			}
		}

		p {
			margin-bottom: 0;
		}

		p,
		span {
			z-index: 2;
		}

		&__counter {
			width: rem-calc(40);
			height: rem-calc(40);
			border-radius: 50%;
			border: 1px solid var(--text-color);

			display: flex;
			align-items: center;
			justify-content: center;

			margin-right: 0;
			flex-shrink: 0;

			transform: translateY(#{rem-calc(-10)});

			@include bp($md) {
				transform: translateY(#{rem-calc(-6)});
			}

			@include bp($lg) {
				width: rem-calc(58);
				height: rem-calc(58);
				margin-right: calc(#{rem-calc(50)} - 1rem);
				transform: none;
			}
		}

		&__content {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			flex-grow: 1;
			padding-right: 0;

			@include bp($sm) {
				padding-right: rem-calc(80);
			}

			@include bp($lg) {
				flex-direction: row;
				align-items: center;
				padding-right: rem-calc(148);
			}

			.list-item__arrow {
				@include bp($lg) {
					display: none;
				}
			}
		}

		&__title {
			flex-shrink: 0;

			@include bp($lg) {
				width: 33%;
			}
		}

		&__lede {

		}

		picture {
			position: absolute;
			top: 50%;
			right: rem-calc(48);
			transform: translateY(-50%);
			opacity: 0;
			@include ts(opacity);
			pointer-events: none;
			z-index: 2;
			min-width: 172px;
			aspect-ratio: 1/1;

			@include bp($lg, true) {
				width: rem-calc(70);
				top: 2rem;
				right: 0;
				transform: none;
				opacity: 1;
				display: none;
			}

			img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		&__arrow {
			width: rem-calc(25);
			height: rem-calc(11);
			flex-shrink: 0;
			display: inline-block;
			background-image: url("data:image/svg+xml,%3Csvg width='29' height='15' viewBox='0 0 29 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.69531 6.62671C1.14303 6.62671 0.695312 7.07442 0.695312 7.62671C0.695312 8.17899 1.14303 8.62671 1.69531 8.62671V7.62671V6.62671ZM27.9024 8.33382C28.2929 7.94329 28.2929 7.31013 27.9024 6.9196L21.5385 0.555641C21.1479 0.165117 20.5148 0.165117 20.1242 0.555641C19.7337 0.946166 19.7337 1.57933 20.1242 1.96985L25.7811 7.62671L20.1242 13.2836C19.7337 13.6741 19.7337 14.3073 20.1242 14.6978C20.5148 15.0883 21.1479 15.0883 21.5385 14.6978L27.9024 8.33382ZM1.69531 7.62671V8.62671H27.1953V7.62671V6.62671H1.69531V7.62671Z' fill='black'/%3E%3C/svg%3E%0A");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;

			@include bp(1400px) {
				margin-left: auto;
			}

			&--desktop {
				display: none;

				@include bp($lg) {
					display: inline-block;
				}
			}
		}
	}
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/hover-list",
    "title": "Hover list",
    "description": "Hover list block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-hover-list.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/hover-list/block-hover-list.css"
}