// 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';
@import '@servicenow/sass-utility/spacing/margin/sm';
@import '@servicenow/sass-utility/spacing/padding/sm';

:host {
	display: block;
}

.now-dropdown-list {
	display: flex;
	flex-direction: column;
	height: inherit;
	max-height: inherit;
	font-family: $now-dropdown-list--font-family;
	color: RGB($now-dropdown-list--color);
	background-color: RGB($now-dropdown-list--background-color);
	outline: none;
	@include now-mx-inherits;

	.now-line-height-crop {
		@include now-mx-line-height-crop;
	}
}

.now-dropdown-list-item-container {
	overflow: auto;
	outline: none;
}

.now-dropdown-list-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;
	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);

	&.is-focused,
	&:hover {
		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);
	}

	.has-highlight {
		font-weight: 600;
		color: RGB($now-dropdown-list--color--highlighted);
		background-color: RGB($now-dropdown-list--background-color--highlighted);
	}

	&.is-multi-line {
		height: calc(
			#{now-fn-px2rem(40px)} * #{$now-dropdown-list_item--height-scale}
		);
	}
}

.now-dropdown-list-checkmark {
	flex-shrink: 0;
	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-list-labels {
	min-width: 0;
}

.now-dropdown-list-sublabel {
	margin-top: $now-global-space--xxs;
	font-style: $now-dropdown-list_sublabel--font-style;
	font-weight: $now-dropdown-list_sublabel--font-weight;
	font-size: $now-global-font-size--sm;
	line-height: $now-global-line-height--sm;
	font-family: $now-dropdown-list_sublabel--font-family;
	text-transform: $now-dropdown-list_sublabel--text-transform;
	color: RGB($now-dropdown-list_sublabel--color);

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

	.is-disabled & {
		color: $now-global-text--disabled;
	}
}

.now-dropdown-list-header {
	display: flex;
	align-items: center;
	height: calc(
		#{now-fn-px2rem(24px)} * #{$now-dropdown-list_heading--height-scale}
	);
	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;
	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);
	}
}

.is-disabled .now-dropdown-list-identifier {
	opacity: $now-global-opacity--less;
}

.now-dropdown-list-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;
}

.will-truncate {
	display: block;
	@include now-mx-ellipsis;
}

.now-dropdown-list-search {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: calc(
		#{now-fn-px2rem(32px)} * #{$now-dropdown-list_item--height-scale}
	);
	border-block-end-width: $now-dropdown-list_search--border-width;
	border-block-end-style: solid;
	border-block-end-color: RGB($now-dropdown-list_search--border-color);
	background-color: RGB($now-dropdown-list_search--background-color);

	&:hover {
		background: RGB($now-dropdown-list_search--background-color--hover);
	}
}

.now-dropdown-list-search-field {
	flex: 1;
	height: 100%;
	border: none;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: $now-global-space--sm;
	font-style: $now-dropdown-list_search--font-style;
	font-weight: $now-dropdown-list_search--font-weight;
	font-size: $now-global-font-size--sm;
	font-family: $now-dropdown-list_search--font-family;
	text-transform: $now-dropdown-list_search--text-transform;
	background-color: transparent;
	outline: none;

	&::placeholder {
		color: $now-global-text--hint;
	}
}