%popover-panel {
	@layer components {
		display: flex;
		flex-direction: column;
		max-block-size: calc(100vh + 48px);
		position: relative;
	}

	@layer mods {
		&.is-above {
			transform-origin: bottom center;
		}

		&.is-below {
			transform-origin: top center;
		}

		&.is-before {
			transform-origin: center right;

			&.is-above {
				transform-origin: bottom right;
			}

			&.is-below {
				transform-origin: top right;
			}
		}

		&.is-after {
			transform-origin: center left;

			&.is-above {
				transform-origin: bottom left;
			}

			&.is-below {
				transform-origin: top left;
			}
		}
	}
}

%popover-content {
	@layer components {
		background-color: var(--pr-t-elevation-surface-raised);
		box-shadow: var(--pr-t-elevation-shadow-overlay);
		border-radius: var(--pr-t-border-radius-structure);
	}

	@layer mods {
		&:focus-within {
			outline: none;
		}
	}
}

.lu-popover-panel {
	@extend %popover-panel;
}

.lu-popover-content {
	@extend %popover-content;

	@layer components {
		padding-block: var(--pr-t-spacings-100);
		padding-inline: var(--pr-t-spacings-150);
	}
}