@layer external, theme, normalize, base, native_popovers, common_components, components, utilities, top_layer;
@layer common_components {
	.MyModalBackdrop {
		position: fixed;
		inset: 0;

		background: black;

		filter: opacity(0.8);
		backdrop-filter: blur(2px);
	}

	.MyModalPopover {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 90vw;
		max-width: 600px;
		max-height: 85vh;

		/* A column, so the content area shrinks to fit the header and footer. A fixed guess for their
		   height is too small for a header with a subtitle, and the popover then clips the footer. */
		display: flex;
		flex-direction: column;

		border-radius: 12px;
		border: 1px solid var(--color-base-1-05);

		background: linear-gradient(var(--color-base-1-03), var(--color-base-1-02));
		color: var(--color-fg-11);

		box-shadow:
			inset 0 1px 2px oklch(1 0 0 / 0.2),
			0 4px 6px oklch(0 0 0 / 0.3),
			0 8px 10px oklch(0 0 0 / 0.18);

		outline: none;

		contain: content;
	}

	.MyModalHeader {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		gap: 4px;

		padding: 16px 48px 16px 20px;

		border-bottom: 1px solid var(--color-base-1-08);

		min-height: 70px;
		flex: none;
	}

	.MyModalScrollableArea {
		max-height: calc(85vh - 140px);
		min-height: 0;
		overflow-y: auto;
		padding: 20px;
	}

	.MyModalFooter {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;

		padding: 16px 20px;

		border-top: 1px solid var(--color-base-1-08);

		min-height: 70px;
		flex: none;
	}

	.MyModalHeading {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-fg-11);
	}

	.MyModalDescription {
		margin: 0;
		color: var(--color-fg-08);
	}

	.MyModalCloseTrigger {
		position: absolute;
		top: 0px;
		right: 0px;

		margin: 16px 16px 16px 0;
	}
}
@layer common_components {
	.MyIconButton.MyButton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px;

		width: 36px;
	}

	.MyIconButtonIcon {
		width: 16px;
		height: 16px;
	}
}