/* The window's outline and the grab zones cut into it. Every measurement here is
   written onto the frame by `platform/Overlay/Frame/Outline`, off the same constants the
   path is built from — so a zone can never sit where the shape has no notch. */

:root {
	/* Stroke opacity of an unfocused window's border. */
	--mf-overlay-border-idle: 0.35;
}

.mf-overlay-outline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;

	path {
		fill: var(--mf-color-surface);
		stroke: var(--mf-color-accent);
		stroke-width: 1;
		stroke-linejoin: miter;
		shape-rendering: geometricPrecision;
	}

	/* The maximized window's title bar rule: the border carried across the frame. */
	.mf-overlay-rule {
		fill: none;
	}
}

/* Focus is the border's brightness: a ring would square off every cut corner. */
.mf-overlay-frame:not([data-mf-active]) .mf-overlay-outline path {
	stroke-opacity: var(--mf-overlay-border-idle);
}

/* Which window was asked for, from `platform/ping`: the outline itself, since any
   rectangle would square off the cut corners. Same tint and duration as the region ping
   (workspace.css) — PING_MS is what takes the mark away again. */
.mf-overlay-frame[data-mf-ping] .mf-overlay-outline > path:not(.mf-overlay-rule) {
	animation: mf-overlay-ping 480ms ease-out forwards;
}

@keyframes mf-overlay-ping {
	0%,
	40% {
		fill: color-mix(in srgb, var(--mf-color-accent) 18%, var(--mf-color-surface));
		stroke-width: 2.5;
		stroke-opacity: 1;
	}

	100% {
		fill: var(--mf-color-surface);
		stroke-width: 1;
	}
}

/* The ring starts below the rail: the top edge belongs to the tabs. */
.mf-overlay-handles {
	position: absolute;
	inset: var(--mf-overlay-rail) 0 0 0;
	pointer-events: none;
}

/* A band along the whole edge, so an edge with no notch left can still be pulled
   back in. Only the indent-sized piece lights up — the native cursor is hidden,
   so the zone has to show itself, and one hairline out past the border so it reads
   as a thing on the frame rather than part of it. */
.mf-overlay-handle {
	position: absolute;
	pointer-events: auto;

	&::before {
		content: "";
		position: absolute;
		background: var(--mf-color-accent);
		opacity: 0;
		transition: opacity var(--mf-transition-fast);
	}

	&:hover::before {
		opacity: 1;
	}

	/* Nowhere to grow, nothing left to shrink: the edge is not a handle at all. */
	&[data-mf-locked] {
		display: none;
	}

	&[data-mf-resize="e"],
	&[data-mf-resize="w"] {
		top: 0;
		bottom: 0;
		width: var(--mf-overlay-grip);
		cursor: ew-resize;

		&::before {
			top: 50%;
			width: calc(var(--mf-overlay-depth));
			height: calc(var(--mf-overlay-notch) + 2 * var(--mf-overlay-depth));
			transform: translateY(-50%);
		}
	}

	&[data-mf-resize="e"] {
		right: 0;

		&::before {
			clip-path: polygon(
				100% 0,
				0 var(--mf-overlay-depth),
				0 calc(100% - var(--mf-overlay-depth)),
				100% 100%
			);
		}
	}

	&[data-mf-resize="w"] {
		left: 0;

		&::before {
			clip-path: polygon(
				0 0,
				100% var(--mf-overlay-depth),
				100% calc(100% - var(--mf-overlay-depth)),
				0 100%
			);
		}
	}

	&[data-mf-resize="s"] {
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--mf-overlay-grip);
		cursor: ns-resize;

		&::before {
			left: 50%;
			height: calc(var(--mf-overlay-depth));
			width: calc(var(--mf-overlay-notch) + 2 * var(--mf-overlay-depth));
			transform: translateX(-50%);
			clip-path: polygon(
				0 100%,
				var(--mf-overlay-depth) 0,
				calc(100% - var(--mf-overlay-depth)) 0,
				100% 100%
			);
		}
	}

	/* The chamfer, which is the corner's own indent: it lights up as one piece. */

	&[data-mf-resize="se"],
	&[data-mf-resize="sw"] {
		bottom: 0;
		width: var(--mf-overlay-corner);
		height: var(--mf-overlay-corner);

		&::before {
			width: 100%;
			height: 100%;
		}
	}

	&[data-mf-resize="se"] {
		right: 0;
		cursor: nwse-resize;

		&::before {
			clip-path: polygon(100% 0, 100% 100%, 0 100%);
		}
	}

	&[data-mf-resize="sw"] {
		left: 0;
		cursor: nesw-resize;

		&::before {
			clip-path: polygon(0 0, 100% 100%, 0 100%);
		}
	}
}

.mf-overlay-frame[data-mf-maximized] {
	.mf-overlay-handle {
		display: none;
	}
}