@import "../style/base.css";

@layer components {
	.wrap {
		position: relative;

		/* Children */
		&& > * {
			margin: 0;
		}
	}

	.panel {
		/* Box */
		display: flow-root; /* Clearfix equivalent */
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + var(--popover-offset-y, var(--space-xsmall)));
		z-index: 1000;
		max-height: var(--popover-max-height, 30vh);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: var(--popover-radius, var(--radius-xsmall));
		border: var(--popover-border, var(--stroke-normal)) solid var(--popover-color-border, var(--color-vivid));
		padding: var(--popover-padding, var(--space-small));

		/* Style */
		background: var(--popover-color-bg, var(--color-white));
		box-shadow: var(--popover-shadow, var(--shadow-small));
	}
}