@use '../variables' as *;

.#{$prefix}popover {
	min-width: 240px;
	position: absolute;
	border-radius: 6px;
	box-shadow:
		rgba(0, 0, 59, 0.05) 0px 0px 0px 1px,
		rgba(1, 1, 46, 0.133) 0px 12px 60px 0px,
		rgba(0, 0, 0, 0.133) 0px 12px 32px -16px;
	background-color: #fff;
	overflow: hidden;
	z-index: 1060;
	display: flex;
	flex-direction: column;

	&__overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		border-radius: inherit;
		background-color: #fff;
		opacity: 1;
		z-index: 0;
	}

	&-enter {
		opacity: 0;
		transform: scale(0.9);
	}

	&-enter-active {
		opacity: 1;
		transform: scale(1);
		transition:
			opacity 100ms,
			transform 200ms;
	}

	&-exit {
		opacity: 1;
		transform: scale(1);
	}

	&-exit-active {
		opacity: 0;
		transform: scale(0.9);
		transition:
			opacity 150ms,
			transform 150ms;
	}
}