/**
* 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
**/
@import "carbon-components/scss/globals/scss/typography";
@import "../lib/@ba/ba-ui-carbon-toolkit/essentials/colors/colors";
@import "../lib/@ba/ba-ui-carbon-toolkit/essentials/spacing/spacing";
.betaPopover {
	display: inline-block;
	@include theming(background-color, ui-01);
	@include theming(color, text-01);
	border-radius: 0;
	border: 1px solid;
	@include theming(border-color, ui-03);
	padding: 10px;
	max-width: 100%;
	z-index: 2060;
	.betaLink {
		@include theming(color, link-01);
		text-decoration: underline;
		cursor: pointer;
		padding: 0;
		display: inline;
	}
}

.actionToolbarPopover.text {
	margin-left: 0px;
	&[dir="rtl"] {
		margin-left: auto;
		margin-right: 0px;
	}
}

.actionToolbarPopover {
	display: inline-block;
	@include theming(background-color, ui-01);
	border-radius: 0;
	border: 1px solid;
	@include theming(border-color, ui-03);
	padding: 0;
	max-width: 100%;
	z-index: $popoverZIndex;
	.toolbar {
		padding: 0;
		.is-vertical {
			.ba-common-toolbar__item  {
				width: 179px;
				button {
					min-height: $space-l;
					max-width: 100%;
				}
			}
		}
	}
	.toolbar.odtWidget {
		z-index: 1;
	}
	.separator {
		margin: 0 5px;
		border-top: 1px solid;
		@include theming(border-top-color, ui-03);
	}
	.labels {
		.labelsTitle {
			padding-bottom: 3px;
			margin: 5px 0;

			&.borderBottom {
				border-bottom: 1px solid;
				@include theming(border-top-color, ui-03);
			}
		}
		@include theming(color, text-02);
		padding: 5px 10px;
		font-size: $body-size-s;
		min-width:250px;
		white-space: pre-line;
		.labelEntry {
			display: flex;
			margin-top: 5px;

			&.borderBottom {
				border-bottom: 1px solid;
				@include theming(border-bottom-color, ui-03);
				padding-bottom: 5px;
			}

			* {
				flex-grow: 1;
			}
			.labelName {
				font-weight: $fw-regular;
				font-style: normal;
				padding-right:10px;
			}
			.labelValue {
				font-weight: $fw-medium;
				font-style: normal;
				text-align: right;
				&[dir="rtl"] {
					text-align: left;
				}
			}
		}
	}

	.toolbarPopoverContent,
	.toolbarTextPopoverContent {
		.toolbar {
			.toolbarItem {
				@include theming(color, text-02);
			}
		}
		.selection-list {
			max-width: 100%;
			min-width: 179px;
		}
		.nextViewComponent {
			padding-left: $space-s;
			padding-top: $space-s;
			padding-right: $space-s;
			.targetCaptionAndClose {
				max-width: 100%;
				line-height: 16px;
				padding-bottom: 4px;

				.aTargetCaption {
					@include carbon--type-style('label-01');
					@include theming(color, text-02);
				}
			}
			.aActionName {
				line-height: 26px;
				@include carbon--type-style('productive-heading-03');
				@include theming(color, text-01);
			}
			.actionNameAndClose {
				line-height: 26px;
				max-width: 100%;

				.aActionName {
					@include carbon--type-style('productive-heading-03');
					@include theming(color, text-01);
				}
			}
		}
	}
	.toolbarBoxShadow {
		box-shadow: 0 2px 6px 0 $gray2;
	}
}

.actionToolbarPopover.vertical.popover {
	margin: 25px 0 0 0;
	.toolbar, .reactToolbar .ba-common-toolbar {
		flex-direction: column;
	}
}

.actionToolbarPopover.horizontal.popover {
	margin: -10px 0 0 35px;
	&[dir="rtl"] {
		margin: -10px 35px 0 0px;
	}
}

.actionToolbarPopover.popover {
	min-width: 0;
}

.actionToolbarPopover .popover-content {
	padding: 0;
	overflow: visible;
}

.actionToolbarPopover.bottom .arrow {
	@include theming(border-bottom-color, ui-03);
}

.actionToolbarPopover.top .arrow {
	@include theming(border-top-color, ui-03);
	margin-top: auto;
}

.actionToolbarPopover.left .arrow {
	@include theming(border-left-color, ui-03);
}

.actionToolbarPopover.right .arrow {
	@include theming(border-right-color, ui-03);
}

.actionToolbarPopover.bottom .arrow:after {
	@include theming(border-top-color, ui-01);
}

.actionToolbarPopover.top .arrow:after {
	@include theming(border-top-color, ui-01);
}

.actionToolbarPopover.left .arrow:after {
	@include theming(border-left-color, ui-01);
}

.actionToolbarPopover.right .arrow:after {
	@include theming(border-right-color, ui-01);
	left: 11px;
}

.reactToolbar {
	flex-grow: 1;
	.ba-common-toolbar:not(.is-vertical) {
		display: flex;
	}
}

.toolbar {
	display: flex;
	@include theming(background-color, ui-01);
	&.dockedToolbar {
		padding: 0;
		flex-wrap: wrap;
		.toolbarItem, .ba-common-toolbar__item {
			flex-grow: 0;
		}
	}
	.toolbarItem {
		flex: 1;
		margin: 0 0 0 0;
	}
}

.popoverDialogContainer {
	font-weight: $fw-regular;
	font-style: normal;
	@include theming(color, interactive-02);
	min-width: 200px;
}

.list-items {
	height: 40px !important;
}

.flex-list-items{
	width: 100%;
}

.toolbarPopoverContent,
.popoverDialogContainer {
	h1.caption {
		line-height: 48px;
		height: 45px;
		overflow: hidden;
		cursor: default;
		text-align: center;
		margin: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.child:hover {
			@include theming(background-color, hover-ui);
			cursor: pointer;
		}
		.wfg_leftarrow {
			padding: 0 3px;
			margin: 0 -15px;
		}
	}
}

.nextView .viewCaption .wfg_leftarrow {
	float: left;
	&[dir="rtl"] {
		float: right;
	}
}

.popover-content {
	h1.caption {
		font-weight: $fw-regular;
		font-style: normal;
		font-size: $body-size-s;
		@include theming(color, text-02);
		padding: 0 20px;
		outline: 0;
		line-height: 48px;
		height: 45px;
		overflow: hidden;
		cursor: default;
		text-align: center;
		margin: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.child:hover {
			@include theming(background-color, hover-ui);
			cursor: pointer;
		}
		border-bottom: 1px solid;
		@include theming(border-bottom-color, ui-03);
	}
	.content {
		overflow-y: hidden;
		.selectionList {
			@include theming(color, text-02);
		}
		.selection-list {
			max-width: 100%;
			min-width: 179px;
		}
		.selectItems {
			overflow-y: auto;
			overflow-x: hidden;
			text-align: left;
			max-height: 40vmin;
			min-width: 140px;
			&[dir="rtl"] {
				text-align: right;
			}
			.itemLoading,
			.itemNotAvailable,
			.itemRow {
				display: flex;
				flex-direction: row;
				width: 100%;
				cursor: pointer;
				line-height: 44px;
				padding-right: 14px;
				@include theming(color, text-02);
				&[dir="rtl"] {
					padding-right: 0px;
					padding-left: 14px;
				}
				border-bottom: 1px solid;
				@include theming(border-bottom-color, ui-03);
				&:first-child {
					border-top: none;
				}
				&.itemRowContent {
					border-bottom: none;
					padding-left: 14px;
					&[dir="rtl"] {
						padding-left: 0px;
						padding-right: 14px;
					}
				}
				&:hover {
					@include theming(background-color, ui-background);
				}
				.check {
					min-width: 52px;
					@include theming(color, interactive-01);
					// checkmark icon size
					font-size: 18px;
					text-align: center;
				}
				.text {
					text-align: left;
					white-space: nowrap;
					width: 100%;
					&[dir="rtl"] {
						text-align: right;
					}
				}
				.text.bold {
					font-weight: $fw-bold;
				}
				.itemLoading,
				.itemNotAvailable {
					padding: 10px 50px;
					cursor: default;
				}
			}
		}
	}
}

.toolbarPopoverContent .authoringToolbar .content {
	.multipleColumnNav {
		display: inline-flex;
		flex-direction: column;
		flex-wrap: nowrap;
		.itemRow {
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			@include theming(border-bottom-color, ui-03);
			.text {
				line-height: 48px;
				height: 45px;
				width: 157px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				margin: 0;
				order: 1;
				border-bottom-width: 0px;
				cursor: pointer;
			}
			.rightArrow {
				order: 2;
				cursor: pointer;
				.wfg_rightarrow {
					@include theming(color, icon-01);
					float: right;
					-ms-transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
					padding: 15px 8px 0px 8px;
				}
			}
		}
	}
}

.popover-content .staticNextViewCaption {
	text-align: left;
	padding-left: 8px;
	font-size: 14px;
	@include theming(color, text-02);
}

.toolbarPopoverContent .authoringToolbar .content>.filterGroupNav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	min-width: 240px;
	.filterGroupColumn {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: auto;
		margin: 1px;
		order: 1;
		.text {
			line-height: 48px;
			height: 45px;
			overflow: hidden;
			text-align: center;
			margin: auto;
			white-space: nowrap;
			text-overflow: ellipsis;
			border-bottom-width: 0px;
			cursor: pointer;
		}
	}
	.filterGroupColumn:focus {
		@include theming(border-color, focus);
	}
}

.glass .toolbarIcon>button {
	&:disabled {
		cursor: auto;
		opacity: 0.5;
	}
}

.navigationBar {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	@include theming(border-bottom-color, ui-03);
	width: 100%;
	h1.caption {
		line-height: 48px;
		height: 45px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
		cursor: default;
		text-align: center;
		margin: 0;
		text-overflow: ellipsis;
		order: 2;
		border-bottom-width: 0px;
	}
	.leftArrow {
		order: 1;
		.wfg_leftarrow {
			color: $blue50;
			float: left;
			padding: 15px 8px 0px 8px;
			padding-right: 12px !important;
			width: 7px;
			&[dir="rtl"] {
				padding-right: 0px !important;
				padding-left: 12px !important;
			}
		}
	}
	.leftArrow.disabled {
		opacity: 1;
		.wfg_leftarrow {
			@include theming(color, disabled-02);
		}
	}
	.rightArrow {
		order: 3;
		.wfg_rightarrow {
			color: $blue50;
			float: right;
			-ms-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			padding: 15px 8px 0px 8px;
		}
	}
	.rightArrow.disabled {
		opacity: 1;
		.wfg_rightarrow {
			@include theming(color, disabled-02);
		}
	}
}

.toolbarTextPopoverContent {
	.toolbar {
		display: flex;
		flex-direction: column;
		padding: 0px;
		@include theming(background-color, ui-01);
		align-items: flex-start;
		.toolbarItem {
			flex: 1;
			width: 200px;
			height: $space-l;
			text-overflow: ellipsis;
			margin: 0 0 0 0;
			&.textOnly {
				padding-left: 16px !important;
				padding-right: 16px !important;
				font-weight: 400;
			}
			&:hover {
				@include theming(background-color, hover-ui);
				color: initial;
			}
			&:active {
				&[dir="rtl"] {
					border-left: none;
					border-right: 4px solid;
					@include theming(border-right-color, interactive-01);
				}
			}
			&.deleteAction,
			&.deleteFilterAction {
				border-top: 1px solid;
				@include theming(border-top-color, ui-03);
			}
			&.selected {
				@include theming(background-color, ui-01);
				@include theming(background-color, interactive-01);
			}
			&[disabled],
			&[disabled]:hover {
				cursor: auto;
				@include theming(color, disabled-02);
			}
		}

		.dropDownContainer {
			padding: 0;
			border: none;
			cursor: default;
		}
	}
}

html.chrome.ios7 .toolbar .toolbarIcon>button {
	&[class^="wfg_"]:before,
	&[class*=" wfg_"]:before,
	>span[class^="webfont"]:before {
		margin-top: 6px;
	}
	&.iconWithText {
		&[class^="wfg_"]:before,
		&[class*=" wfg_"]:before,
		>span[class^="webfont"]:before {
			margin-top: 0;
		}
	}
}

.actionToolbarPopover .labelsAsActionToolBar{
	padding-bottom: 5px;
}

.actionToolbarPopover .ba-common-link{
	padding: 5px 10px;
	margin: 5px 0;
}

.textToolbarContainer .ba-common-toolbar {
	margin: 0px;

	.ba-common-toolbar__item {
		margin-bottom: 0px;
	}
	.ba-common-button {
		&.is-focus:not(.is-disabled), &:focus:not(.is-disabled) {
			outline: 1px solid;
			@include theming(outline-color, ui-03);
		}
		&.is-variant_frame:not(.is-disabled).is-intent_selection {
			&:focus, &:focus.is-hover, &:focus:hover:not(.is-tap), &:active:not(.is-tap) {
				@include theming(outline-color, ui-03);
			}
		}
	}
}

.textOnlyToolBar, .reactToolbar .ba-common-toolbar.textOnlyToolBar {
	display: inline-block;
	vertical-align: middle;
}


.labels.textOnlyToolBar {
	border-right: 1px solid;
	@include theming(border-right-color, ui-03);
}

.highcontrast .toolbarDockRoot .reactToolbar .ba-common-toolbar__item .ba-common-svgIcon {
	@include theming(fill, icon-03);
}