/*

Currently in use at:
- DH.com
		_includes/components/faq/faqs-02.html
		_includes/components/faq/faqs.html
*/

.Accordion {
	overflow: hidden;
	background: $c-w100;
	border: solid 1px $c-g200;
	border-radius: 3px;
	margin-bottom: 1rem;

	.Accordion__toggle {
		@include fontsize($t-2);
		font-family: $body;
		color: $c-b300;
		display: block;
		padding: 1rem;

		&:hover {
			cursor: pointer;
		}

		&:before {
			transition: all 0.1s ease-in-out;
			content:"";
			display: inline-block;
			height: 16px;
			width: 16px;
			margin-right: 1rem;
			background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M5.6 27.1L15.9 16 5.6 4.9 12.2 0 27 16 12.2 32l-6.6-4.9z' fill='%230073EC'/></svg>");
			transform: rotate(90deg);
		}
	}

	.Accordion__content {
		transition: all 0.1s ease-in-out;
		opacity: 0;
		height: 0;
		@include fontsize($t-1);
		color: $c-g500;
		padding: 0 3rem;

		p:last-of-type {
		margin-bottom: 0.375rem;
		}

		&> * {
			pointer-events: none;
		}
	}
}

//Accordion Open
.Accordion.Accordion--open {

	.Accordion__toggle {
		padding-bottom: 0.5rem;

		&:before {
			transform: rotate(-90deg);
		}

		&:hover:before {
			background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.3 31.3'><path d='M8.4 15.7l-7-7.1c-2-2-1.9-5.2.3-7.2 2.1-1.9 5.5-1.8 7.5.2l6.5 6.6 6.5-6.6c2-2 5.4-2.2 7.5-.2 2.1 1.9 2.3 5.1.3 7.2l-7 7.1 7 7.1c2 2 1.9 5.2-.3 7.2-2.1 1.9-5.5 1.8-7.5-.3l-6.5-6.6-6.5 6.6c-2 2-5.4 2.2-7.5.3-2.1-1.9-2.3-5.1-.3-7.2l7-7.1z' fill='%230073EC'/></svg>");
		}
	}

	.Accordion__content {
		opacity: 1;
		height: 100%;
		padding: 0 3rem 1rem 3rem;

		&> * {
			pointer-events: all;
		}
	}
}