@use "../mixins" as *;

@keyframes menu-open {
	from {
		transform: translateY(var(--menu-flyout-transition-offset, -50%));
	}
	to {
		transform: none;
	}
}

@keyframes menu-shadow {
	from {
		box-shadow: none;
	}
	to {
		box-shadow: var(--flyout-shadow);
	}
}

.menu-flyout {
	@include typography-body;
	@include flex($direction: column);
	animation: menu-open var(--control-normal-duration) var(--control-fast-out-slow-in-easing),
		menu-shadow var(--control-fast-duration) var(--control-fast-out-slow-in-easing)
			var(--control-normal-duration) forwards;
	min-inline-size: 120px;
	max-inline-size: 100%;
	max-block-size: 100vh;
	margin: 0;
	padding: 0;
	padding-block: 2px;
	box-sizing: border-box;
	color: var(--text-primary);
	border-radius: var(--overlay-corner-radius);
	border: 1px solid var(--surface-stroke-flyout);
	background-color: var(--solid-background-quarternary);
	background-clip: padding-box;
	&-surface-container {
		overflow: hidden;
	}
	&.acrylic {
		background-color: var(--acrylic-fallback-background-base);
		background-image: var(--acrylic-noise-asset-alpha);
		backdrop-filter: var(--acrylic-fallback-filter);
		background-clip: border-box;
	}
}