/* Widgets - Dropdown */
////
/// @group Widgets-Dropdown
/// Widgets - Dropdown

.dropdown {
	&-container {
		cursor: initial;
		position: relative;

		&:after {
			border: var(--border-size-m) solid get-border-color('neutral-7');
			border-right: var(--border-size-none) !important;
			border-top: var(--border-size-none) !important;
			bottom: 0;
			box-sizing: border-box;
			content: '';
			height: 8px;
			left: auto;
			pointer-events: none;
			position: absolute;
			right: 16px;
			top: 15px;
			transform: rotate(-45deg) translateY(0) translateX(0);
			transition: all 300ms ease-in-out;
			width: 8px;
		}

		& > .dropdown-display:after {
			content: none;
		}

		& > div,
		& > select {
			&.dropdown-display {
				align-items: center;
				background-color: get-background-color('neutral-0');
				border: var(--border-size-s) solid get-border-color('neutral-5');
				border-radius: var(--border-radius-soft);
				color: get-text-color('neutral-9');
				cursor: pointer;
				display: flex;
				font-size: var(--font-size-s);
				height: 40px;
				padding: var(--space-none) var(--space-base);
				width: 100%;

				&:hover {
					border: var(--border-size-s) solid get-border-color('neutral-6');
				}

				&:focus {
					border: var(--border-size-s) solid get-border-color('primary');
				}
			}
		}

		&.not-valid {
			&.dropdown-expanded > div.dropdown-display,
			& > select.dropdown-display {
				border: var(--border-size-s) solid get-border-color('error');
			}
		}

		&.dropdown-expanded > div.dropdown-display {
			border: var(--border-size-s) solid get-border-color('primary');
		}

		& > div.dropdown-list {
			border: var(--border-size-s) solid get-border-color('neutral-4');
			border-radius: var(--border-radius-soft);
			box-shadow: none;
			left: 0 !important;
			max-height: 300px;
			overflow-y: auto;
			position: absolute;
			width: 100% !important;
		}

		.dropdown-popup-row {
			align-items: center;
			color: get-text-color('neutral-9');
			display: flex;
			height: 40px;
			padding: var(--space-none) var(--space-base);

			&:hover,
			&-selected:hover {
				background: get-background-color('neutral-2');
			}

			&-selected {
				background-color: get-background-color('neutral-2');
				color: get-text-color('neutral-9');
			}

			span {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.scrollable-list-with-scroll {
			background: none;
			max-height: 100%;
			overflow-y: hidden;
			padding: var(--space-s) var(--space-none);

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

	// Is expanded
	&-expanded {
		&.dropdown-container:after {
			border: var(--border-size-m) solid get-border-color('primary');
			transform: rotate(135deg) translateY(-3px) translateX(3px);
		}

		&-down div.dropdown-list {
			margin-top: var(--space-xs);
			top: 100% !important;
		}

		&-up div.dropdown-list {
			bottom: 100% !important;
			margin-bottom: var(--space-xs);
			top: auto !important;
		}
	}
}

.not-valid {
	&.dropdown-expanded {
		&.dropdown-container {
			&:after {
				border: var(--border-size-m) solid get-border-color('neutral-7');
				border-right: var(--border-size-none) !important;
				border-top: var(--border-size-none) !important;
				transform: rotate(-45deg) translateY(0) translateX(0);
			}
		}
	}
}

div,
select {
	&.dropdown-display {
		&.dropdown-disabled,
		&[disabled] {
			background-color: get-background-color('neutral-2');
			border: var(--border-size-s) solid get-border-color('neutral-4');
			color: get-text-color('neutral-6');
			pointer-events: none;
		}
	}
}

div {
	&.dropdown-display-content {
		width: 100%;

		& > span,
		& > div {
			font-size: var(--font-size-s);
		}
	}
}

select.dropdown-display[disabled] {
	opacity: 1;
}

// Responsive --------------------------------------------------------------------
.tablet,
.phone {
	.dropdown-container {
		&:after {
			top: 20px;
		}
	}

	div.dropdown-display,
	select.dropdown-display {
		font-size: var(--font-size-base);
		height: 48px;

		.dropdown-display-content {
			& > span,
			& > div {
				font-size: var(--font-size-base);
			}
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.dropdown-container {
		&:after {
			left: 16px;
			right: auto;
		}
	}
}

// Accessibility -----------------------------------------------------------------
///
.has-accessible-features {
	.dropdown-container {
		&.dropdown-expanded {
			& > div.dropdown-display {
				border-color: get-border-color('focus-inner');
				box-shadow: 0 0 0 3px get-background-color('focus-outer');
			}
		}

		& > div,
		& > select {
			&.dropdown-display {
				border-color: get-border-color('neutral-7');

				&:hover {
					border-color: get-border-color('neutral-8');
				}
			}
		}

		& > select {
			&.dropdown-display:focus {
				border-color: get-border-color('focus-inner');
			}
		}
	}
}