.wp-block-themeisle-blocks-accordion {
	$block: &;
	margin: 20px auto;

	--title-color: initial;
	--title-background: initial;
	--content-background: initial;

	--border-width: 1px;
	--border-style: solid;
	--border-color: currentColor;
	--box-shadow: none;

	--padding: 18px 24px 18px 24px;
	--padding-tablet: var( --padding );
	--padding-mobile: var( --padding-tablet );

	&.has-dark-title-bg > &-item > &-item__title,
	&.has-dark-active-title-bg > &-item[open] > &-item__title {
		color: var( --title-color, var( --nv-text-dark-bg , #fff ) );
	}

	&.has-light-title-bg > &-item > &-item__title,
	&.has-light-active-title-bg > &-item[open] > &-item__title {
		color: var( --title-color, var( --nv-text-color , #000 ) );
	}

	&.has-dark-content-bg &-item__content {
		color: var( --text-color, var( --nv-text-dark-bg , #fff ) );
	}

	&.has-light-content-bg &-item__content {
		color: var( --text-color, var( --nv-text-color , #000 ) );
	}

	&-item {
		box-shadow: var(--box-shadow);
		margin: var(--gap) 0;

		&__title {
			/* to not let box-shadow cover the element */
			position: relative;
			z-index: 2;

			color: var(--title-color);
			background: var(--title-background);

			padding: var(--padding);

			/* for specificity */
			#{$block} & > * {
				margin: 0;
			}

			list-style: none;
			cursor: pointer;
			user-select: none;

			display: grid;
			grid-template-columns: auto min-content;
			align-items: center;

			svg {
				width: 24px;
				height: 24px;
			}

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

			@media ( max-width: 960px ) {
				padding: var(--padding-tablet);
			}

			@media ( max-width: 600px ) {
				padding: var(--padding-mobile);
			}
		}

		&__content {
			position: relative;
			z-index: 2;
			background: var(--content-background);
			padding: var(--padding);

			> p:last-child {
				margin-bottom: 0;
			}

			@media ( max-width: 960px ) {
				padding: var(--padding-tablet);
			}

			@media ( max-width: 600px ) {
				padding: var(--padding-mobile);
			}
		}
	}

	/* boxed style */
	&:not( .is-style-default ) &-item {
		&__title {
			border: var(--border-width) var(--border-style) var(--border-color);
		}

		&__content {
			border: var(--border-width) var(--border-style) var(--border-color);
			border-top: none;
		}
	}

	// when no gap is set, we need to avoid the doubled border between items
	&:not( .is-style-default ).no-gap > &-item:not( :first-child ),
	&:not( .is-style-default ):not( .is-narrow-gap ):not( .is-wide-gap ):not( .is-wider-gap ):not( .has-gap ) > &-item:not( :first-child ) {
		&> #{$block}-item__title {
			border-top: none;
		}
	}

	/* default style */
	&.is-style-default > &-item > #{$block}-item__title {
		border-top: var(--border-width) var(--border-style) var(--border-color);
	}

	&.is-style-default > &-item:last-child {
		&:not([open]):not( .is-open ) > #{$block}-item__title {
			border-bottom: var(--border-width) var(--border-style) var(--border-color);
		}

		> #{$block}-item__content {
			border-bottom: var(--border-width) var(--border-style) var(--border-color);
		}
	}

	&.is-narrow-gap > &-item {
		margin: 5px 0;
	}

	&.is-wide-gap > &-item {
		margin: 10px 0;
	}

	&.is-wider-gap > &-item {
		margin: 20px 0;
	}

	&.icon-first > &-item > &-item__title {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		gap: 24px;
	}

	&:not( .has-icon ) > &-item:not([open]) > &-item__title::after,
	&:not( .has-open-icon ) > &-item[open] > &-item__title::after {
		content: '';
		justify-self: end;
		align-self: center;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		width: 8px;
		height: 8px;
	}

	&:not( .has-icon ) > &-item:not([open]) > &-item__title::after {
		transform: rotate(45deg) translate(-25%, 0%);
	}

	&:not( .has-open-icon ) > &-item[open] > &-item__title::after {
		transform: rotate(225deg) translate(0%, -45%);
	}
}
