// The menu select (`fields/SelectMenuControl.jsx`), with the canvas select's
// look: 12px text inset, a filled 10×5 caret 14px from the edge. Mixin only:
// this file emits no CSS. Each editor includes it with the control's
// `classBlock`, so its rules read `.modula-admin-ui .<block>__select-menu…`.
@mixin select-menu($block) {

	.modula-admin-ui .#{$block}__select-menu {
		position: relative;
		width: 100%;

		// The trigger fills the menu's width, as a native select does.
		> .modula-admin-popover-anchor {
			display: flex;
			width: 100%;
		}
	}

	.modula-admin-ui .#{$block}__select-menu-trigger {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: var(--modula-admin-control-height);
		margin: 0;
		padding: 0 14px 0 12px;
		border: 1px solid var(--modula-admin-border-field);
		border-radius: var(--modula-admin-radius-sm);
		background: var(--modula-admin-surface);
		color: var(--modula-admin-ink);
		font: inherit;
		text-align: left;
		cursor: pointer;

		&:focus-visible {
			border-color: var(--modula-admin-ink);
			outline: 2px solid transparent;
			box-shadow: var(--modula-admin-focus-field);
		}

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

		&[aria-expanded="true"] {
			border-color: var(--modula-admin-ink);
		}
	}

	.modula-admin-ui .#{$block}__select-menu-icon {
		display: inline-flex;
		flex-shrink: 0;
		width: 20px;
		height: 20px;

		svg {
			width: 100%;
			height: 100%;
		}
	}

	// The current label and the hidden option labels share one cell: the
	// widest sets the trigger's width; a narrower trigger cuts the label
	// with "…".
	.modula-admin-ui .#{$block}__select-menu-value {
		display: grid;
		flex: 1 1 auto;
		grid-template-columns: minmax(0, 1fr);
		min-width: 0;
	}

	.modula-admin-ui .#{$block}__select-menu-current,
	.modula-admin-ui .#{$block}__select-menu-sizer {
		grid-area: 1 / 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.modula-admin-ui .#{$block}__select-menu-sizer {
		visibility: hidden;
	}

	.modula-admin-ui .#{$block}__select-menu-caret {
		flex-shrink: 0;
		fill: var(--modula-admin-ink-soft);
	}

	.modula-admin-ui .#{$block}__select-menu-hint {
		margin-left: auto;
		color: var(--modula-admin-ink-muted);
		font-size: var(--modula-admin-text-caption);
		white-space: nowrap;
	}
}