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

// Add split (canvas "1 · Editor"): the dark primary action and its caret,
// which opens admin-ui's Menu. It renders inside TakeoverLayout's admin-ui
// scope, so colours are admin-ui tokens. 38px tall, as in the canvas, so it
// centres on whole pixels in the 60px toolbar row. Corners are the canvas's
// 8px control radius.

.modula-takeover__preview-add-split {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-self: center;
	align-items: stretch;
	height: 38px;
	border-radius: var(--modula-admin-radius-lg);
	background: var(--modula-admin-ink);
}

// Base of both buttons; the specific rules below override its reset.
.modula-takeover__preview-add-split-main,
.modula-takeover__preview-add-split-caret {
	@include admin.button-reset;
	@include admin.control-label;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--modula-admin-ink-inverse);

	svg {
		flex-shrink: 0;
		fill: currentcolor;
	}
}

.modula-takeover__preview-add-split-main {
	gap: 8px;
	padding: 0 16px;
	border-radius: var(--modula-admin-radius-lg);
	font-size: var(--modula-admin-text-body);
	font-weight: 500;
	white-space: nowrap;
}

// The divider is the inverse ink at low strength, so it reads on the dark
// split in light mode and on the light split in dark mode.
.modula-takeover__preview-add-split-caret {
	width: 34px;
	border-left: 1px solid color-mix(in srgb, var(--modula-admin-ink-inverse) 22%, transparent);
	border-radius: 0 var(--modula-admin-radius-lg) var(--modula-admin-radius-lg) 0;
}

.modula-takeover__preview-add-split-main:hover,
.modula-takeover__preview-add-split-caret:hover {
	background: var(--modula-admin-ink-hover);
}

.modula-takeover__preview-add-split-main:focus-visible,
.modula-takeover__preview-add-split-caret:focus-visible {
	@include admin.focus-ring;
}

// With a primary action the main button keeps only its left corners.
.modula-takeover__preview-add-split-main:not(:only-child) {
	border-radius: var(--modula-admin-radius-lg) 0 0 var(--modula-admin-radius-lg);
}

// The canvas's Add menu is 280px wide.
.modula-admin-ui .modula-takeover__preview-add-split .modula-admin-popover {
	min-width: 280px;
}

// Requirement of a disabled row that is not a PRO pill ("Unavailable").
.modula-takeover__preview-add-menu-note {
	flex-shrink: 0;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
	white-space: nowrap;
}