// ServiceNow Design System

// NOW Dropdown

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

:host {
	display: inline-block;
	vertical-align: middle;
}

.now-dropdown {
	@include now-mx-button;
	width: 100%;
	max-width: inherit;
	margin: 0;
	border-style: solid;
	padding-block-start: 0;
	padding-block-end: 0;
	@include now-mx-focus-ring;

	&.has-label:not(.is-bare) {
		font-family: $now-button--font-family;
		@include now-mx-inherits(
			$font-style: $now-button--font-style,
			$font-weight: $now-button--font-weight,
			$text-transform: $now-button--text-transform,
			$white-space: $now-button--text-wrap
		);
	}

	&.has-label,
	&.has-caret {
		border-top-left-radius: $now-dropdown--border-top-left-radius;
		border-top-right-radius: $now-dropdown--border-top-right-radius;
		border-bottom-right-radius: $now-dropdown--border-bottom-right-radius;
		border-bottom-left-radius: $now-dropdown--border-bottom-left-radius;
	}

	&:not(.has-caret):not(.has-label) {
		border-radius: $now-button--iconic--border-radius;
	}

	// <now-dropdown size="sm|md|lg">

	&.-sm {
		@include now-mx-button-sm;
		padding-inline-start: calc(
			#{$now-global-space--sm} * #{$now-button--width-scale}
		);
		padding-inline-end: calc(
			#{$now-global-space--sm} * #{$now-button--width-scale}
		);

		&.has-caret.has-label:not(.is-bare) {
			padding-inline-end: calc(
				#{$now-global-space--xs} * #{$now-button--width-scale}
			);
		}

		&:not(.has-caret):not(.has-label) {
			@include now-mx-button-iconic-sm;
			padding-inline-start: 0;
			padding-inline-end: 0;
		}

		&.has-caret:not(.has-label) {
			padding-inline-start: calc(
				#{$now-global-space--xs} * #{$now-button--width-scale}
			);
			padding-inline-end: calc(
				#{$now-global-space--xs} * #{$now-button--width-scale}
			);
		}

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

	&.-md {
		@include now-mx-button-md;
		padding-inline-start: calc(
			#{$now-global-space--lg} * #{$now-button--width-scale}
		);
		padding-inline-end: calc(
			#{$now-global-space--lg} * #{$now-button--width-scale}
		);

		&.has-caret.has-label:not(.is-bare) {
			padding-inline-end: calc(
				#{$now-global-space--md} * #{$now-button--width-scale}
			);
		}

		&:not(.has-caret):not(.has-label) {
			@include now-mx-button-iconic-md;
			padding-inline-start: 0;
			padding-inline-end: 0;
		}

		&.has-caret:not(.has-label) {
			padding-inline-start: calc(
				#{$now-global-space--sm} * #{$now-button--width-scale}
			);
			padding-inline-end: calc(
				#{$now-global-space--sm} * #{$now-button--width-scale}
			);
		}

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

	&.-lg {
		@include now-mx-button-lg;
		padding-inline-start: calc(
			#{$now-global-space--xl} * #{$now-button--width-scale}
		);
		padding-inline-end: calc(
			#{$now-global-space--xl} * #{$now-button--width-scale}
		);

		&.has-caret.has-label:not(.is-bare) {
			padding-inline-end: calc(
				#{$now-global-space--lg} * #{$now-button--width-scale}
			);
		}

		&:not(.has-caret):not(.has-label) {
			@include now-mx-button-iconic-lg;
			padding-inline-start: 0;
			padding-inline-end: 0;
		}

		&.has-caret:not(.has-label) {
			padding-inline-start: calc(
				#{$now-global-space--md} * #{$now-button--width-scale}
			);
			padding-inline-end: calc(
				#{$now-global-space--md} * #{$now-button--width-scale}
			);
		}

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

	// <now-dropdown variant="primary|secondary|secondary-selected|tertiary|tertiary-selected">

	&.-primary {
		@include now-mx-button-primary;

		&.is-active {
			border-color: RGB($now-dropdown--primary--border-color--opened);
			color: RGB($now-dropdown--primary--color--opened);
			background-color: RGB($now-dropdown--primary--background-color--opened);

			&:hover {
				border-color: RGB($now-dropdown--primary--border-color--opened_hover);
				color: RGB($now-dropdown--primary--color--opened_hover);
				background-color: RGB(
					$now-dropdown--primary--background-color--opened_hover
				);
			}

			&:active {
				border-color: RGB($now-dropdown--primary--border-color--opened_active);
				color: RGB($now-dropdown--primary--color--opened_active);
				background-color: RGB(
					$now-dropdown--primary--background-color--opened_active
				);
			}
		}
	}

	&.-secondary {
		@include now-mx-button-secondary;

		&.is-active:not(.is-bare) {
			border-color: RGB($now-dropdown--secondary--border-color--opened);
			color: RGB($now-dropdown--secondary--color--opened);
			background-color: RGB($now-dropdown--secondary--background-color--opened);

			&:hover {
				border-color: RGB($now-dropdown--secondary--border-color--opened_hover);
				color: RGB($now-dropdown--secondary--color--opened_hover);
				background-color: RGB(
					$now-dropdown--secondary--background-color--opened_hover
				);
			}

			&:active {
				border-color: RGB(
					$now-dropdown--secondary--border-color--opened_active
				);
				color: RGB($now-dropdown--secondary--color--opened_active);
				background-color: RGB(
					$now-dropdown--secondary--background-color--opened_active
				);
			}
		}

		&.-selected {
			border-color: RGB($now-dropdown--secondary-selected--border-color);
			color: RGB($now-dropdown--secondary-selected--color);
			background-color: RGB(
				$now-dropdown--secondary-selected--background-color
			);

			&:hover {
				border-color: RGB(
					$now-dropdown--secondary-selected--border-color--hover
				);
				color: RGB($now-dropdown--secondary-selected--color--hover);
				background-color: RGB(
					$now-dropdown--secondary-selected--background-color--hover
				);
			}

			&:active,
			&.is-active:not(.is-bare) {
				border-color: RGB(
					$now-dropdown--secondary-selected--border-color--active
				);
				color: RGB($now-dropdown--secondary-selected--color--active);
				background-color: RGB(
					$now-dropdown--secondary-selected--background-color--active
				);
			}
		}
	}

	&.-tertiary {
		@include now-mx-button-tertiary;

		&.is-active:not(.is-bare) {
			border-color: RGB($now-dropdown--tertiary--border-color--opened);
			color: RGB($now-dropdown--tertiary--color--opened);
			background-color: RGB($now-dropdown--tertiary--background-color--opened);

			&:hover {
				border-color: RGB($now-dropdown--tertiary--border-color--opened_hover);
				color: RGB($now-dropdown--tertiary--color--opened_hover);
				background-color: RGB(
					$now-dropdown--tertiary--background-color--opened_hover
				);
			}

			&:active {
				border-color: RGB($now-dropdown--tertiary--border-color--opened_active);
				color: RGB($now-dropdown--tertiary--color--opened_active);
				background-color: RGB(
					$now-dropdown--tertiary--background-color--opened_active
				);
			}
		}

		&.-selected {
			border-color: RGB($now-dropdown--tertiary-selected--border-color);
			color: RGB($now-dropdown--tertiary-selected--color);
			background-color: RGB($now-dropdown--tertiary-selected--background-color);

			&:hover {
				border-color: RGB(
					$now-dropdown--tertiary-selected--border-color--hover
				);
				color: RGB($now-dropdown--tertiary-selected--color--hover);
				background-color: RGB(
					$now-dropdown--tertiary-selected--background-color--hover
				);
			}

			&:active,
			&.is-active:not(.is-bare) {
				border-color: RGB(
					$now-dropdown--tertiary-selected--border-color--active
				);
				color: RGB($now-dropdown--tertiary-selected--color--active);
				background-color: RGB(
					$now-dropdown--tertiary-selected--background-color--active
				);
			}
		}
	}

	// <now-dropdown bare>

	&.is-bare {
		@include now-mx-button-is-bare;
		width: 100%;

		&.has-label {
			font-family: $now-button--bare--font-family;
			@include now-mx-inherits(
				$font-style: $now-button--bare--font-style,
				$font-weight: $now-button--bare--font-weight,
				$text-transform: $now-button--bare--text-transform,
				$white-space: $now-button--bare--text-wrap
			);

			&:not(.show-padding) {
				padding-inline-start: 0;
				padding-inline-end: 0;
			}
		}

		&.-secondary {
			&:not(.has-label):hover {
				background-color: RGBA(
					$now-dropdown--bare_secondary--background-color--hover,
					$now-global-opacity--least
				);
			}

			&:not(.has-label) {
				&:active,
				&.is-active {
					background-color: RGBA(
						$now-dropdown--bare_secondary--background-color--active,
						$now-global-opacity--less
					);
				}
			}

			&.-selected {
				color: RGB($now-dropdown--bare_secondary-selected--color);
				background-color: unset;

				&:hover {
					color: RGB($now-dropdown--bare_secondary-selected--color--hover);

					&:not(.has-label) {
						background-color: RGBA(
							$now-dropdown--bare_secondary-selected--background-color--hover,
							$now-global-opacity--least
						);
					}
				}

				&:active,
				&.is-active {
					color: RGB($now-dropdown--bare_secondary-selected--color--active);

					&:not(.has-label) {
						background-color: RGBA(
							$now-dropdown--bare_secondary-selected--background-color--active,
							$now-global-opacity--less
						);
					}
				}
			}
		}

		&.-tertiary {
			color: RGB($now-dropdown--bare_tertiary--color);

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

			&:active,
			&.is-active {
				color: RGB($now-dropdown--bare_tertiary--color--active);
			}

			&:not(.has-label) {
				background-color: RGBA(
					$now-dropdown--bare_tertiary--background-color,
					$now-dropdown--bare_tertiary--background-color-alpha
				);

				&:hover {
					background-color: RGBA(
						$now-dropdown--bare_tertiary--background-color--hover,
						$now-dropdown--bare_tertiary--background-color-alpha--hover
					);
				}

				&:active,
				&.is-active {
					background-color: RGBA(
						$now-dropdown--bare_tertiary--background-color--active,
						$now-dropdown--bare_tertiary--background-color-alpha--active
					);
				}
			}
		}

		&.-inherit {
			color: inherit;

			&:hover,
			&:active {
				color: inherit;
			}
		}

		@include now-mx-button-is-bare-is-disabled;
	}

	// <now-dropdown disabled>

	&.is-disabled {
		@include now-mx-button-is-disabled;
		border-width: $now-button--border-width--disabled;
	}

	.now-line-height-crop {
		min-width: 0;
	}
} // end .now-dropdown

.now-dropdown-label {
	display: block;
	@include now-mx-rtl-value('text-align', 'left');
	@include now-mx-ellipsis;
}