/*-------------------------------------------------------
Accordion (all styles)
-------------------------------------------------------*/

.accordion {

	.wp-block-details {
		overflow: hidden;

		> summary {
			display: flex;
			align-items: start;
			gap: 1ch;
			flex-wrap: nowrap;

			padding-top: 1rem;
			padding-bottom: 1rem;

			&::marker {
				content: "";
			}

			&::-webkit-details-marker {
				display: none;
			}

			> * {
				flex: 1;
			}

			&::after {
				content: "";
				display: inline-block;
				height: 1.5rem;
				width: 1.5rem;
				margin-top: 2px;
				margin-left: 0.5ch;

				background-color: currentcolor;
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 0 24 24' width='48px' fill='%23000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
				mask-position: center;
				mask-repeat: no-repeat;
				mask-size: cover;

				transition: transform 0.25s ease-in-out;
			}
		}

		> *:not(summary) {
			opacity: 0;

			+ * {
				margin-top: var(--wp--style--block-gap);
			}
		}

		&[open] {
			padding-bottom: 1rem;

			> summary {

				&::after {
					transform: rotate(135deg);
				}
			}

			> *:not(summary) {
				animation: accordionFadeInUp 0.3s ease-out;
				opacity: 1;
			}
		}
	}
}

/*-------------------------------------------------------
Accordion (style 2)
-------------------------------------------------------*/

.accordion--2 {
	counter-reset: item 0;

	.wp-block-details {

		> summary {
			counter-increment: item;

			&::before {
				content: counter(item) ". ";
			}
		}
	}
}

/*
Fade in up animation for accordion
*/

@keyframes accordionFadeInUp {

	0% {
		opacity: 0;
		transform: translateY(1rem);
	}

	20% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
