/**
 * Main file to define styles for accordion (details block).
 *
 * author Vladimir
 * version 1.0
 */

/* Add a custom transition when opening/closing. */
.wp-block-details {
	transition: var(--transition);
	border-bottom: 1px solid var(--acc--head--border-color);

	/* Add horizontal margin to nested blocks/elements. */
	& > :where( :not( summary ) ) {
		margin-left: var(--acc--body--margin--left);
		margin-right: var(--acc--body--margin--right);
	}

	/* Base `summary` (head) element styling. */
	& summary {
		list-style: none; /* Disables the default marker */
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-family: var(--acc--head--font-family);
		font-size: var(--acc--head--font-size);
		font-style: normal;
		font-weight: var(--acc--head--font-weight);
		line-height: var(--acc--head--line-height);
		background-color: var(--acc--head--bg-color);
		box-sizing: border-box;
		border: var(--acc--head--border);
		border-radius: var(--acc--head--border-radius);
		outline: var(--acc--head--outline);
		padding: var(--acc--head--padding);
		transition: var(--transition);

		&::after {
			content: "";
			display: block;
			width: var(--acc--head--toggle-icon--width);
			height: var(--acc--head--toggle-icon--height);
			flex-shrink: 0;
			margin-left: var(--acc--head--toggle-icon--margin-left);
			background:
				linear-gradient(var(--acc--head--toggle-icon--color) 0 0) center /
					var(--acc--head--toggle-icon--line-size)
					var(--acc--head--toggle-icon--stroke-width) no-repeat,
				linear-gradient(var(--acc--head--toggle-icon--color) 0 0) center /
					var(--acc--head--toggle-icon--stroke-width)
					var(--acc--head--toggle-icon--line-size) no-repeat;
			transform: rotate(0deg);
			transition:
				transform 0.25s ease,
				background-size 0.16s ease 0.1s;
		}
	}

	/* If open, add some bottom padding to avoid content butting against the bottom. */
	&[open] {
		padding-bottom: var(--acc--body--padding--bottom);
		outline: var(--acc--body--outline);

		& summary {
			border: var(--acc--head-open--border);
			outline: var(--acc--head-open--outline);

			&::after {
				background-size:
					var(--acc--head--toggle-icon--line-size)
					var(--acc--head--toggle-icon--stroke-width),
					0 var(--acc--head--toggle-icon--line-size);
				transform: rotate(var(--acc--head-open--toggle-icon--rotation));
			}
		}
	}
}