.module-accordion {
	@extend .module-wysiwyg;
	padding-block: 3rem;

	.accordion {
		--radius: 12px;
		padding-block: 1rem;

		&-trigger {
			background-color: var(--secondary-color);
			color: #FFF;
			padding-block: 1rem;
			padding-inline: 1.35rem;
			text-transform: uppercase;
			border-radius: var(--radius);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			@extend .semi-bold;
			@extend .transition;

			&:after {
				content: "\e9be";
				font-family: 'icomoon';
				@extend .transition;
			}

			&.active {
				background-color: var(--primary-color);
				border-radius: var(--radius) var(--radius) 0 0;

				&:after {
					content: "\e9a1";
				}
			}
		}

		&-content {
			overflow: hidden;
			overflow-y: auto;
			max-height: 0;
			opacity: 0;
			margin-bottom: 1rem;
			@extend .transition-slow;

			&.active {
				max-height: 600px;
				opacity: 1;
				border-radius: 0 0 var(--radius) var(--radius);
			}

			.accordion-body {
				padding-block: 1.5rem;
				padding-inline: 2rem;
				background-color: #F1F4F8;
				@extend .font-14;

				>* {
					margin-block: 0 .25rem;
				}

				>div div {
					margin-block: 0 .25rem;
				}
			}
		}
	}
}