@use '../styles/mixins';

.modula-admin-accordion {
	overflow: hidden;
	border: 1px solid var(--modula-admin-border);
	border-radius: var(--modula-admin-radius-lg);
	background: var(--modula-admin-surface);
}

.modula-admin-accordion__section + .modula-admin-accordion__section {
	border-top: 1px solid var(--modula-admin-border);
}

.modula-admin-accordion__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 16px;

	.is-open > & {
		background: var(--modula-admin-surface-sunken);
	}
}

.modula-admin-accordion__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--modula-admin-ink-soft);

	svg {
		width: 15px;
		height: 15px;
	}
}

.modula-admin-accordion__heading {
	flex-grow: 1;
	min-width: 0;
	margin: 0;
	font: inherit;
}

.modula-admin-accordion__toggle {
	@include mixins.button-reset;
	@include mixins.control-label;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);
	text-align: left;

	&:focus-visible {
		@include mixins.focus-ring;
		outline-offset: -2px;
	}
}

.modula-admin-accordion__title {
	flex-grow: 1;
	font-weight: 600;
}

.modula-admin-accordion__chevron {
	display: flex;
	color: var(--modula-admin-ink-soft);
	transition: transform var(--modula-admin-transition);

	.is-open > .modula-admin-accordion__head & {
		transform: rotate(180deg);
	}
}

.modula-admin-accordion__panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 16px 16px;

	&[hidden] {
		display: none;
	}
}