/**
* IBM Confidential
* OCO Source Materials
* IBM Business Platform: Dashboard
* (C) Copyright IBM Corp. 2018, 2020
* 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
**/

.popoverTBDialogContainer {
	font-weight: $fw-regular;
	font-style: normal;
	@include theming(color, interactive-02);
	@include theming(background-color, ui-background);
	.content {
		width: 100%;
		@include theming(background-color, ui-01);
		height: 100%;
	}
	.selectWrapper {
		position: relative;
		margin: 0 10px;
		height: 42px;
		overflow: hidden;
		vertical-align: middle;
		.carrotDown {
			position: absolute;
			top: 0;
			padding-top: 10px;
			right: 10px;
			pointer-events: none;
			@include theming(color, interactive-01);
			&[dir="rtl"] {
				right: auto;
				left: 10px;
			}
		}
		select {
			width: 100%;
			outline-width: initial;
			background: transparent;
			font-weight: $fw-regular;
			padding: 10px;
			border: 0;
			border-radius: 0;
			@include theming(color, interactive-01);
			-webkit-appearance: none;
			-moz-appearance: none;
			&::-ms-expand {
				display: none; //Select removing native dropdown arrow on IE 10+
			}
		}
	}
}

html.chrome .popoverDialogContainer .selectWrapper .carrotDown {
	padding-top: 12px;
}

.topbottomDialog {
	overflow: hidden;
	height: auto !important;
	.content {
		border-top: 1px solid;
		@include theming(border-top-color, ui-03);
		height: auto;
		.selectionRow {
			display: flex;
			flex-direction: row;
			margin-top: 10px;
			text-align: left;
			&[dir="rtl"] {
				text-align: right;
			}
			&:last-child {
				margin-bottom: 10px;
			}
			.selectionlabel {
				flex: 1 30%;
				margin: 0 16px 0 0;
				height: 40px;
				padding: 10px 0 0 10px;
				&[dir="rtl"] {
					padding: 10px 10px 0 0px;
				}
				.selectionlabelDesc {
					font-size: $caption-size;
					@include theming(color, text-02);
				}
			}
			input[name="topbottomValue"] {
				margin-right: 10px;
				text-align: center;
				width: 4em;
				&[dir="rtl"] {
					margin-right: 0px;
					margin-left: 10px;
				}
			}
			.topbottomRank {
				flex: 1;
			}
			.selectWrapper {
				flex: auto;
				margin: 0 10px 0 0;
				min-width: 60%;
				&[dir="rtl"] {
					margin: 0 0px 0 10px;
				}
			}
			.rankcheckboxlabel {
				flex: 1 80%;
				margin: 0 5px 0 0;
				height: 42px;
				padding: 10px 0 0 10px;
				&[dir="rtl"] {
					margin: 0 0px 0 5px;
					padding: 10px 10px 0 0px;
				}
			}
			.inputHolder {
				@include theming(background-color, ui-background);
				display: flex;
				align-items: center;
				>input[type='text'] {
					flex: auto;
					height: 100%;
					margin-right: 8px;
					border: none;
					background: none;
					font-weight: $fw-regular;
					@include theming(color, text-02);
					-webkit-appearance: none;
					-moz-appearance: none;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					&[dir="rtl"] {
						margin-right: 0px;
						margin-left: 8px;
					}
					&:focus {
						outline: none;
					} // not display the clear button of a text input control on IE 10+
					&::-ms-clear {
						display: none;
					}
					&::placeholder { // set explicitly for IE
						font-weight: $fw-light;
					}
				}
				>svg {
					flex: none;
					height: 16px;
					width: 16px;
					cursor: default;
					@include theming(fill, icon-01);
					margin: 0px 8px;
				}
			}
		}
		.selectionRadio {
			display: flex;
			flex-direction: column;
			padding: 0 10px;
			input {
				margin: 10px 10px 10px 0;
				&[dir="rtl"] {
					margin: 10px 0px 10px 10px;
				}
			}
		}
		.selectionRow.searchByColumn .selectionlabel {
			align-self: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex: 0 1 auto;
			height: auto;
			padding: 0 0 0 10px;
			&[dir="rtl"] {
				padding: 0 10px 0 0px;
			}
		}
		.selectionRow.buttonRow {
			justify-content: flex-end;
			padding: 0 10px;
		}
	}
}

.ui-autocomplete.ui-menu.ui-front {
	z-index: $popoverZIndex + 1; //need to be higher than the popover z-index
	&.ui-widget.ui-widget-content {
		overflow-y: auto;
		max-height: 200px;
		font-family: $font-family;
	}
}

.autoCompleteInput.ui-state-active a, .autoCompleteInput.ui-state-active a:link, .autoCompleteInput.ui-state-active a:visited {
	@include theming(color, ui-01);
}