.wp-block-details {
	border: 1px solid var(--wp--preset--color--contrast);
	transition: all .3s;
	summary {
		padding: var(--col-gap);
		display: flex;
		gap: var(--bl);
		justify-content: space-between;
		list-style: none;
		font-size: var(--wp--preset--font-size--heading-6);
	   font-weight: 600;
	   line-height: 1.1;
    	color: var(--wp--preset--color--contrast);
		outline: none;
		transition: all .3s;

		&::after {
			content: '';
			mask-image: url('../../../assets/icons/angle-right.svg');
			mask-size: contain;
			mask-repeat: no-repeat;
			mask-position: center;
         width: 18px;
         height: 20px;
			background-color: var(--wp--preset--color--accent);
			rotate: 90deg;
			transition: all .3s;
		}

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

		&::focus {
		}
	}

	&[open] {
		border-color: var(--wp--preset--color--accent-3)!important;
		> summary {
			background-color: var(--wp--preset--color--accent-3);
			color: var(--wp--preset--color--base);
			&::after {
				rotate: -90deg;
			}
		}
	}

	>* {
		padding: 0 var(--col-gap) var(--col-gap);
		margin-top: 0;
		&:nth-child(2) {
			padding-top: var(--col-gap);
		}
	}

	ul.wp-block-list,
	ol.wp-block-list {
		padding-left: calc(var(--col-gap-large) + var(--col-gap));
	}
}

.wp-block-group.has-accent-background-color {
	.wp-block-details summary::after {
		background-color: var(--wp--preset--color--base);
	}
}