/* Editor Toolbar Button - Using Obsidian's native clickable-icon styling */

/* Container styling for proper integration */
.note-status-editor-toolbar-badge {
	display: inline-flex;
	align-items: center;
	margin: 0 var(--size-2-1);
}

/* Hidden state */
.note-status-editor-toolbar-badge--hidden {
	display: none;
}

/* BEM-based styles for toolbar button components */

/* Status icon styling */
.editor-toolbar-button__icon {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	width: 18px;
	height: 18px;
	line-height: 1;
}

/* Icon with status color */
.editor-toolbar-button__icon--has-status {
	color: var(--interactive-accent);
}

/* Multiple statuses container */
.editor-toolbar-button__icon-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Status counter badge */
.editor-toolbar-button__counter {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 12px;
	height: 12px;
	padding: 0 2px;
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	font-size: 8px;
	font-weight: var(--font-semibold);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid var(--background-primary);
}
