:where(.toggle) {
	--_padding_x: 1.5rem;
	--_content-padding-y: 2rem;
	--_summary-padding-y: 0.5rem;
	--_border: 1px solid var(--primary-color);
	--_border-open: 1px solid var(--primary-color);
	--_shadow: none;
	--_shadow-open: none;
	--_summary-background: var(--primary-color);
	--_summary-background-open: var(--primary-color);
	--_summary-text: var(--primary-color-contrast);
	--_summary-text-open: var(--primary-color-contrast);
	--_content-background: var(--page-background);
	--_content-text: var(--page-text);

	display: block;
	width: 100%;
	transition: all 300ms ease-in-out;
	box-shadow: var(--_shadow);
	border: var(--_border);
}

:where(.toggle[open]) {
	box-shadow: var(--_shadow-open);
	border: var(--_border-open);
}

/**
MISC
 */
:where(.toggle__summary::-webkit-details-marker) {
	display: none;
}
.wp-block-k2-toggle summary::-webkit-details-marker {
	display: none;
}

:where(
    .toggle + .toggle,
    #editor div[data-type="k2/toggle"] + div[data-type="k2/toggle"]
) {
	margin-top: var(--_gap);
}

/**
SUMMARY
 */
:where(.toggle__summary) {
	list-style: none;
	background: var(--_summary-background);
	color: var(--_summary-text);
	padding: var(--_summary-padding-y) var(--_padding_x);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	transition: background-color 300ms ease-in-out;
	cursor: pointer;
}

:where(.toggle[open] .toggle__summary) {
	background: var(--_summary-background-open);
	color: var(--_summary-text-open);
}

/**
SUMMARY INDICATOR
 */
:where(.toggle__indicator) {
	height: 1.5em;
	width: auto;
	aspect-ratio: 1 / 1;
	display: block;
	flex-shrink: 0;
	position: relative;
}

.toggle__indicator::before,
.toggle__indicator::after {
	--_rotate: 0;
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 4px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(var(--_rotate));
	transition: transform 300ms ease;
}

.toggle__indicator::after {
	--_rotate: 90deg;
}

.toggle[open] .toggle__indicator::after {
	--_rotate: 0;
}

/**
CONTENT
 */
:where(.toggle__content) {
	padding-inline: var(--_padding_x);
	padding-block: var(--box-padding-top) var(--box-padding-bottom);
	color: var(--_content-text);
	background: var(--_content-background);
}

/**
EDITOR
 */
#editor .toggle summary {
	padding-block: 0;
}

#editor .toggle summary input {
	padding: var(--_summary-padding-y) 0;
	width: 100%;
	max-width: unset;
	display: block;
	border: none;
	color: inherit;
	background: transparent;
	line-height: inherit;
}

#editor .toggle__summary input::placeholder {
	color: var(--_summary-text);
	opacity: 0.75;
}

#editor .toggle__summary input::-moz-placeholder {
	color: var(--_summary-text);
	opacity: 0.75;
}

#editor .toggle__summary input::-webkit-input-placeholder {
	color: var(--_summary-text);
	opacity: 0.75;
}

#editor .toggle[open] .toggle__summary input::placeholder {
	color: var(--_summary-text);
	opacity: 0.75;
}

#editor .toggle[open] .toggle__summary input::-moz-placeholder {
	color: var(--_summary-text);
	opacity: 0.75;
}

#editor .toggle[open] .toggle__summary input::-webkit-input-placeholder {
	color: var(--_summary-text);
	opacity: 0.75;
}