/**
 * 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: 0;
	border-radius: var(--f-radius, 4px);
	background-color: var(--f-color-bg-1, #fff);
	box-shadow: 0 8px 30px rgb(0 0 0 / 25%);
	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;
	/* text-align: start; */
	text-decoration: none;
	cursor: pointer;

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

/* 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). */
.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. */
}

/* 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;
}

.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;
	}
}