/* Accordion */
.wp-accordion .accordion-toggle {
	cursor: pointer;
	border: none;
	text-align: left;
}

.accordion-content.is-hidden {
	display: none !important;
}

.accordion-content.is-visible {
	display: block !important;
}

/* Text accordions */
.text-accordion.is-layout-flow:not(:first-child) {
	margin-top: 0;

	.accordion-toggle>a {
		border-top: 0 !important;
	}
}

.text-accordion {
	.accordion-content {
		padding: 1.5rem;
		margin: 0;
		display: none;
	}

	.accordion-content.green-haze {
		background-color: #E6F5ED;
		border-bottom: 1px solid var(--wp--preset--color--deco);
	}

	.accordion-content.orange {
		background-color: var(--wp--preset--color--jaffa-10);
		border-bottom: 1px solid var(--wp--preset--color--chardonnay);
	}

	.accordion-content.blue {
		background-color: var(--wp--preset--color--picton-10);
		border-bottom: 1px solid var(--wp--preset--color--powder-blue);
	}

	.accordion-content.purple {
		background-color: var(--wp--preset--color--vivid-violet-10);
		border-bottom: 1px solid var(--wp--preset--color--vivid-violet-20);
	}

	.accordion-toggle.content-visible.green-haze {
		background-color: #E6F5ED;
	}

	.accordion-toggle.content-visible.orange {
		background-color: var(--wp--preset--color--jaffa-10);
	}

	.accordion-toggle.content-visible.blue {
		background-color: var(--wp--preset--color--picton-10);
	}

	.accordion-toggle.content-visible.purple {
		background-color: var(--wp--preset--color--vivid-violet-10);
	}

	.accordion-toggle.content-visible {
		a {
			border-bottom-width: 0px !important;
		}
	}

	.accordion-toggle>a {
		padding: 1.5rem !important;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		i {
			font-size: 2.5rem;
		}

		i.green-haze {
			color: var(--wp--preset--color--green-haze);
		}

		i.orange {
			color: var(--wp--preset--color--jaffa);
		}

		i.blue {
			color: var(--wp--preset--color--blue);
		}

		i.purple {
			color: var(--wp--preset--color--minsk);
		}

	}

	.accordion-toggle>a:hover {
		i.green-haze {
			color: var(--wp--preset--color--green-haze) !important;
		}

		i.orange {
			color: var(--wp--preset--color--jaffa) !important;
		}

		i.blue {
			color: var(--wp--preset--color--blue) !important;
		}

		i.purple {
			color: var(--wp--preset--color--minsk) !important;
		}
	}
}

/* Image accordion */
.wp-accordion.image-accordion {
	width: 30%;

	@media only screen and (max-width: 768px) {
		width: 100%;
	}
}

.image-accordion {
	.accordion-toggle {
		p {
			display: flex;
			align-items: center;
			justify-content: space-between;

			i.orange {
				color: var(--wp--preset--color--jaffa);
			}

			i.blue {
				color: var(--wp--preset--color--blue);
			}

			i.purple {
				color: var(--wp--preset--color--minsk);
			}

			i.green {
				color: var(--wp--preset--color--green-haze);
			}
		}

		p:hover {
			i.orange {
				color: var(--wp--preset--color--jaffa) !important;
			}

			i.blue {
				color: var(--wp--preset--color--blue) !important;
			}

			i.purple {
				color: var(--wp--preset--color--minsk) !important;
			}

			i.green {
				color: var(--wp--preset--color--green-haze) !important;
			}
		}
	}

	.accordion-toggle>figure {
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: contain;
		display: flex;
		justify-content: center;
		background-size: 100% 100%;
	}

	.accordion-toggle.jaffa>figure {
		background-image: url('../assets/jc-images/image-accordion-orange-closed.png');
	}

	.accordion-toggle.blue>figure {
		background-image: url('../assets/jc-images/image-accordion-blue-closed.png');
	}

	.accordion-toggle.green>figure {
		background-image: url('../assets/jc-images/image-accordion-green-closed.png');
	}

	.accordion-toggle.purple>figure {
		background-image: url('../assets/jc-images/image-accordion-purple-closed.png');
	}

	.accordion-toggle.content-visible.jaffa {
		p {
			background-color: var(--wp--preset--color--jaffa-10);
		}

		div {
			background-color: var(--wp--preset--color--jaffa-10);
		}

		figure {
			background-image: url('../assets/jc-images/image-accordion-orange-open.png');
		}
	}

	.accordion-toggle.content-visible.blue {
		p {
			background-color: var(--wp--preset--color--picton-10);
		}

		div {
			background-color: var(--wp--preset--color--picton-10);
		}

		figure {
			background-image: url('../assets/jc-images/image-accordion-blue-open.png');
		}
	}

	.accordion-toggle.content-visible.green {
		p {
			background-color: #E6F5ED;
		}

		div {
			background-color: #E6F5ED;
		}

		figure {
			background-image: url('../assets/jc-images/image-accordion-green-open.png');
		}
	}

	.accordion-toggle.content-visible.purple {
		p {
			background-color: var(--wp--preset--color--vivid-violet-10);
		}

		div {
			background-color: var(--wp--preset--color--vivid-violet-10);
		}

		figure {
			background-image: url('../assets/jc-images/image-accordion-purple-open.png');
		}
	}

	.accordion-content {
		border-bottom: 0;
		border-radius: 0px 0px 24px 24px;
		padding: 4rem;

		@media only screen and (max-width: 768px) {
			padding: 1.5rem 2.25rem;
			width: 100% !important;
		}
	}

	.accordion-content.jaffa {
		background-color: var(--wp--preset--color--jaffa-10);
	}

	.accordion-content.green {
		background-color: #E6F5ED;
	}

	.accordion-content.blue {
		background-color: var(--wp--preset--color--picton-10);
	}

	.accordion-content.purple {
		background-color: var(--wp--preset--color--vivid-violet-10);
	}
}