_sass/components/_faq.scss
@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

/** FAQ **/
body.faq,
.frequentlyaskedquestions,
body.documentation main .wrap.frequentlyaskedquestions{
	h3{
		@include title-1;
		cursor: pointer;
		position: relative;
		margin: 0;
		padding-right: 55px;
		&::after{
			content: " ";
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%230D0D0D' stroke-linecap='square' stroke-width='1.5' d='m18 9.5-6 6-6-6'/%3E%3C/svg%3E");
			background-color: var(--doc-codebox-button-background-color, #E6E6E6);
			background-size: contain;
			background-repeat: no-repeat;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			position: absolute;
			right: 0px;
			top: -5px;
			-webkit-transition: -webkit-transform .3s;
			transition: -webkit-transform .3s;
			-o-transition: transform .3s;
			transition: transform .3s;
			transition: transform .3s, -webkit-transform .3s;
			cursor: pointer;
		}
		a:hover{
			background-color: transparent;
		}
	}
	.qa-wrap{
		padding: 20px;
		background: var(--doc-codebox-background-color, #F2F2F2);
		-webkit-transition: background-color .3s;
		-o-transition: background-color .3s;
		transition: background-color .3s;
		margin-bottom: 10px;
		border-radius: 10px;
		border: 1px solid transparent;
		-webkit-transition: border .3s;
		-o-transition: border .3s;
		transition: border .3s;
		&.open h3::after{
			-webkit-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
					transform: rotate(180deg);
		}
		&:hover{
			border-color: var(--doc-codebox-border-color);
		}
	}
	.answer{
		display: none;
		max-width: calc(100% - 55px);
		padding-top: 20px;
		>p:first-child{
			margin-top: 0;
		}
	}
	.headlinebar{
		margin-bottom: 40px;
	}
}

body.faq,
section.faq{
	.frequentlyaskedquestions{
		max-width: 750px;
		margin: 0 auto;
	}
	.qa-wrap{
		h3{
			@include title-1;
			a{
				color: var(--main-text-primary-color, #0D0D0D);
			}
		}
		.answer{
			p:last-of-type{
				margin-bottom: 0;
			}
		}
	}
}

body.faq{
	h2{
		@include headline-1();
		margin-bottom: 20px;
		margin-top: 40px;
	}
	h2:first-of-type{
		margin-top: 0;
	}
	h2 a{
		color: var(--main-text-primary-color, #0D0D0D);
	}
}
