@symbion/opalui/src/c-toolbar.css

A minimalistic CSS framework

/* ==========================================================================
   Toolbar Component - OpalUI
   Icon-only toolbar container with grouped actions
   ========================================================================== */

.c-toolbar {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: var(--col-container-low);
	border-radius: var(--radius-control);

	/* Toolbar buttons - icon-only style */
	& .c-button {
		--btn-height: var(--size-sm);
		background: none;
		box-shadow: none;
		color: var(--col-secondary);

		&:hover:not([disabled]):not(.active) {
			transform: none;
			background: var(--col-container-low);
			box-shadow: none;
		}

		&.active {
			color: var(--col-primary);
			background: var(--col-container-primary);
		}

		&[disabled] {
			opacity: var(--op-disabled);
			cursor: not-allowed;
		}
	}

	/* Group related buttons */
	& .c-toolbar-group {
		display: flex;
		align-items: center;
		gap: 0;

		& .c-button {
			border-radius: 0;

			&:first-child {
				border-radius: var(--radius-control) 0 0 var(--radius-control);
			}

			&:last-child {
				border-radius: 0 var(--radius-control) var(--radius-control) 0;
			}

			&:only-child {
				border-radius: var(--radius-control);
			}
		}
	}
}

/* Toolbar divider - visual separator between button groups */
.c-toolbar-divider {
	border-left: 1px solid var(--col-outline);
	margin-left: var(--space-1);
}

/* Toolbar spacer - push items to the right */
.c-toolbar-spacer {
	flex: 1;
}

/* Compact variant */
.c-toolbar.compact {
	padding: var(--space-1);
	gap: 0;

	& .c-button {
		--btn-height: var(--size-xs);
	}
}

/* vim: ts=4
 */