/**
 * Core – Details Block
 */

/* Base `summary` element styling. */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--black);

	/* Add horizontal margin to nested blocks/elements. */
	> :where( :not( summary ) ) {
		margin-inline: var(--wp--preset--spacing--30);
	}

	+ .wp-block-details {
		margin-block-start: 0;
	}

	&:last-of-type {
		border-bottom: 1px solid var(--wp--preset--color--black);
	}

	summary {
		align-items: center;
		box-sizing: border-box;
		display: grid;
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: 1fr 30px;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--30);

		&::marker {
			content: '';
		}

		&::after {
			background-image: url(../images/chevron-down-green.svg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 28px;
			content: '';
			display: inline-block;
			height: 30px;
			width: 35px;
		}

		/* If in the Blue Group block style */
		.is-style-blue & {
			&::after {
				background-image: url(../images/chevron-down-black.svg);
			}
		}
	}
}

/* If Open */
.wp-block-details[open] {
	padding-bottom: 2rem;

	/* Add some bottom padding to avoid content butting against the bottom */
	summary {

		/* Change marker image */
		&::after {
			background-image: url(../images/x-green.svg);
			background-size: 32px;
		}

		/* If in the Blue Group block style */
		.is-style-blue & {
			&::after {
				background-image: url(../images/x-black.svg);
			}
		}
	}
}