@import '@servicenow/sass-kit/host';
@import 'theme';

// ServiceNow Design System

// Now popover panel

:host {
	position: relative;
	display: block;
	width: 0;
	height: 0;
}

.fit-content-area {
	z-index: $now-global-layer--modal;
	visibility: hidden;

	&.has-tail {
		&:after,
		&:before {
			content: ' ';
			position: absolute;
			width: 0;
			height: 0;
			border: solid transparent;
			pointer-events: none;
		}

		&:before {
			border-width: now-fn-px2rem(10px);

			// need a custom shadow to look visually correct
			filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
		}

		&:after {
			border-width: now-fn-px2rem(9px);
		}

		&.-up {
			&:before {
				top: now-fn-px2rem(-9px);
				left: var(--popover-tail, 1px);
				border-top: 0;
				border-bottom-color: RGB($now-popover--border-color);
			}

			&:after {
				top: now-fn-px2rem(-8px);
				left: calc(var(--popover-tail, 0px) + 1px);
				border-top: 0;
				border-bottom-color: RGB($now-popover--background-color);
			}
		}

		&.-down {
			&:before {
				bottom: now-fn-px2rem(-9px);
				left: var(--popover-tail, 1px);
				border-top-color: RGB($now-popover--border-color);
				border-bottom: 0;
			}

			&:after {
				bottom: now-fn-px2rem(-8px);
				left: calc(var(--popover-tail, 0px) + 1px);
				border-top-color: RGB($now-popover--background-color);
				border-bottom: 0;
			}
		}

		&.-right {
			&:before {
				top: var(--popover-tail, 1px);
				right: now-fn-px2rem(-9px);
				border-right: 0;
				border-left-color: RGB($now-popover--border-color);
			}

			&:after {
				top: calc(var(--popover-tail, 0px) + 1px);
				right: now-fn-px2rem(-8px);
				border-right: 0;
				border-left-color: RGB($now-popover--background-color);
			}
		}

		&.-left {
			&:before {
				top: var(--popover-tail, 1px);
				left: now-fn-px2rem(-9px);
				border-right-color: RGB($now-popover--border-color);
				border-left: 0;
			}

			&:after {
				top: calc(var(--popover-tail, 0px) + 1px);
				left: now-fn-px2rem(-8px);
				border-right-color: RGB($now-popover--background-color);
				border-left: 0;
			}
		}
	}
}

.fit-content {
	position: fixed;
	overflow: auto;
	max-width: 100%;
	max-height: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: RGB($now-popover--border-color);
	border-radius: $now-popover--border-radius;
	box-shadow: $now-global-drop-shadow--md;
	background-color: RGB($now-popover--background-color);

	.disable-scroll & {
		overflow: hidden;
	}
}