@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.foldable-faq {
	padding: 0 15px;
}

button.foldable-faq__question {
	appearance: none;
	background: transparent;
	border: none;
	font-size: inherit;
	outline: 0;
	vertical-align: baseline;
}

.foldable-faq__question {
	display: flex;
	align-items: center;
	padding: 18px 0;

	cursor: pointer;

	.gridicon {
		flex-shrink: 0;
		fill: var(--color-gray-50);

		transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in;

		.is-expanded & {
			transform: rotate(90deg);
		}
	}
}

.foldable-faq__question-text {
	padding-left: 16px;
	font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
	font-weight: 600;
	text-align: left;
	color: var(--studio-gray-80);

	@include break-mobile {
		font-size: 1.5rem;
	}
}

.foldable-faq__answer {
	overflow: hidden;
	padding: 0 16px 0 40px;
	border-bottom: 1px solid var(--studio-gray-5);

	transition: max-height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.15s ease-in;
	max-height: 0;

	font-size: 1rem;
	color: var(--studio-gray-60);
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.6rem;

	.is-expanded & {
		height: auto;
		max-height: 250px; // fallback if not set inline with js
		padding-bottom: 18px;
	}
}
