/*

This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.

*/

/* ============================================================
   Settings tab — command category grouping
   ============================================================ */

.bindthem-category-list {
	margin-bottom: 0.5em;
}

.bindthem-category {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	margin-bottom: 0.5em;
	overflow: hidden;
}

.bindthem-category > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.65em 1em;
	cursor: pointer;
	font-weight: 600;
	background-color: var(--background-secondary);
	list-style: none;
}

.bindthem-category > summary::-webkit-details-marker {
	display: none;
}

.bindthem-category > summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 0.5em;
	color: var(--text-muted);
	transition: transform 0.15s ease-in-out;
}

.bindthem-category[open] > summary::before {
	transform: rotate(90deg);
}

.bindthem-category-name {
	flex: 1;
}

.bindthem-category-count {
	font-weight: 400;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	white-space: nowrap;
}

.bindthem-category-content {
	padding: 0 1em;
}

.bindthem-category-content .setting-item {
	border-top: 1px solid var(--background-modifier-border);
}

.bindthem-category-content .setting-item:first-child {
	border-top: none;
}