/**
 * The one context menu, for all of Spaces.
 *
 * The node lives in the top layer (`popover`), so it is outside every stacking
 * context and every `overflow: hidden` on the page: the `--f-color-*` variables
 * it takes its colours from are defined on `:root` and on `body`, which the top
 * layer still inherits from, and per-Space theming sits on `:root` as well.
 *
 * Positioning is the controller's (assets/js/menu.js); everything here uses
 * logical properties, so right-to-left needs no second stylesheet.
 */

/*
 * The surface: what a popover has to wear to read as a Spaces menu, and nothing
 * about being one.
 *
 * It is a class of its own so a panel that is *not* a list of entries can
 * look like the rest of Spaces without going through the controller. The
 * table of who responded to a prompt (spaces-responses) is the case it was
 * split out for: it has a header row and three columns, so it is not
 * menu-shaped and never will be, but there is no reason for it to invent its
 * own sheet of paper. What a menu is made *of* stays data
 * (concept-menu-entries.md §4: no `html`, no `type`); what it looks like is
 * CSS, and CSS is shareable without a payload.
 *
 * Look only, which is why there is no padding here: rows are full-bleed and
 * bring their own, a panel of prose wants its own, and the two are not the
 * same answer. Placement, stacking and the closed state stay below.
 *
 * Name the style handle (`Menu::HANDLE`) as a dependency and the cascade is
 * right: this file is printed first, so a caller's own sheet overrides it.
 */
.spaces-menu,
.spaces-menu-surface {
	min-inline-size: 12rem;
	max-inline-size: min(20rem, calc(100vw - 1rem));
	max-block-size: min(24rem, calc(100vh - 2rem));
	margin: 0;
	border: 1px solid var(--f-color-border-1);
	border-radius: var(--f-radius, 4px);
	background-color: var(--f-color-bg-1, #fff);
	box-shadow: 0 8px 30px var(--f-color-shadow);
	color: var(--f-color-text-0, #222);
	font-size: 0.9rem;
	line-height: 1.3;
	overflow: hidden auto;
}

/* Being one: placed against its trigger, and shut until it is opened. */
.spaces-menu {
	position: fixed;
	inset: auto; /* The UA centres a popover; ours is placed against its trigger. */
	z-index: 1000; /* Only for the top layer being unavailable, e.g. in a print view. */
	padding-inline: 0;
}

.spaces-menu:not(:popover-open) {
	display: none;
}

/* Whose menu this is. The name is in the menu's aria-label for anyone who
   cannot see it, so this one is hidden from the accessibility tree. */
.spaces-menu-name {
	display: block;
	padding-block: 0.4rem;
	padding-inline: 0.75rem;
	overflow: hidden;
	border-block-end: 1px solid var(--f-color-border-0, #e0e0e0);
	color: var(--f-color-text-2, #666);
	font-size: 0.8rem;
	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The rows are text, in the weight of the text around them rather than the
   theme's link weight (the menu borrows `card` for its looks).

   `display: flex` is what makes an `a` or a `button` take the menu's width; the
   two flex lines below only come into play in a row that holds more than one
   thing, where the first item takes what the icons beside it leave. */
.spaces-menu-item {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex: 1 1 auto;
	min-inline-size: 0;
	margin: 0;
	padding-block: 0.6rem;
	padding-inline: 0.75rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: normal;

	/* A `button` row would be centred by the UA; an `a` row would not. */
	text-align: start;
	text-decoration: none;
	cursor: pointer;

	& > .spaces-meu-label {
		display: inline-flex;
		align-items: center;
	}
}

/* A row that says two things: what it is, and quieter under it what pressing it
   does (the avatar menu's profile row is the name, then "Go to profile"). They
   are a column of their own so the row around them stays a row. */
.spaces-menu-text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

/* One hairline where a group ends, instead of a band around every row: what
   belongs together stands together and the menu stays a list rather than a
   stack of boxes. The heading above the first group is the one exception, and
   it is a heading.

   The controller puts the class on whatever the top-level row happens to be —
   an entry that is one thing is that thing, an entry with buttons beside it is
   a `.spaces-menu-row` — so this asks where the row is, not what it is. */
.spaces-menu > .is-group-start {
	border-block-start: 1px solid var(--f-color-border-0, #e0e0e0);
}

/* A row that holds more than one thing: the first takes the width, the rest are
   icons at the end (a second way to edit, four ways to move a page). */
.spaces-menu-row {
	display: flex;
	align-items: stretch;
}

.spaces-menu-item.is-secondary {
	flex: none;
	padding-inline: 0.6rem;
	color: var(--f-color-text-2, #666);
}

/* The icons line up in a column of their own, so the labels do too — including
   the labels of the rows that have no icon. */
.spaces-menu-icon {
	inline-size: 1rem;
	flex: none;
	text-align: center;
}

.spaces-menu-has-icons .spaces-menu-item:not([data-entry-icon])::before {
	/* content: "";
	inline-size: 1rem;
	flex: none; */
}

.spaces-menu-item.is-secondary::before {
	content: none; /* An icon button is its icon; it is not in the column. */
}

/* Information rather than an action: a count, a date, "no mails were sent for
   this". There is nothing to press, so it does not offer itself as something to
   press (no pointer, no hover, not in the keyboard's walk), and it is said
   quietly. It keeps the size of the rows around it, being one of them. */
.spaces-menu-item.is-static {
	color: var(--f-color-text-2, #666);
	cursor: default;
}

.spaces-menu-item.is-static .spaces-menu-label {
	white-space: normal; /* A sentence, not a label: it may use two lines. */
}

/* Except where the buttons it belongs to stand beside it: then it is their
   label rather than information, and reads like every other label. Only an
   entry with `actions` is wrapped in a row, so this asks exactly that. */
.spaces-menu-row > .spaces-menu-item.is-static {
	color: inherit;
}

/* Chips in a menu are the chips of everywhere else (`.info-chips` comes with
   the theme); these two rules are what a menu needs on top of them. */
.spaces-menu-item .info-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
	min-inline-size: 0;
}

.spaces-menu-item .info-chip {
	display: flex;
	overflow: hidden;
	border-radius: var(--f-radius, 4px);
	line-height: 1.3;
}

/* A switch: the row is the checkbox, so there is no input to draw and the state
   is `aria-checked`, which is what a screen reader reads out anyway. */
.spaces-menu-item.is-toggle {
	align-items: center;
}

.spaces-menu-paddle {
	inline-size: 2rem;
	block-size: 1rem;
	flex: none;
	position: relative;
	margin-inline-start: auto;
	border-radius: 1rem;
	background: var(--f-color-bg-3, #cacaca);
	transition: background var(--f-transition-short, 0.15s ease);
}

.spaces-menu-paddle::after {
	content: "";
	position: absolute;
	inset-block-start: 0.125rem;
	inset-inline-start: 0.125rem;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border-radius: 50%;
	background: #fff;
	transition: translate var(--f-transition-short, 0.15s ease);
}

.spaces-menu-item[aria-checked="true"] .spaces-menu-paddle {
	background: var(--f-color-success, #3adb76);
}

.spaces-menu-item[aria-checked="true"] .spaces-menu-paddle::after {
	translate: 1rem 0;
}

@media (prefers-reduced-motion: reduce) {
	.spaces-menu-paddle,
	.spaces-menu-paddle::after {
		transition: none;
	}
}

/* A row is an `a` when it leads somewhere and a `button` when it does something,
   and the two have to be indistinguishable. Foundation gives `[type=button]`
   rounded corners, and that selector is exactly as specific as the class above
   and comes later, which turned an entry like the fridge's "take off this card"
   into a pill among plain rows. So the row says it is not a themed button in
   the terms the theme used. */
.spaces-menu-item[type="button"] {
	border-radius: 0;
	appearance: none;
}

/* Lighting up under the pointer is a promise that pressing does something, so
   only the rows that do keep it. */
.spaces-menu-item:focus-visible,
.spaces-menu-item:not(.is-static):hover {
	background-color: var(--f-color-bg-2, #f2f2f2);
	color: var(--f-color-text-0, #222);
}

.spaces-menu-item[aria-disabled="true"] {
	color: var(--f-color-text-2, #666);
	cursor: default;
}

.spaces-menu-item[aria-disabled="true"]:hover {
	background: none;
}

/* The line under a label, and the only thing in a menu that is smaller than a
   row: it is the second half of one rather than a row of its own. */
.spaces-menu-description {
	color: var(--f-color-text-2, #666);
	font-size: 0.8em;
}

.spaces-menu-item.is-danger {
	color: var(--f-color-alert, #cc4b37);
}

.spaces-menu-item.is-danger:hover,
.spaces-menu-item.is-danger:focus-visible {
	background-color: var(--f-color-alert, #cc4b37);
	color: #fff;
}

/* An entry that is off asking somebody, see §5.3 of the concept. */
.spaces-menu-item.is-loading .spaces-menu-label {
	opacity: 0.6;
}

.spaces-menu-item.is-loading::after {
	content: "";
	inline-size: 0.75em;
	block-size: 0.75em;
	flex: none;
	margin-inline-start: auto;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: spaces-menu-spin 0.8s linear infinite;
}

@keyframes spaces-menu-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.spaces-menu-item.is-loading::after {
		animation-duration: 3s;
	}
}

/* Entries have to be big enough to hit with a thumb. */
@media (hover: none) {
	.spaces-menu-item {
		align-items: center;
		min-block-size: 2.75rem;
	}
}