/* accordion wrapper */ 
.wp-block-tn-accordions {
	--_accordion-spacing: 1rem;
	--_padding-inline: 0.9rem;
	--_padding-block: 0.7rem;
	--_border-radius: 10px;

	--_title-color: var(--wp--preset--color--text);
    --_title-spacing: 10px;

	--_icon-size: 32px;
    --_icon-padding: 9px;
    --_icon-color: var(--wp--preset--color--primary);

	--_toggle-color: currentColor;
	--_toggle-size: 16px;
	--_toggle-animation-duration: 0.25s;

	--_outer-divider-color: var(--wp--preset--color--text-alt);
	--_inner-divider-color: var(--wp--preset--color--text-alt);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--_accordion-spacing);
}

/* dividers */
.wp-block-tn-accordions .divider {
	margin: 0;
	padding: 0;
	height: 1px;
	border: none;
	background-color: var(--_outer-divider-color);
}
.wp-block-tn-accordions .inner-divider {
	position: absolute;
	inset: 0 var(--_padding-inline) auto;
	background-color: var(--_inner-divider-color);
}
.wp-block-tn-accordions .outer-divider {
	width: calc(100% - 2 * var(--_border-radius));
	margin: auto;
}
.wp-block-tn-accordions[hide-last-outer-divider] .outer-divider:last-of-type {
	display: none;
}

/* accordion */
.wp-block-tn-accordion {
	position: relative;
	overflow: hidden;
	border-radius: var(--_border-radius);
	border: 1px solid var(--wp--preset--color--text);
}

/* title */
.wp-block-tn-accordion .title {
	display: grid;
	grid-template-columns: 1fr var(--_toggle-size);
    gap: var(--_title-spacing);
	padding: var(--_padding-block) var(--_padding-inline);
	color: var(--_title-color);
	border-radius: var(--_border-radius);
	cursor: pointer;
	pointer-events: all;
}
.wp-block-tn-accordion[has-icon] .title {
    grid-template-columns: var(--_icon-size) 1fr var(--_toggle-size);
}
.wp-block-tn-accordion .title > * {
	margin: 0;
    align-self: center;
    line-height: 1;
}

/* icon */
.wp-block-tn-accordion .icon {
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wp-block-tn-accordion .icon:has(img) {
    background-color: var(--_icon-color);
}
.wp-block-tn-accordion .icon > img {
    width: 100%;
    height: 100%;
    max-width: calc(var(--_icon-size) - var(--_icon-padding));
    max-height: calc(var(--_icon-size) - var(--_icon-padding));
    object-fit: contain;
}

/* toggle icon */
.wp-block-tn-accordion .toggle-icon {
	position: relative;
	aspect-ratio: 1;
}

.wp-block-tn-accordion .toggle-icon[data-style="chevron"] {
	transition: rotate var(--_toggle-animation-duration) ease;
}
.wp-block-tn-accordion .toggle-icon[data-style="chevron"] svg {
	stroke-linecap: round;
}
.wp-block-tn-accordion .toggle-icon[data-style="chevron"] path {
	stroke: var(--_toggle-color);
	stroke-width: 1px;
	fill: none;
}
.wp-block-tn-accordion[data-open="true"] .toggle-icon[data-style="chevron"] {
	rotate: -180deg;
}

.wp-block-tn-accordion .toggle-icon[data-style="plus-minus"] .line {
	width: 100%;
	height: 1px;
	background-color: var(--_toggle-color);
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	transition: width var(--_toggle-animation-duration) ease;
}
.wp-block-tn-accordion
	.toggle-icon[data-style="plus-minus"]
	.line:last-of-type {
	rotate: 90deg;
	width: 0%;
}
.wp-block-tn-accordion[data-open="false"]
	.toggle-icon[data-style="plus-minus"]
	.line:last-of-type {
	width: 100%;
}

/* content */
.wp-block-tn-accordion .content {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--_padding-block) var(--_padding-inline);
}
.wp-block-tn-accordion .content :first-child,
.wp-block-tn-accordion .content:has(hr.divider) :first-child + * {
	margin-top: 0;
}
.wp-block-tn-accordion .content :last-child {
	margin-bottom: 0;
}

/* only used before js runs - designed to be reset on init */
.wp-block-tn-accordion.start-closed .content {
	display: none;
}