/**
 * 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);
	margin-top: var(--acc--details--margin--top) !important;

	/* 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: var(--acc--head--display);
		flex-direction: row; /* If not display:flex - will be disabled */
		align-items: center; /* If not display:flex - will be disabled */
		justify-content: space-between; /* If not display:flex - will be disabled */
		font-family: var(--acc--head--font-family);
		font-size: var(--acc--head--font-size);
		font-style: normal;
		text-transform: var(--acc--head--text-transform);
		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-top: var(--acc--head--border-top);
		border-right: var(--acc--head--border-right);
		border-bottom: var(--acc--head--border-bottom);
		border-left: var(--acc--head--border-left);
		border-radius: var(--acc--head--border-radius);
		outline: var(--acc--head--outline);
		padding: var(--acc--head--padding);
		transition: var(--transition);

		&::after {
			content: var(--acc--head--toggle-icon--url);
			display: var(--acc--head--toggle-icon--display);
			height: var(--acc--head--toggle-icon--height);
			vertical-align: var(--acc--head--toggle-icon--vertical-align);
			margin-left: var(--acc--head--toggle-icon--margin-left);
			transition: var(--transition);
		}
	}

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

		& summary {
			border-top: var(--acc--head-open--border-top);
			border-right: var(--acc--head-open--border-right);
			border-bottom: var(--acc--head-open--border-bottom);
			border-left: var(--acc--head-open--border-left);
			outline: var(--acc--head-open--outline);
			background-color: var(--acc--head-open--bg-color);

			&::after {
				content: var(--acc--head-open--toggle-icon--url);
				transform: var(--acc--head-open--toggle-icon--transform);
			}
		}

		& p {
			/* Spacing between title and content. */
			margin-block-start: 0; /* Reset WP default margin. */
			margin-top: var(--acc--body--margin--top);
		}
	}
}