/* Patterns - section - DropdownServerSideItem */
////
/// @group Patterns-DropdownServerSideItem
/// Patterns - section - DropdownServerSideItem

///
.osui-dropdown-serverside-item {
	align-items: center;
	background-color: transparent;
	color: var(--color-neutral-9);
	cursor: pointer;
	display: flex;
	flex: 1;
	min-height: 40px;
	overflow: hidden;
	padding: var(--space-s) var(--space-base);
	position: relative;
	transition: background 250ms ease;
	width: 100%;
	z-index: var(--layer-global-screen);

	&:hover,
	&--is-selected {
		background-color: var(--color-neutral-2);
		z-index: var(--layer-local-tier-1);

		// Service Studio Preview
		& {
			-servicestudio-background-color: var(--color-neutral-0);
		}
	}

	&__content {
		align-items: center;
		display: flex;
		flex: 1;
		height: inherit;
		overflow: hidden;
		pointer-events: none;

		& > *:first-child {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}
	}
}

// Accessibility -----------------------------------------------------------------
///
.has-accessible-features {
	.osui-dropdown-serverside-item {
		&:hover {
			background-color: var(--color-neutral-4);
		}

		&:focus {
			box-shadow: inset 0 0 0 3px var(--color-focus-outer);
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.osui-dropdown-serverside-item {
		&:hover,
		&:focus {
			outline: none;

			&:before {
				@include a11y-high-contrast-outline(true);
				bottom: 0;
				content: '';
				display: block;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.tablet,
.phone {
	.osui-dropdown-serverside-item {
		height: 48px;
	}
}