/* Style buttons in the block style panel to use Dashicons font */
/* Replace the text labels in the panel with Dashicons */
.block-editor-block-styles__item .block-editor-block-styles__item-text::before {
	font-family: dashicons;
	font-size: 18px;
}

.block-editor-block-styles__item[aria-label="Plus X"] .block-editor-block-styles__item-text::before {
	content: "\f132   \f158";
}

.block-editor-block-styles__item[aria-label="Plus Minus"] .block-editor-block-styles__item-text::before {
	content: "\f132   \f460";
}

.block-editor-block-styles__item[aria-label="Chevron X"] .block-editor-block-styles__item-text::before {
	content: "\f347   \f158";
}

.block-editor-block-styles__item[aria-label="Chevron Right Up"] .block-editor-block-styles__item-text::before {
	content: "\f345   \f343";
}

.block-editor-block-styles__item[aria-label="Chevron Toggle"] .block-editor-block-styles__item-text::before {
	content: "\f347   \f343";
}

/* Only hide labels for Details styles */
.block-editor-block-styles__item[aria-label="Plus X"] .block-editor-block-styles__item-text,
.block-editor-block-styles__item[aria-label="Plus Minus"] .block-editor-block-styles__item-text,
.block-editor-block-styles__item[aria-label="Chevron X"] .block-editor-block-styles__item-text,
.block-editor-block-styles__item[aria-label="Chevron Right Up"] .block-editor-block-styles__item-text,
.block-editor-block-styles__item[aria-label="Chevron Toggle"] .block-editor-block-styles__item-text {
	font-size: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wp-block-details [class*="is-style-icon-"] summary::before,
	.wp-block-details [class*="is-style-icon-"] summary::after {
		transition: none !important;
	}
}

/* Base: hide native marker & spacing */
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::marker {
	content: "";
}

.wp-block-details summary {
	position: relative;
	list-style: none;
}

/* Don't inherit summary typography in the nested body group */
.wp-block-details .wp-block-group.details__body-group {
	font-size: initial;
	font-weight: initial;
}

/* Custom Icon Styles */
.wp-block-details {
	padding: 0 !important;
	overflow: clip;
	interpolate-size: allow-keywords;
}

/* Smooth open/close */
.wp-block-details::details-content {
	transition:
		block-size 1s,
		content-visibility 1s allow-discrete;
	overflow: hidden;
	block-size: 0;
}

.wp-block-details[open]::details-content {
	block-size: auto;
}

/* Icon sizes */
.wp-block-details.has-icon-size-sm summary::before,
.wp-block-details.has-icon-size-sm summary::after,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-sm[open] summary::before,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-sm[open] summary::after {
	width: 1rem;
	height: 2px;
}

.wp-block-details.has-icon-size-md summary::before,
.wp-block-details.has-icon-size-md summary::after,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-md[open] summary::before,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-md[open] summary::after {
	width: 1.25rem;
	height: 4px;
}

.wp-block-details.has-icon-size-lg summary::before,
.wp-block-details.has-icon-size-lg summary::after,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-lg[open] summary::before,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-lg[open] summary::after {
	width: 2rem;
	height: 6px;
}

/* Icon side */
.wp-block-details.details--icon-left summary::before,
.wp-block-details.details--icon-left summary::after,
.wp-block-details.details--icon-left.is-style-icon-chevron-x[open] summary::before,
.wp-block-details.details--icon-left.is-style-icon-chevron-x[open] summary::after {
	left: 0.75rem;
}

.wp-block-details.details--icon-right summary::before,
.wp-block-details.details--icon-right summary::after,
.wp-block-details.details--icon-right.is-style-icon-chevron-x[open] summary::before,
.wp-block-details.details--icon-right.is-style-icon-chevron-x[open] summary::after {
	left: auto;
	right: 0.75rem;
}

/* Control padding */
.wp-block-details summary,
.wp-block-details .wp-block-group.details__body-group {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.wp-block-details.has-icon-size-sm.details--icon-left summary,
.wp-block-details.has-icon-size-sm.details--icon-left .wp-block-group.details__body-group {
	padding-right: 1rem;
	padding-left: 2.25rem;
}

.wp-block-details.has-icon-size-md.details--icon-left summary,
.wp-block-details.has-icon-size-md.details--icon-left .wp-block-group.details__body-group {
	padding-right: 1rem;
	padding-left: 2.75rem;
}

.wp-block-details.has-icon-size-lg.details--icon-left summary,
.wp-block-details.has-icon-size-lg.details--icon-left .wp-block-group.details__body-group {
	padding-right: 1rem;
	padding-left: 3.75rem;
}

.wp-block-details.has-icon-size-sm.details--icon-right summary,
.wp-block-details.has-icon-size-sm.details--icon-right .wp-block-group.details__body-group {
	padding-right: 2.25rem;
	padding-left: 1rem;
}

.wp-block-details.has-icon-size-md.details--icon-right summary,
.wp-block-details.has-icon-size-md.details--icon-right .wp-block-group.details__body-group {
	padding-right: 2.75rem;
	padding-left: 1rem;
}

.wp-block-details.has-icon-size-lg.details--icon-right summary,
.wp-block-details.has-icon-size-lg.details--icon-right .wp-block-group.details__body-group {
	padding-right: 3.75rem;
	padding-left: 1rem;
}

/* Shared icon styles */
.wp-block-details summary::before,
.wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 48%;
	background: currentColor;
	border-radius: 1px;
	transform-origin: 50% 50%;
	transition: transform 0.2s ease;
}

/* Default, + to x */
.wp-block-details.is-style-default summary::before,
.wp-block-details.is-style-icon-plus-x summary::before {
	transform: translateY(-50%) rotate(0deg);
}

.wp-block-details.is-style-default summary::after,
.wp-block-details.is-style-icon-plus-x summary::after {
	transform: translateY(-50%) rotate(90deg);
}

/* Open state */
.wp-block-details.is-style-default[open] > summary::before,
.wp-block-details.is-style-icon-plus-x[open] > summary::before {
	transform: translateY(-50%) rotate(45deg);
}

.wp-block-details.is-style-default[open] > summary::after,
.wp-block-details.is-style-icon-plus-x[open] > summary::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* + to - */
.wp-block-details.is-style-icon-plus-minus summary::before {
	transform: translateY(-50%) rotate(0deg);
}

.wp-block-details.is-style-icon-plus-minus summary::after {
	transform: translateY(-50%) rotate(90deg);
}

/* Open state */
.wp-block-details.is-style-icon-plus-minus[open] > summary::after {
	transform: none;
}

/* Chevron styles */
.wp-block-details.is-style-icon-chevron-x.has-icon-size-sm summary::before,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-sm summary::after,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-sm summary::before,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-sm summary::after,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-sm[open] summary::before,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-sm[open] summary::after,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-sm summary::before,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-sm summary::after,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-sm[open] summary::before,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-sm[open] summary::after {
	width: 0.55rem;
	left: 1rem;
}

.wp-block-details.is-style-icon-chevron-x.has-icon-size-md summary::before,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-md summary::after,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-md summary::before,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-md summary::after,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-md[open] summary::before,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-md[open] summary::after,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-md summary::before,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-md summary::after,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-md[open] summary::before,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-md[open] summary::after {
	width: 0.8rem;
	height: 4px;
}

.wp-block-details.is-style-icon-chevron-x.has-icon-size-lg summary::before,
.wp-block-details.is-style-icon-chevron-x.has-icon-size-lg summary::after,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-lg summary::before,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-lg summary::after,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-lg[open] summary::before,
.wp-block-details.is-style-icon-chevron-toggle.has-icon-size-lg[open] summary::after,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-lg summary::before,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-lg summary::after,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-lg[open] summary::before,
.wp-block-details.is-style-icon-chevron-right-up.has-icon-size-lg[open] summary::after {
	width: 1.5rem;
	height: 6px;
}

/* Chevron positioning - left */
.wp-block-details.details--icon-left.is-style-icon-chevron-x summary::before,
.wp-block-details.details--icon-left.is-style-icon-chevron-x summary::after,
.wp-block-details.details--icon-left.is-style-icon-chevron-toggle summary::before,
.wp-block-details.details--icon-left.is-style-icon-chevron-toggle summary::after,
.wp-block-details.details--icon-left.is-style-icon-chevron-toggle[open] summary::before,
.wp-block-details.details--icon-left.is-style-icon-chevron-toggle[open] summary::after,
.wp-block-details.details--icon-left.is-style-icon-chevron-right-up summary::before,
.wp-block-details.details--icon-left.is-style-icon-chevron-right-up summary::after,
.wp-block-details.details--icon-left.is-style-icon-chevron-right-up[open] summary::before,
.wp-block-details.details--icon-left.is-style-icon-chevron-right-up[open] summary::after {
	left: 1rem;
}

/* Chevron positioning - right */
.wp-block-details.details--icon-right.is-style-icon-chevron-x summary::before,
.wp-block-details.details--icon-right.is-style-icon-chevron-x summary::after,
.wp-block-details.details--icon-right.is-style-icon-chevron-toggle summary::before,
.wp-block-details.details--icon-right.is-style-icon-chevron-toggle summary::after,
.wp-block-details.details--icon-right.is-style-icon-chevron-toggle[open] summary::before,
.wp-block-details.details--icon-right.is-style-icon-chevron-toggle[open] summary::after,
.wp-block-details.details--icon-right.is-style-icon-chevron-right-up summary::before,
.wp-block-details.details--icon-right.is-style-icon-chevron-right-up summary::after,
.wp-block-details.details--icon-right.is-style-icon-chevron-right-up[open] summary::before,
.wp-block-details.details--icon-right.is-style-icon-chevron-right-up[open] summary::after {
	left: auto;
	right: 1rem;
}

/* Chevron down */
.wp-block-details.is-style-icon-chevron-x summary::before,
.wp-block-details.is-style-icon-chevron-toggle summary::before {
	transform: translateY(0%) translateX(-35%) rotate(35deg);
}

.wp-block-details.is-style-icon-chevron-x summary::after,
.wp-block-details.is-style-icon-chevron-toggle summary::after {
	transform: translateY(0%) translateX(35%) rotate(-35deg);
}

/* Chevron X open */
.wp-block-details.is-style-icon-chevron-x[open] > summary::before {
	transform: translateY(-50%) rotate(45deg);
}

.wp-block-details.is-style-icon-chevron-x[open] > summary::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* Chevron toggle/right-up open */
.wp-block-details.is-style-icon-chevron-toggle[open] > summary::before,
.wp-block-details.is-style-icon-chevron-right-up[open] > summary::before {
	transform: translateX(35%) rotate(35deg);
}

.wp-block-details.is-style-icon-chevron-toggle[open] > summary::after,
.wp-block-details.is-style-icon-chevron-right-up[open] > summary::after {
	transform: translateX(-35%) rotate(-35deg);
}

/* Chevron right */
.wp-block-details.is-style-icon-chevron-right-up > summary::before {
	transform: translateY(-110%) translateX(0%) rotate(45deg);
}

.wp-block-details.is-style-icon-chevron-right-up > summary::after {
	transform: translateY(110%) translateX(0%) rotate(-45deg);
}

/* Hover / open styles
   Only the summary changes.
   The nested details body group is left untouched. */
.wp-block-details > summary {
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

.wp-block-details:hover > summary,
.wp-block-details[open] > summary {
	background-color: var(--wp--preset--color--theme-black) !important;
	color: var(--wp--preset--color--theme-white) !important;
}