/* The handles are placed against the region, not against what it holds; the region is
   already a containing block, in `platform/workspace.css`. */
.mf-region-view {
	.mf-region-handles {
		position: absolute;
		top: 0;
		right: 0;
		/* Mounted surfaces come later in the DOM and would paint over them. */
		z-index: var(--mf-z-raised);

		display: none;

		/* Its own two dimensions, so no `> *` rule of a host can stretch the strip
		   across the surface it is pinned over. */
		width: max-content;
		height: max-content;

		opacity: 0;
		transition: opacity var(--mf-transition-fast);

		/* The strip is a place, not a target: only the buttons in it are ever
		   pressed, so the gaps around them stay the surface's. */
		pointer-events: none;
	}

	.mf-region-action {
		width: 1.5rem;
		height: 1.5rem;
		color: var(--mf-color-text-muted);
		line-height: 1;

		/* Unlit, a handle is not there: an invisible control that still swallows a
		   press is a control covering whatever it happens to sit over. */
		pointer-events: none;

		/* Glyphs live here, so a surface carries a name and a label only. */
		&[data-mf-action="float"]::before {
			content: "\2197";
		}

		&[data-mf-action="pin"]::before {
			content: "\25CC";
		}

		&[data-mf-action="pin"][data-mf-pinned] {
			color: var(--mf-color-accent);

			&::before {
				content: "\25C9";
			}
		}

		&:hover,
		&:focus-visible {
			color: var(--mf-color-accent);
		}
	}

	/* An empty region has nothing to pull out, and says so itself. */
	&:not([data-mf-empty]) .mf-region-handles {
		display: flex;
	}

	/* Lit is the same statement as reachable, so the two never disagree. */
	&:hover .mf-region-handles,
	&:has(.mf-region-action:focus-visible) .mf-region-handles {
		opacity: 1;

		> .mf-region-action {
			pointer-events: auto;
		}
	}
}

.mf-action[data-mf-action="dock"]::before {
	content: "\2199";
}