@import '../zindex';

.RESHover,
.RESHover.RESDialogSmall {
	position: absolute;
	z-index: $zindex-res-hover;
}

.RESHoverInfoCard {
	&::before {
		content: '';
		position: absolute;
		top: 10px;
		left: -26px;
		border-style: solid;
		border-width: 10px 29px 10px 0;
		border-color: transparent #c7c7c7;
		display: block;
		width: 0;
		z-index: 1;
	}

	&::after {
		content: '';
		position: absolute;
		top: 10px;
		left: -24px;
		border-style: solid;
		border-width: 10px 29px 10px 0;
		border-color: transparent #f0f3fc;
		display: block;
		width: 0;
		z-index: 1;
	}

	&.right::before {
		content: '';
		position: absolute;
		top: 10px;
		right: -26px;
		left: auto;
		border-style: solid;
		border-width: 10px 0 10px 29px;
		border-color: transparent #c7c7c7;
		display: block;
		width: 0;
		z-index: 1;
	}

	&.right::after {
		content: '';
		position: absolute;
		top: 10px;
		right: -24px;
		left: auto;
		border-style: solid;
		border-width: 10px 0 10px 29px;
		border-color: transparent #f0f3fc;
		display: block;
		width: 0;
		z-index: 1;
	}

	&.below::before,
	&.below::after {
		content: none;
	}
}

.fieldPair {
	&:not([hidden]) {
		display: flex;
		margin-bottom: 12px;
	}

	&-label {
		float: left;
		width: 140px;
	}

	&-text {
		float: left;
		min-width: 240px;

		a {
			display: block;
			max-width: 25em;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}

.RESDropdownList {
	position: absolute;
	list-style-type: none;
	background-color: #5f99cf;
	width: 180px;
	border-radius: 0 0 3px 3px;
	border: 1px solid #369;
	border-bottom: none;
	margin: 0 !important;
	font-size: 10px;

	li {
		position: relative;
		cursor: pointer;
		border-bottom: 1px solid #369;
		line-height: 19px;
		font-weight: bold;
		color: #c9def2;
		padding: 8px 3px 8px 10px;
		box-sizing: content-box;

		> div {
			display: flex;
		}
	}

	.toggleButton {
		margin-left: auto;
		place-content: center center;
		height: 19px;
	}

	a {
		display: block;

		&,
		&:link,
		&:visited {
			color: inherit;
			text-decoration: none;
		}
	}

	li:hover,
	a:hover {
		background-color: #9cc6ec;
		color: #369;
		text-decoration: none;
	}
}

.RESCenteredLoadIndicator {
	display: flex;
	justify-content: center;
}
