@use '../../admin-ui/styles/mixins' as admin;
@use 'variables' as *;

// Canvas toolbar above the stage (canvas "1 · Editor"). It renders inside
// TakeoverLayout's admin-ui scope, so colours are admin-ui tokens.

// As in the top bar, the row is the content and the border comes below it:
// inside a border-box 60px the content would be 59px, and 36px controls would
// centre on half pixels.
$mod-canvas-toolbar-row-h: 60px;
$mod-canvas-toolbar-control-h: 36px;

.modula-takeover__canvas-toolbar {
	position: relative;
	// Above the stage, so toolbar menus cover the canvas and the device pill.
	z-index: 6;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding: 0 24px;
	border-bottom: 1px solid var(--modula-admin-border);
	background: var(--modula-admin-surface);
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-body);
}

.modula-takeover__canvas-toolbar-notice {
	margin: $mod-space-8 0 0;
}

// admin-ui's LicenseExpiredBanner under the toolbar while the PRO license has
// expired (canvas Lite artboard); it draws itself, this only places it.
.modula-takeover__license-expired {
	position: relative;
	z-index: 5;
	flex-shrink: 0;
}

// One line of controls. When they need more room than the canvas has, Sort
// narrows first (`_sort-popover.scss`), then the left group wraps; Add never
// shrinks under them (ticket 81).
.modula-takeover__canvas-toolbar-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: $mod-canvas-toolbar-row-h;
}

.modula-takeover__canvas-toolbar-left,
.modula-takeover__canvas-toolbar-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

// On one line, the padding around the controls makes the row's height.
.modula-takeover__canvas-toolbar-left {
	flex-wrap: wrap;
	row-gap: 12px;
	min-width: 0;
	padding-block: calc(($mod-canvas-toolbar-row-h - $mod-canvas-toolbar-control-h) / 2);
}

// Add stays at its width, centred on the first line.
.modula-takeover__canvas-toolbar-right {
	flex-shrink: 0;
	align-self: flex-start;
	min-height: $mod-canvas-toolbar-row-h;
	margin-inline-start: auto;
}

// Quiet icon + label actions (Select multiple, Bulk edit, Sort).
.modula-takeover__canvas-toolbar-action {
	@include admin.button-reset;
	@include admin.control-label;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: $mod-canvas-toolbar-control-h;
	padding: 0 10px;
	border-radius: var(--modula-admin-radius-lg);
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-body);
	white-space: nowrap;

	&:disabled {
		opacity: var(--modula-admin-disabled-opacity);
		cursor: default;
	}

	// Pressed, or a popover trigger (Sort) while its popover is open.
	&:hover:not(:disabled),
	&[aria-pressed="true"],
	&[aria-expanded="true"] {
		background: var(--modula-admin-surface-hover);
	}
}

.modula-takeover__canvas-toolbar-action-icon {
	display: inline-flex;
	flex-shrink: 0;

	svg {
		display: block;
	}
}

// Selection count ("3 images selected · Clear").
.modula-takeover__canvas-toolbar-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-control);
	white-space: nowrap;
}

.modula-takeover__canvas-toolbar-count-value {
	font-variant-numeric: tabular-nums;
}

.modula-takeover__canvas-toolbar-count-clear {
	@include admin.button-reset;
	@include admin.control-label;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.modula-takeover__canvas-toolbar-uploading {
	display: inline-flex;
	align-items: center;
	gap: $mod-space-8;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-help);
}