:host {
	box-shadow: var(--_ui5_popover_box_shadow);
	background-color: var(--_ui5_popover_background);
	max-width: calc(100vw - (100vw - 100%) - 2 * var(--_ui5_popup_viewport_margin));
}

:host([hide-arrow]) {
	box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
}

/* pointing upward arrow */
:host([actual-placement="Bottom"]) .ui5-popover-arrow {
	left: calc(50% - 0.5625rem);
	top: -0.5rem;
	height: 0.5rem;
}

:host([actual-placement="Bottom"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_upward_arrow_margin);
}

/* pointing right arrow */
:host([actual-placement="Left"]) .ui5-popover-arrow {
	top: calc(50% - 0.5625rem);
	right: -0.5625rem;
	width: 0.5625rem;
}

:host([actual-placement="Left"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_right_arrow_margin);
}

/* pointing downward arrow */
:host([actual-placement="Top"]) .ui5-popover-arrow {
	left: calc(50% - 0.5625rem);
	height: 0.5625rem;
	top: 100%;
}

:host([actual-placement="Top"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_downward_arrow_margin);
}

/* pointing left arrow */
:host(:not([actual-placement])) .ui5-popover-arrow,
:host([actual-placement="Right"]) .ui5-popover-arrow {
	left: -0.5625rem;
	top: calc(50% - 0.5625rem);
	width: 0.5625rem;
	height: 1rem;
}

:host(:not([actual-placement])) .ui5-popover-arrow:after,
:host([actual-placement="Right"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_left_arrow_margin);
}

:host([hide-arrow]) .ui5-popover-arrow {
	display: none;
}

.ui5-popover-root {
	min-width: 6.25rem;
}

.ui5-popover-arrow {
	pointer-events: none;
	display: block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	overflow: hidden;
}

.ui5-popover-arrow:after {
	content: "";
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	background-color: var(--_ui5_popover_background);
	box-shadow: var(--_ui5_popover_box_shadow);
	transform: rotate(-45deg);
}

:host([modal])::backdrop {
	background-color: var(--_ui5_popup_block_layer_background);
	opacity: var(--_ui5_popup_block_layer_opacity);
}

:host([modal]) .ui5-block-layer {
	display: block;
}

/* resize handle */

.ui5-popover-resize-handle {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	z-index: 1;
}

.ui5-popover-resize-handle [ui5-icon] {
	position: absolute;
	width: 1rem;
	height: 1rem;
	cursor: inherit;
	color: var(--sapButton_Lite_TextColor);
	--rotAngle: 0;
	--scaleX: 1;
	transform: rotate(var(--rotAngle)) scaleX(var(--scaleX));
}

.ui5-popover-rtl .ui5-popover-resize-handle [ui5-icon] {
	--scaleX: -1;
}

.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle {
	top: -0.5rem;
	right: -0.5rem;
	cursor: ne-resize;
}

.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle [ui5-icon] {
	bottom: 0;
	left: 0;
	--rotAngle: 270deg;
}

.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle {
	top: -0.5rem;
	left: -0.5rem;
	cursor: nw-resize;
}

.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle [ui5-icon] {
	bottom: 0;
	right: 0;
	--rotAngle: 180deg;
}

.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle {
	bottom: -0.5rem;
	left: -0.5rem;
	cursor: ne-resize;
}

.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle [ui5-icon] {
	top: 0;
	right: 0;
	--rotAngle: 90deg;
}

.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle {
	bottom: -0.5rem;
	right: -0.5rem;
	cursor: nw-resize;
}

.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle [ui5-icon] {
	top: 0;
	left: 0;
}

.ui5-popover-resizing,
.ui5-popover-resizing * {
	user-select: none !important;
}