.wp-block-yoast-faq-block {
	&.is-style-default {
		margin-inline: auto;
		margin-block-end: 0;

		.schema-faq-section {
			.schema-faq-question {
				position: relative;
				display: block;
				padding-left: 5rem;
				font-weight: 700;
				font-size: 1.5rem;

				&::before {
					position: absolute;
					top: -0.5rem;
					left: 0;
					width: 3rem;
					color: var(--wp--preset--color--primary);
					font-size: 3rem;
					line-height: 1;
					text-align: center;
					content: "Q";
				}

				+ .schema-faq-answer {
					margin-block-start: 2rem;
				}
			}

			.schema-faq-answer {
				position: relative;
				padding-left: 5rem;

				&::before {
					position: absolute;
					top: -1rem;
					left: 0;
					width: 3rem;
					color: var(--wp--preset--color--secondary);
					font-weight: 700;
					font-size: 3rem;
					line-height: 1;
					text-align: center;
					content: "A";
				}
			}

			+ .schema-faq-section {
				margin-block-start: 5rem;
			}
		}
	}

	&.is-style-accordion {
		margin-inline: auto;
		margin-block-end: 0;
		width: 100%;
		.schema-faq-section {
			width: 100%;
			display: grid;
			grid-template-rows: min-content 0fr;
			grid-template-columns: 1fr;
			justify-content: flex-start;
			transition: grid-template-rows 0.3s var(--transition-easeout-quint);
			.schema-faq-question,
			.schema-faq-answer {
				width: 100%;
				display: block;
				position: relative;
				padding-block: 1rem;
				padding-inline-end: 3rem;
				padding-inline-start: 4rem;
			}
			.schema-faq-question {
				font-weight: 700;
				font-size: 1.5rem;
				line-height: 1.4;
				cursor: pointer;
				border: 1px solid var(--wp--preset--color--alto-10);
				border-radius: 1rem;
				box-shadow: 0px 1px 4px 2px #eeeeee;
				background-color: var(--wp--preset--color--white);
				transition: opacity 0.3s var(--transition-easeout-quint);
				&::before {
					position: absolute;
					top: calc(-0.3rem + 1rem);
					left: 0.5rem;
					width: 3rem;
					color: var(--wp--preset--color--primary);
					font-size: 2.2rem;
					line-height: 1;
					text-align: center;
					content: "Q";
				}

				&:hover {
					opacity: 0.5;
				}

				+ .schema-faq-answer {
					margin-block-start: 2rem;
				}
			}

			.schema-faq-answer {
				transition: opacity 0.3s var(--transition-easeout-quint);
				opacity: 0;
				overflow: hidden;
				margin-block-start: 1rem !important;
				&::before {
					position: absolute;
					top: calc(-0.5rem + 1rem);
					left: 0.5rem;
					width: 3rem;
					color: var(--wp--preset--color--secondary);
					font-weight: 700;
					font-size: 2.2rem;
					line-height: 1;
					text-align: center;
					content: "A";
				}
			}

			ion-icon {
				position: absolute;
				right: 1rem;
				top: 50%;
				translate: 0 -50%;
				transition: rotate 0.3s var(--transition-easeout-quint);
			}

			&.is-open {
				grid-template-rows: min-content 1fr;
				.schema-faq-answer {
					padding-block: 1rem;
					opacity: 1;
				}

				ion-icon {
					rotate: 180deg;
				}
			}

			+ .schema-faq-section {
				margin-block-start: 2rem;
			}
		}
	}
}