Content Horizontal Accordion

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

.block-horizontal-accordion {
	max-width: rem-calc($xxxl);
	margin-left: auto;
	margin-right: auto;

	ul {
		width: 100%;
		min-height: 85vh;
		margin: 0;
		padding: 0;
		overflow: hidden;
		list-style-type: none;
		display: flex;
		flex-direction: column;

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

	li {
		flex: 1;
		display: flex;
		align-items: stretch;
		cursor: pointer;
		transition: all 0.35s var( --ease );
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		overflow: hidden;
		border-top: 2px solid $white;

		&:first-child {
			border-top: none;
		}

		@include bp($lg) {
			border-top: none;
			border-left: 2px solid $white;

			&:first-child {
				border-left: none;
			}
		}

		&:hover {
			.slide-title {
				color: $secondary;
			}

			&:after {
				opacity: 1;
			}
		}

		&:before {
			width: 100%;
			height: 100%;
			content: none;
			position: absolute;
			z-index: 20;
			top: 0;
			left: 0;
			background: linear-gradient(to top, rgba($primary, 0) 0%, $primary 100%);
			opacity: 0.75;

			@include bp($lg) {
				height: 25%;
				content: "";
			}
		}

		&:after {
			width: 100%;
			height: 100%;
			content: "";
			position: absolute;
			z-index: 20;
			bottom: 0;
			left: 0;
			background: linear-gradient(to bottom, rgba($primary, 0) 0%, $primary 100%);
			opacity: 0.75;
			transition: 0.3s var(--ease);
			transition-property: opacity;

			@include bp($lg) {
				height: 50%;
			}
		}

		&:not(.active) {
			cursor: pointer;
		}

		&.active {
			flex: 6;
			cursor: default;

			.slide-title {
				opacity: 0;
			}

			.section-content,
			.section-content .inner,
			.overlay-text {
				opacity: 1;
			}
		}
	}

	picture {
		pointer-events: none;
		display: flex;
		flex-direction: column;

		&:before {
			width: 100%;
			height: 100%;
			content: "";
			position: absolute;
			z-index: 20;
			top: 0;
			left: 0;
			background-color: $primary;
			opacity: 0.5;
		}

		img {
			height: 100%;
			object-fit: cover;
		}
	}

	.overlay-text {
		position: absolute;
		top: rem-calc(24);
		left: rem-calc(24);
		z-index: 20;
		color: var( --text-color );
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s var( --ease );
		flex-shrink: 0;
	}

	.slide-title {
		white-space: nowrap;
		position: absolute;
		z-index: 30;
		opacity: 1;
		top: 50%;
		left: 50%;
		transition: top 0.35s, opacity 0.15s, color 0.3s;
		transform-origin: 0 0;
		transform: translate(-50%, -50%) rotate(0deg);
		color: var( --text-color );
		pointer-events: none;
		margin-bottom: 0;

		@include bp($lg) {
			top: 100%;
			left: 40%;
			transform: translate(-20px, -50%) rotate(-90deg);
		}
	}

	.section-content {
		width: 100%;
		position: relative;
		z-index: 30;
		opacity: 0;
		align-self: flex-end;
		transition: all 0.35s 0.35s ease-out;
		pointer-events: none;
		color: var( --text-color );

		.inner {
			position: absolute;
			display: grid;
			grid-auto-flow: row;
			grid-template-columns: 1fr;
			grid-column-gap: 20px;
			align-items: flex-end;
			left: 0;
			bottom: 0;
			@include padding( rem-calc(20) );
			opacity: 0;
			transition: opacity 0.25s ease-out;

			@include bp($lg) {
				grid-auto-flow: column;
				grid-column-gap: 40px;
				@include padding( rem-calc(40) );
			}

			h2 {
				margin-bottom: 0;

				span {
					@include text-gradient--light();
				}
			}
		}
	}
}

class HorizontalAccordion {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;

		this.slides = this.block.querySelectorAll( 'li' );
		if ( this.slides ) {
			this.init();
		}
	}

	init() {

		const clickHandler = e => {
			this.slides.forEach( slide => {
				slide.classList.remove( 'active' );
			});

			e.target.classList.add( 'active' );
		}

		this.slides.forEach( slide => {

			slide.addEventListener( 'click', e => clickHandler( e ) );
		});
	}
}

document.querySelectorAll('.block-horizontal-accordion').forEach((block) => {
	new HorizontalAccordion( block );
});