Image Video Content

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

.block-image-video-content {
	@each $name, $color in $bgs {
		&.bg--#{$name} {
			color: color-contrast($color);
		}
	}

	@each $name, $color in $accents {
		&.accented--#{$name} {
			.play-icon svg {
				.triangle {
					fill: $primary;
				}
			}
		}
	}
	&.accented--pink,
	//&.accented--red,
	&.accented--purple {
		.play-icon svg {
			.triangle {
				fill: $white !important;
			}
		}
	}

	&--type-video {
		&--local {
		}
		&--online {
		}
	}
	&--type-video & {
		&__media {
			&:before {
				&:after {
					content: "";
					position: absolute;
					background-image: url(/wp-content/themes/traditiondata/assets/icons/chevron-right.svg);
					background-repeat: no-repeat;
					top: 50%;
					right: 16px;
					transform: translateY(-50%);
					height: 11px;
					width: 7px;
				}
			}
		}
	}

	.video-item {
		overflow: hidden;
		&:hover {
			.block-image-video-content__video-placeholder {
				img {
					scale: 1.075;
					transition: 1.5s scale;
				}
			}
		}
	}

	&__video-placeholder {
		img {
			transition: 0.5s scale;
		}
	}

	.play-icon-wrapper {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.heading {
		@include fluid-type(24, 32);
	}

	display: flex;
	flex-direction: column;
	@include bp($lg) {
		flex-direction: row;
	}

	&--swapped & {
		&__content {
			@include bp($lg) {
				order: -1;
			}
		}
	}

	.container-fluid,
	*[class^="col-"] {
		//padding: 0;
		position: relative;
	}

	&__media,
	&__content {
		flex-grow: 1;
		flex-shrink: 0;
		//flex-basis: 0;
		@include bp($lg) {
			flex-basis: 50%;
		}
	}

	&__media {
		height: auto;
		width: 100%;
		position: relative;
		aspect-ratio: 1/1;

		picture {
			overflow: hidden;
		}
	}
	&__media & {
		&__image {
			//position: relative;
		}
	}

	&__content {
		display: flex;
		justify-content: center;
		padding: 2rem 0;

		@include bp($lg) {
			padding: 4rem;
		}

		&-wrapper {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			align-items: flex-start;
			align-content: center;

			@include bp($lg) {
				max-width: 520px;
			}
		}
	}
}

var ImageVideoContent = class ImageVideoContent {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-image-video-content');
		this.init();
	}

	/**
	 * ImageVideoContent function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
		});
	}
}

new ImageVideoContent();