.mai-accordion {
	--icon-plus: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMzc2IDIzMkgyMTZWNzJjMC00LjQyLTMuNTgtOC04LThoLTMyYy00LjQyIDAtOCAzLjU4LTggOHYxNjBIOGMtNC40MiAwLTggMy41OC04IDh2MzJjMCA0LjQyIDMuNTggOCA4IDhoMTYwdjE2MGMwIDQuNDIgMy41OCA4IDggOGgzMmM0LjQyIDAgOC0zLjU4IDgtOFYyODBoMTYwYzQuNDIgMCA4LTMuNTggOC04di0zMmMwLTQuNDItMy41OC04LTgtOHoiLz48L3N2Zz4=' );
	--icon-minus: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBkPSJNMzc2IDIzMkg4Yy00LjQyIDAtOCAzLjU4LTggOHYzMmMwIDQuNDIgMy41OCA4IDggOGgzNjhjNC40MiAwIDgtMy41OCA4LTh2LTMyYzAtNC40Mi0zLjU4LTgtOC04eiIvPjwvc3ZnPg==' );
	margin-bottom: var(--accordion-margin-bottom, var(--spacing-md));
}

.mai-accordion-item {
	--heading-color: var(--color-heading);
	--link-color: var(--color-link); /* forces link color for dark-background */
	margin: 0 0 var(--row-gap);
	padding: 0;
	background: var(--accordion-item-background, var(--color-white));
	color: var(--accordion-item-color, var(--color-body));
	border: var(--accordion-item-border, var(--border));
	box-shadow: var(--accordion-item-box-shadow, 0);
}

.mai-accordion-item:last-child {
	margin-bottom: 0;
}

.mai-accordion[style*="--row-gap:0"] .mai-accordion-item + .mai-accordion-item {
	border-top: 0;
}

.mai-accordion-summary {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 2rem;
	margin: 0;
	padding: var(--accordion-summary-padding, var(--spacing-xs) var(--spacing-md));
	font-weight: var(--accordion-summary-font-weight, var(--heading-font-weight, normal));
	font-size: var(--accordion-summary-font-size, 1rem);
	font-family: var(--accordion-summary-font-family, var(--heading-font-family));
	letter-spacing: var(--accordion-summary-letter-spacing, var(--heading-letter-spacing, normal));
}

.mai-accordion-summary::-webkit-details-marker,
.mai-accordion-summary::marker {
	display: none;
}

.mai-accordion-summary::after {
	position: absolute;
	top: 50%;
	right: 0.5em;
	width: 1em;
	height: 1em;
	margin-left: auto;
	background: currentColor;
	transform: translateY(-50%);
	-webkit-mask-image: var(--accordion-icon, var(--icon-plus));
	mask-image: var(--accordion-icon, var(--icon-plus));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	content: "";
}

.mai-accordion-summary:hover,
.mai-accordion-summary:focus {
	cursor: pointer;
}

/* Not for :focus */
.mai-accordion-summary:hover {
	color: var(--color-link);
}

.mai-accordion-item[open] > .mai-accordion-summary {
	--accordion-icon: var(--accordion-icon-open, var(--icon-minus));
}

.mai-accordion-item[open] > .mai-accordion-summary ~ * {
	-webkit-animation: mai-accordion 0.3s ease-in-out;
	animation: mai-accordion 0.3s ease-in-out;
}

.mai-accordion-title {
	max-width: calc(100% - 2em);
	margin-right: var(--spacing-sm);
}

@-webkit-keyframes mai-accordion {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mai-accordion {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.mai-accordion-content {
	padding: var(--accordion-content-padding, var(--spacing-md));
	border-top: var(--accordion-item-border, var(--border));
}

.has-dark-background {
	--accordion-item-background: var(--color-background);
	--accordion-item-color: var(--color-body);
}