/* ==========================================================================
   Status Bar Components
   ========================================================================== */

/* Status Bar Container */
.status-bar-item {
	/* Uses Obsidian's built-in status bar item styles */
}

.status-bar-no-status {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2-2);
	color: var(--status-empty-color, var(--text-muted));
}

.status-bar-no-status:hover {
	color: var(--text-normal);
}

.status-bar-no-status__icon {
	opacity: 0.9;
}

.status-bar-no-status__label {
	font-weight: var(--font-medium);
}

/* Enable Button */
.status-bar-enable-button {
	cursor: pointer;
	opacity: var(--icon-opacity);
	transition: opacity var(--anim-duration-fast) ease;
}

.status-bar-enable-button:hover {
	opacity: var(--icon-opacity-hover);
}

/* Status Bar Group */
.status-bar-group-row {
	display: flex;
	align-items: center;
	gap: var(--size-4-2);
}

.status-bar-group-container {
	display: flex;
	gap: var(--size-2-1);
	flex-wrap: wrap;
	align-items: center;
}

.status-bar-status-item {
	display: inline-flex;
	align-items: center;
}

.status-bar-status-item--animated {
	animation: status-slide-in var(--anim-duration-fast) ease-out
		var(--status-anim-delay, 0s) both;
}

/* Animation for expanding status items */
@keyframes status-slide-in {
	from {
		opacity: 0;
		transform: scale(0.8) translateY(4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
