.matrix__button .icon-chevron-right {
	background-image: var(--chevron-right-light);
	background-size: cover;
	width: 1rem;
	height: 1rem;
}

.matrix__button:hover:not(.is-loading) {
	background-color: var(--highlight);
	color: var(--card-bg-color);
	border-color: var(--card-bg-color);

	.icon-chevron-right {
		background-image: var(--chevron-right);
	}
}


.matrix__button.is-loading .icon-chevron-right  {
	background-image: url('/wp-content/themes/jbl-website/blocks/matrix/loading.png') !important;
}


.matrix__button:last-of-type:not(.js-matrix-back, .js-ingredient) {
	margin-bottom: var(--spacing-matrix-overflow);
}

.matrix__panel {
	--transition : all 0.3s ease-in-out;
	-webkit-overflow-scrolling: touch;
	background-color: var(--card-bg-color);
}

.matrix__panel-start,  .matrix__panel-middle {
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--spacing-matrix-overflow);
		background: linear-gradient(to bottom, transparent 0%, var(--card-bg-color) 100%);
		pointer-events: none;
	}
}

.matrix__panel:not(.matrix__panel-start, .matrix__panel-image) {
	position: absolute;
	z-index: var(--z-matrix-panel);
	transform: translate3d(100%, 0, 0);
	transition: var(--transition);
	top: 0;
}


@media screen and (width >= 768.5px) {
	/* Hide the back button on desktop */
	.js-matrix-back {
		display: none;
	}

	/* Selected button */
	.matrix__panel .has-selected,
	.matrix__panel .has-selected:hover {
		background-color: var(--highlight);
		color: var(--card-bg-color);
		border-color: var(--card-bg-color);

		.icon-chevron-right {
			background-image: var(--chevron-right);
		}
	}

	/* Position the start panel */
	.matrix__panel-start {
		position: relative;
		z-index: var(--z-matrix-start);
	}

	/* Position these panels outside of the viewport */
	.matrix__panel.matrix__panel-middle {
		z-index: var(--z-matrix-middle);
		transform: translate3d(0, 0, 0);
	}
	.matrix__panel.matrix__panel-end {
		z-index: var(--z-matrix-end);
		transform: translate3d(-50%, 0, 0);
	}

	.matrix__panel-ajaxloader {
		height: var(--spacing-matrix-panel);
	}
	.matrix__open {
		transform: translate3d(100%, 0, 0) !important;
	}
	

	/* Step 2 active */
	[data-matrix-current-step="2"] {
		.matrix__panel-middle {
			transform: translate3d(100%, 0, 0);
		}

		.matrix__panel-image {
			padding-left: 25%;
			transition: var(--transition);
		}
	}

	/* Step 3 active */
	[data-matrix-current-step="3"] {
		.matrix__panel-middle,
		.matrix__panel-end {
			transform: translate3d(100%, 0, 0);
		}

		.matrix__panel-image {
			opacity: 0;
			transition: var(--transition);
		}
	}

}



@media screen and (width <= 768.5px) {
	/* Hide the image panel on mobile */
	.matrix__panel-image {
		display: none;
	}

	.matrix__panel-ajaxloader {
		height: var(--spacing-matrix-panel-mobile);
	}

	/* Step 2 active */
	[data-matrix-current-step="2"] {
		.matrix__panel-middle {
			transform: translate3d(0, 0, 0);
		}
	}

	/* Step 3 active */
	[data-matrix-current-step="3"] {
		.matrix__panel-middle,
		.matrix__panel-end {
			transform: translate3d(0, 0, 0);
		}
	}
}