/* Accordion */
.dmir-accordion {
	width: 100%;
}

.dmir-accordion-item + .dmir-accordion-item {
	border-top: 1px solid #e5e7eb;
}

.dmir-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--dmir-accordion-header-padding, 16px 20px);
	background: var(--dmir-accordion-header-background, none);
	border: none;
	text-align: left;
	gap: 12px;
	font-family: inherit;
	font-size: var(--dmir-accordion-header-font-size, inherit);
	color: var(--dmir-accordion-header-color, inherit);
	cursor: pointer;
}

.dmir-accordion-item.is-open > .dmir-accordion-header {
	background: var(--dmir-accordion-header-active-background, var(--dmir-accordion-header-background, none));
	color: var(--dmir-accordion-header-active-color, var(--dmir-accordion-header-color, inherit));
}

.dmir-accordion-title {
	flex: 1;
}

.dmir-accordion-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: currentColor;
}

.dmir-accordion-icon--chevron::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 160ms ease;
}

.dmir-accordion-item.is-open > .dmir-accordion-header .dmir-accordion-icon--chevron::before {
	transform: rotate(225deg);
}

.dmir-accordion-icon--plus-minus::before,
.dmir-accordion-icon--plus-minus::after {
	content: "";
	position: absolute;
	width: 0.8em;
	height: 2px;
	background: currentColor;
}

.dmir-accordion-icon--plus-minus {
	position: relative;
}

.dmir-accordion-icon--plus-minus::after {
	transform: rotate(90deg);
}

.dmir-accordion-item.is-open > .dmir-accordion-header .dmir-accordion-icon--plus-minus::after {
	display: none;
}

.dmir-accordion-body {
	background: var(--dmir-accordion-body-background, transparent);
	border-top: var(--dmir-accordion-body-border-top-width, 0) solid var(--dmir-accordion-body-border-top-color, transparent);
}

.dmir-accordion-body[hidden] {
	display: none;
}

.dmir-accordion-body-inner {
	padding: var(--dmir-accordion-body-padding, 16px 20px);
}

/* Tabs */
.dmir-tabs {
	width: 100%;
}

.dmir-tabs-nav {
	display: flex;
	gap: var(--dmir-tabs-nav-gap, 0);
	background: var(--dmir-tabs-nav-background, transparent);
	border-bottom: var(--dmir-tabs-nav-bw, 0) solid var(--dmir-tabs-nav-border-color, #e5e7eb);
}

.dmir-tabs[data-align="center"] .dmir-tabs-nav {
	justify-content: center;
}

.dmir-tabs[data-align="right"] .dmir-tabs-nav {
	justify-content: flex-end;
}

.dmir-tab-btn {
	padding: var(--dmir-tab-padding, 12px 20px);
	background: var(--dmir-tab-background, none);
	border: var(--dmir-tab-border-width, 0) var(--dmir-tab-border-style, solid) var(--dmir-tab-border-color, transparent);
	border-radius: var(--dmir-tab-border-radius, 0);
	border-bottom: var(--dmir-tab-active-indicator-width, 2px) solid transparent;
	margin-bottom: calc(var(--dmir-tab-active-indicator-width, 2px) * -1);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--dmir-tab-font-size, inherit);
	color: var(--dmir-tab-color, inherit);
	white-space: nowrap;
}

.dmir-tab-btn.is-active {
	background: var(--dmir-tab-active-background, var(--dmir-tab-background, none));
	color: var(--dmir-tab-active-color, var(--dmir-tab-color, inherit));
	border-bottom-color: var(--dmir-tab-active-indicator-color, currentColor);
}

.dmir-tabs-panels {
	background: var(--dmir-tab-content-background, transparent);
	border: var(--dmir-tab-content-border-width, 0) var(--dmir-tab-content-border-style, solid) var(--dmir-tab-content-border-color, transparent);
	border-radius: var(--dmir-tab-content-border-radius, 0);
}

.dmir-tab-panel {
	padding: var(--dmir-tab-content-padding, 20px);
}

.dmir-tab-panel[hidden] {
	display: none;
}

@media (max-width: 768px) {
	.dmir-tabs-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dmir-tabs-nav::-webkit-scrollbar {
		display: none;
	}
}

[data-editor] .dmir-accordion-header,
[data-editor] .dmir-tab-btn {
	cursor: default;
}

[data-editor] .dmir-accordion-body,
[data-editor] .dmir-accordion-body[hidden],
[data-editor] .dmir-tab-panel,
[data-editor] .dmir-tab-panel[hidden] {
	display: block !important;
}