/**
* IBM Confidential
* OCO Source Materials
* IBM Business Platform: Dashboard
* (C) Copyright IBM Corp. 2018, 2022
* The source code for this program is not published or otherwise divested of its trade secrets,
* irrespective of what has been deposited with the U.S. Copyright Office
**/

// Used to calculate the position of the widget flyout. Disable pointer event so it does not interfere with anything.
@import "../lib/@ba/ba-ui-carbon-toolkit/essentials/_essentials.scss";
@import "carbon-components/scss/globals/scss/typography";

.widgetContextNode {
	pointer-events: none;
}

.page,
.page *,
.widget,
.widget * {
	box-sizing: content-box;
}

.widget:not(.shapeWidget):not(.page) .staticContent {
	border: 1px solid transparent;
}

.page,
.widget,
.pagegroup {
	position: relative;
}

.searchInput {
	&.hasContent {
		.closeIcon {
			display: inline-block;
		}
	}
	& input {
		padding: 0 0 0 30px;
		left: -25px;
		position: relative;
		[dir="rtl"] & {
			padding: 0 30px 0 0px;
			left: auto;
			right: -25px;
		}
		&::-ms-clear {
			display: none;
		}
	}
	.searchIcon {
		@include theming(color, icon-01);
		position: relative;
		left: 1px;
		top: 2px;
		font-size: $body-size;
		display: inline-block;
		z-index: 100;
		flex: none;
		&[dir="rtl"] {
			left: auto;
			right: 1px;
		}
	}
	.closeIcon {
		@include theming(color, icon-01);
		position: relative;
		right: 50px;
		top: 2px;
		font-size: $body-size;
		cursor: pointer;
		display: none;
		width: 16px;
		&[dir="rtl"] {
			right: auto;
			left: 50px;
		}
	}
}

.quickAddPopover {
	@include theming(color, ui-05);
	font-size: $body-size-s;
	text-align: center;
	@include user-select(none);
	z-index: 2000;
}

.errorContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	@include theming(background-color, ui-02);
	@include theming(color, text-01);
	@include carbon--type-style('body-short-01');
	&[dir="rtl"] {
		left: auto;
		right: 0;
	}
	.dashboardMessageContainer {
		display: flex;
		margin: 10px;
		white-space: normal;
		user-select: text;
		.errorIcon {
			width: 24px;
			flex: none;
			position: relative;
			svg {
				height: 16px;
				width: 16px;
				fill: $red60;
			}
		}
	}
}

.avatarContainer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow:hidden;
}