/* FILE: global/base/_details.scss */

%details {
	padding: var(--wp--custom--details--padding--top) var(--wp--custom--details--padding--right) var(--wp--custom--details--padding--bottom) var(--wp--custom--details--padding--left);
	background-color: var(--wp--custom--details--color--background);
	color: var(--wp--custom--details--color--text);
	border: var(--wp--custom--details--border--width) var(--wp--custom--details--border--style) var(--wp--custom--details--border--color);
	border-radius: var(--wp--custom--details--border--radius);
}

details {
	@extend %details;

	&:not(.wp-block-details) {

		> *:not(summary) {
			margin-block-start: var(--wp--custom--details--gap); // @see theme.json
			margin-block-end: 0;
		}

		> *:last-child {
			margin-block-end: 0;
		}
	}
}

	summary {
		position: relative;
		padding-inline-end: 2em;
		font-weight: 700;
		list-style: none;
		cursor: pointer;
		border-radius: inherit;

		&::after {
			content: '';
			position: absolute;
			width: 1em;
			height: 1em;
			top: 50%;
			inset-inline-end: .25em;
			background: radial-gradient( currentColor 50%, transparent 50% );
			background-size: .33em .33em;
			background-repeat: repeat-y;
			background-position: 50% 50%;
			border-radius: 0;
			opacity: var( --wp--custom--details--summary--decoration--opacity, .5 );
			transform: translateY( -50% );
			transition: transform .2s cubic-bezier( .175, .885, .32, 1.275 );

			[open] > & {
				transform: translateY( -50% ) rotate( 90deg );
			}
		}

		&:focus {
			outline: none;
		}

		&:focus-visible {

			outline-width:  var( --wp--custom--details--summary--focus-visible--outline--width,  2px          );
			outline-style:  var( --wp--custom--details--summary--focus-visible--outline--style,  dashed       );
			outline-offset: var( --wp--custom--details--summary--focus-visible--outline--offset, .5em         );
			outline-color:  var( --wp--custom--details--summary--focus-visible--outline--color,  currentColor );

			border-top:    var( --wp--custom--details--summary--focus-visible--border--top,    none         );
			border-right:  var( --wp--custom--details--summary--focus-visible--border--right,  none         );
			border-bottom: var( --wp--custom--details--summary--focus-visible--border--bottom, none         );
			border-left:   var( --wp--custom--details--summary--focus-visible--border--left,   none         );
			border-color:  var( --wp--custom--details--summary--focus-visible--border--color,  currentColor );
		}

		> * {
			display: inline;
		}
	}

.is-style-details {

	&:where( .wp-block-accordion-item ),
	:where( .wp-block-accordion-item ) {
		@extend %details;
	}
}
