/* component popover */

phx-component-popover {
	display: block;
}

.phx-component-popover {
	display: none;
	// width: @COMPONENT_POPOVER_WIDTH;
	// height: @COMPONENT_POPOVER_HEIGHT;
	// min-height: 40pt;
	// min-width: 220pt;
	position: absolute;

	> .container-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}
	/* end container wrapper */
	.container {
		width: 100%;
		height: 100%;
		background: extract(@CLR_1, 9);
		border: @COMPONENT_POPOVER_BORDER;
		position: relative;
		padding-left: 0;
		padding-right: 0;
		box-shadow: @COMPONENT_POPOVER_BOX_SHADOW;
	}

	.container-after,
	.container-before {
		content: '';
		display: block;
		position: absolute;
		left: 100%;
		width: 0;
		height: 0;
		border-style: solid;
	}

	.container-after {
		top: 10pt;
		border-color: transparent transparent transparent extract(@CLR_1, 9);
		border-width: 8pt;
		left: -14pt;
	}

	.container-before {
		top: 9pt;
		border-color: transparent transparent transparent @CLR_BORDER_COLOR;
		border-width: 9pt;
		left: -17pt;
	}

	&.right {
		.container {
			> .wrapper {}
		}

		.container-after,
		.container-before {
			right: 100%;
		}

		.container-after {
			border-color: transparent extract(@CLR_1, 9) transparent transparent;
		}

		.container-before {
			border-color: transparent @CLR_BORDER_COLOR transparent transparent;
		}
	}

	&.left {
		.container {
			> .wrapper {
				.content-wrapper {
					padding-left: @COMPONENT_POPOVER_PADDING_BG;
					padding-right: 0;
				}
			}
		}

		.container-after,
		.container-before {}

		.container-after {
			left: auto;
			right: -14pt;
		}

		.container-before {
			left: auto;
			right: -17pt;
		}

		> .container-wrapper {}
	}

	&.bottom {
		.container {
			> .wrapper {}
		}

		.container-after {
			right: 100%;
			left: 8pt;
			top: -15pt;
			border-color: transparent transparent extract(@CLR_1, 9) transparent;
		}

		.container-before {
			right: 100%;
			left: 7pt;
			top: -18pt;
			border-color: transparent transparent @CLR_BORDER_COLOR transparent;
		}
	}

	&.top {
		.container {
			> .wrapper {}
		}
		// .container-after,
		// .container-before {
		//     // right: 100%;
		//     left: 5pt;
		// 		bottom: -15pt;
		//     // top: @COMPONENT_POPOVER_BELOW_ARROW_TOP;
		// 		top: unset;
		// }
		.container-after {
			left: 8pt;
			bottom: -14pt;
			top: unset;
			border-color: extract(@CLR_1, 9) transparent transparent transparent;
		}

		.container-before {
			left: 7pt;
			bottom: -17pt;
			top: unset;
			border-color: @CLR_BORDER_COLOR transparent transparent transparent;
		}
	}

	&.show {
		display: block;
	}

	button {
		&.fake {
			opacity: 0;
			width: 0;
			height: 0;
		}
	}
}