/* The view area: a tree of rows and columns, drawn from platform/Workspace/PaneTree.
   Every branch is a flex line and every pane a flex child whose grow factor is its
   share, so one number per pane is the whole geometry. */
.mf-panes {
	display: flex;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.mf-pane-branch {
	display: flex;
	flex-direction: column;
	flex-basis: 0;
	min-width: 0;
	min-height: 0;

	&[data-mf-direction="row"] {
		flex-direction: row;
	}
}

.mf-pane {
	position: relative;
	flex-basis: 0;
	min-width: 0;
	min-height: 0;
}

/* The line between two panes, and the only place the arrangement is dragged. The line
   stays a hairline; the grip around it is what the pointer has to find. */
.mf-pane-divider {
	--mf-pane-grip: 5px;

	position: relative;
	flex: 0 0 var(--mf-pane-grip);
	cursor: col-resize;

	&::before {
		content: "";
		position: absolute;
		inset: 0 calc((var(--mf-pane-grip) - var(--mf-border-width)) / 2);
		background: var(--mf-color-border);
		transition: background var(--mf-transition-fast);
	}

	&:hover::before {
		background: var(--mf-color-accent);
	}

	[data-mf-direction="column"] > & {
		cursor: row-resize;

		&::before {
			inset: calc((var(--mf-pane-grip) - var(--mf-border-width)) / 2) 0;
		}
	}
}

/* Shown only while the pane holds nothing. */
.mf-pane-empty {
	display: none;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--mf-color-text-muted);

	[data-mf-empty] > & {
		display: flex;
	}
}

.mf-pane-close {
	padding: var(--mf-space-1) var(--mf-space-2);
	background: none;
	border: var(--mf-border);
	color: inherit;
	font: inherit;
	font-size: var(--mf-font-size-small);
	cursor: pointer;

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