@use "sass:map";
@import "./../../mixins/scss/mixins";

$sizes: (
	"stretch": (
		"width": calc(100vw - 32px),
		"height": calc(100vh - 32px)
	),
	"large": (
		"width": 864px,
		"height": 600px
	),
	"medium": (
		"width": 432px,
		"height": 600px
	),
	"small": (
		"width": 320px,
		"height": 432px
	)
);

$states: (
	"transparent": (
		"background": transparent
	),
	"subtle": (
		"background": var(--color-surface-subtle)
	),
	"default": (
		"background": var(--color-surface-tertiary)
	),
	"secondary": (
		"background": var(--color-surface-secondary)
	),
	"success": (
		"background": var(--color-success-surface)
	),
	"primary": (
		"background": var(--color-primary-surface)
	),
	"warning": (
		"background": var(--color-warning-surface)
	),
	"danger": (
		"background": var(--color-danger-surface)
	)
);

f-popover {
	@include base();
	position: fixed;

	display: flex;
	flex: 0 0 auto;
	background-color: var(--color-surface-tertiary);
	border-radius: 4px;
	overflow: auto;
	z-index: 202;
	@each $state, $value in $states {
		&[state^="#{$state}"] {
			// include mixin for inheritance rules
			@include inheirt-parent($state);

			background-color: map.get($value, "background");
		}
	}
	&[shadow]:not([overlay]) {
		box-shadow: var(--flow-box-shadow);
	}
	&.tooltip {
		background-color: #000;
		z-index: 1000;
	}
	&.f-popover-custom-size {
		--custom-width: none;
		--custom-height: none;
		width: var(--custom-width) !important;
		height: var(--custom-height) !important;
	}

	&[open] {
		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				width: map.get($value, "width");
				max-height: map.get($value, "height");
			}
		}
		&[size="hug-content"] {
			width: fit-content;
			height: fit-content;
			max-width: 100vw;
			max-height: 100vh;
		}
		&.tooltip {
			width: fit-content;
		}
		&.f-emoji-picker-popover {
			width: fit-content;
		}
	}
	flex-direction: column;
	> f-div[height="fill-container"] {
		flex: 1 0 auto;
		max-height: 100%;
	}

	> * {
		z-index: 2;
	}
}

.f-overlay {
	background-color: #000;
	opacity: 0.5;
	position: fixed;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	z-index: 200;
	&[data-transparent="true"] {
		background-color: transparent;
	}
}