// ServiceNow Design System

// NOW Dropdown Panel

@import '@servicenow/sass-kit/host';
@import 'theme';
@import '@servicenow/sass-utility/align';
@import '@servicenow/sass-utility/spacing/margin/xxs';

.now-dropdown-panel {
	position: fixed;
	z-index: $now-global-layer--temp;
	overflow: auto;
	visibility: hidden;
	@include now-mx-inherits;

	.now-line-height-crop {
		min-width: 0;
		@include now-mx-line-height-crop;
	}
}

.now-dropdown-panel-list {
	overflow-y: auto;
	height: 100%;
	margin-block-start: 0;
	margin-block-end: 0;
	border-width: $now-dropdown-list--border-width;
	border-style: solid;
	border-color: RGB($now-dropdown-list--border-color);
	padding-inline-start: 0;
	box-shadow: $now-global-drop-shadow--md;
	list-style: none;
	outline: none;
}

.now-dropdown-panel-item {
	display: flex;
	align-items: center;
	height: calc(
		#{now-fn-px2rem(32px)} * #{$now-dropdown-list_item--height-scale}
	);
	padding-inline-start: $now-global-space--sm;
	padding-inline-end: $now-global-space--lg;
	font-style: $now-dropdown-list--font-style;
	font-weight: $now-dropdown-list--font-weight;
	font-size: $now-global-font-size--md;
	line-height: $now-global-line-height;
	font-family: $now-dropdown-list--font-family;
	text-transform: $now-dropdown-list--text-transform;
	color: RGB($now-dropdown-list--color);
	background-color: RGB($now-dropdown-list--background-color);

	&:focus {
		cursor: pointer;
		color: RGB($now-dropdown-list--color--focus);
		background-color: RGB($now-dropdown-list--background-color--focus);
		outline: none;
	}

	&.is-disabled {
		cursor: not-allowed;
		color: RGBA($now-dropdown-list--color--disabled, $now-global-opacity--less);
	}
} // end .now-dropdown-panel-item

.now-dropdown-panel-label {
	display: block;
	@include now-mx-ellipsis;
}

.now-dropdown-panel-checkmark {
	min-width: now-fn-px2rem(16px);
	margin-inline-end: $now-global-space--xxs;
	color: RGB($now-dropdown-list_checkmark--color);

	.is-disabled & {
		color: RGBA($now-dropdown-list_checkmark--color, $now-global-opacity--less);
	}
}

.now-dropdown-panel-header {
	display: flex;
	align-items: center;
	height: calc(
		#{now-fn-px2rem(24px)} * #{$now-dropdown-list_heading--height-scale}
	);
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: $now-global-space--sm;
	padding-inline-end: $now-global-space--sm;
	font-style: $now-dropdown-list_heading--font-style;
	font-weight: $now-dropdown-list_heading--font-weight;
	font-size: $now-global-font-size--sm;
	line-height: $now-global-line-height--sm;
	font-family: $now-dropdown-list_heading--font-family;
	text-transform: $now-dropdown-list_heading--text-transform;
	color: RGB($now-dropdown-list_heading--color);
	background-color: RGB($now-dropdown-list_heading--background-color);

	.now-line-height-crop {
		@include now-mx-line-height-crop($now-global-line-height--sm);
	}
}

.now-dropdown-panel-header-label {
	display: block;
	@include now-mx-ellipsis;
}

.now-dropdown-panel-divider {
	margin-block-start: 0;
	margin-block-end: 0;
	border-block-start-width: $now-dropdown-list_divider--width;
	border-block-start-style: solid;
	border-block-start-color: RGB($now-dropdown-list_divider--color);
	border-block-end: none;
	border-inline-start: none;
	border-inline-end: none;
}