/* Patterns - Interaction - DropdownServerSide */
////
/// @group Patterns-DropdownServerSide
/// Patterns - Interaction - DropdownServerSide

// Balloon margin value related with selectedValuesWrapper
$balloonMarginToSelectValuesWrapper: 2px;
$balloonMobileTopMargin: 5vh;

///
.osui-dropdown-serverside {
	--osui-dropdown-ss-balloon-max-height: 300px;
	--osui-dropdown-min-width: 170px;
	--osui-floating-offset: var(--space-xs);
	--osui-dropdown-ss-scroll-bar-width: 5px;
	position: relative;

	.osui-balloon {
		--osui-balloon-shadow: none;

		border: var(--border-size-s) solid var(--color-neutral-5);
		display: flex;
		flex-direction: column;
		flex: 1;
		height: auto;
		min-width: var(--osui-dropdown-min-width);
		overflow: hidden;
		z-index: var(--layer-global-elevated);

		// Service Studio Preview
		& {
			-servicestudio-left: initial;
			-servicestudio-margin-top: 4px;
			-servicestudio-max-height: 320px;
			-servicestudio-opacity: 1;
			-servicestudio-position: relative !important;
			-servicestudio-top: 0;
			-servicestudio-width: 100%;
		}
	}

	// "Input" section - SelectedValues container
	&__selected-values {
		align-items: center;
		display: flex;
		flex: 1;
		height: inherit;
		margin-right: var(--space-base);
		overflow: hidden;

		&:hover {
			border-color: var(--color-neutral-6);
		}

		&:after {
			align-items: center;
			color: var(--color-neutral-7);
			content: '\f107';
			display: flex;
			font: normal normal normal 20px/1 FontAwesome;
			height: 100%;
			pointer-events: none;
			position: absolute;
			right: 16px;
			top: 0;
			transition: transform 200ms ease-in-out;
		}

		& > * {
			&::selection {
				background-color: transparent;
			}

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

		&-wrapper {
			align-items: center;
			background-color: var(--color-neutral-0);
			border-radius: var(--border-radius-soft);
			border: var(--border-size-s) solid var(--color-neutral-5);
			color: var(--color-neutral-9);
			cursor: pointer;
			display: flex;
			font-size: var(--font-size-s);
			height: 40px;
			padding: var(--space-none) var(--space-base);
			position: relative;
			transition: border 250ms ease-in-out;
			width: 100%;

			// Service Studio Preview
			& {
				-servicestudio-height: fit-content;
				-servicestudio-min-height: 40px;
			}
		}

		[data-expression] {
			white-space: nowrap;
		}
	}

	// Balloon section
	&__balloon {
		// Search Wrapper
		&-search-wrapper {
			background-color: var(--color-neutral-0);
			padding: var(--space-none);
			position: relative;
			display: flex;
			align-items: center;
		}

		// Search placeholder
		&-search {
			flex: 1;

			&:before {
				align-items: center;
				color: var(--color-neutral-6);
				content: '\f002';
				display: flex;
				font: normal normal normal 14px/1 FontAwesome;
				height: 100%;
				left: var(--space-base);
				position: absolute;
				top: 0;
			}

			&:empty + .osui-dropdown-serverside__balloon-search-icon {
				display: none;
			}

			input,
			.form-control[data-input] {
				background-color: transparent;
				border-radius: var(--border-size-none);
				border: none;
				color: inherit;
				font-size: var(--font-size-s);
				height: 40px;
				padding: var(--space-none) var(--space-s) var(--space-none) var(--space-xl);
				width: 100%;
			}
		}

		// Search Icon placeholder
		&-search-icon {
			align-items: center;
			display: flex;
			height: 100%;
			padding: var(--space-none) var(--space-base);
		}

		// Options placeholder
		&-content {
			border-top: var(--border-size-s) solid var(--color-neutral-5);
			flex: 1;
			height: auto;
			max-height: var(--osui-dropdown-ss-balloon-max-height);
			overflow-x: hidden;
			overflow-y: auto;
			padding: var(--space-none);

			&::-webkit-scrollbar {
				width: var(--osui-dropdown-ss-scroll-bar-width);
			}

			&::-webkit-scrollbar-track {
				background: var(--color-neutral-4);
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--color-neutral-6);
			}

			// Avoid having data-list above other elements in this context, such as a StickyTop SelectAll Option container.
			& > *:not([data-list]) {
				z-index: var(--layer-local-tier-2);
			}
		}

		// If Search input do not exist, this modifier will be added!
		&--has-not-search {
			.osui-dropdown-serverside__balloon-content {
				border-top: none;
			}
		}

		// Footer placeholder
		&-footer {
			border-top: var(--border-size-s) solid var(--color-neutral-5);
			padding: var(--space-s) var(--space-base);
		}
	}

	// Balloon IsOpen
	&:has(.osui-dropdown-serverside--is-opened) {
		.osui-dropdown-serverside {
			// "Input" section wrapper - SelectedValues container wrapper
			&__selected-values-wrapper {
				border-color: var(--color-primary);
			}

			// "Input" section - SelectedValues container
			&__selected-values {
				&:after {
					color: var(--color-primary);
					transform: rotate(180deg);
				}
			}
		}
	}

	// When it's disabled
	&--is-disabled {
		.osui-dropdown-serverside__selected-values {
			&:after {
				border-color: var(--color-neutral-6);
			}

			&-wrapper {
				background-color: var(--color-neutral-2);
				border-color: var(--color-neutral-4);
				color: var(--color-neutral-6);
				pointer-events: none;
			}
		}
	}

	// When it's not valid
	&--not-valid {
		.osui-dropdown-serverside__selected-values-wrapper {
			/* !important should be here in order to grant more specific selectors be overriding border color at this context. */
			border-color: var(--color-error) !important;
		}

		& + .osui-dropdown-serverside-error-message {
			color: var(--color-error);
			font-size: var(--font-size-xs);
			margin-left: var(--space-none);
			margin-top: 3px;
		}
	}
}

// Inside Form
.form {
	.osui-dropdown-serverside__balloon-search-wrapper input[data-input] {
		margin-bottom: 0;
	}

	.osui-dropdown-serverside__balloon .wcag-hide-text {
		position: absolute;
		margin: -1px;
	}
}

// Inside Tabs
.windows .osui-tabs {
	// subtracts the size of the border so it doesn't get cut off inside the tabs, in windows
	.osui-dropdown-serverside__selected-values-wrapper {
		width: calc(100% - 2 * var(--border-size-s));
	}
}

// Accessibility -----------------------------------------------------------------
///
.has-accessible-features {
	.osui-dropdown-serverside {
		&__selected-values {
			&:hover,
			&:after,
			&-wrapper,
			&-footer {
				border-color: var(--color-neutral-7);
			}
		}

		&__balloon {
			border-color: var(--color-neutral-7);

			&-search {
				&:before {
					color: var(--color-neutral-7);
				}

				input,
				.form-control[data-input] {
					&:focus {
						box-shadow: inset 0 0 0 3px var(--color-focus-outer);
					}
				}
			}

			&-content {
				--osui-outline-size: 3px;

				&::-webkit-scrollbar-thumb {
					background-color: var(--color-neutral-7);
				}

				&:focus {
					// Due the possibility of having a focus inside the balloon, we need to remove the outline from the balloon itself.
					box-shadow: none;

					// Common outline styles
					&:before,
					&:after,
					& > *:before,
					& > *:after {
						background-color: var(--color-focus-outer);
						content: '';
						display: block;
					}

					// This is the outline that will be applied to the content of the balloon vertically.
					&:before,
					&:after {
						height: var(--osui-outline-size);
						/* This negative margin will avoid having sticky element on pushing down the elements */
						margin-top: calc(-1 * var(--osui-outline-size));
						position: sticky;
						width: 100%;
						z-index: var(--layer-local-tier-3);
					}

					&:before {
						top: 0;
					}

					&:after {
						bottom: 0;
					}

					// This is the outline that will be applied to the content of the balloon horizontally.
					& > *:before,
					& > *:after {
						height: 100%;
						position: absolute;
						top: 0;
						width: var(--osui-outline-size);
						z-index: var(--layer-local-tier-2);
					}

					& > *:before {
						left: 0;
					}
					& > *:after {
						right: 0;
					}
				}
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.has-accessible-features .osui-dropdown-serverside__balloon-content:focus {
		--osui-outline-size: 0;

		@include a11y-high-contrast-outline(true);
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.osui-dropdown-serverside {
		&__selected-values {
			margin-left: var(--space-base);
			margin-right: initial;

			&:after {
				left: var(--space-base);
				right: auto;
			}
		}

		// Balloon States
		&__balloon {
			&-search {
				&:before {
					left: auto;
					right: var(--space-base);
				}

				input,
				.form-control[data-input] {
					padding: var(--space-none) var(--space-xl) var(--space-none) var(--space-s);
				}
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.tablet,
.phone {
	.osui-dropdown-serverside {
		&__selected-values-wrapper {
			height: 48px;
		}

		&__balloon-search {
			input,
			.form-control[data-input] {
				font-size: var(--font-size-base);
				height: 48px;
			}
		}
	}
}

///
.phone {
	&.android {
		&.landscape {
			.osui-dropdown-serverside__balloon-container {
				max-height: 90vh;
			}
		}

		.osui-dropdown-serverside__balloon-container {
			max-height: calc(90vh - $balloonMobileTopMargin - var(--header-size));
		}
	}

	&.ios {
		.osui-dropdown-serverside__search-input--is-focused {
			.osui-dropdown-serverside__balloon-container {
				// 100vw because ios split in half the vertical height when keyboard is open!
				max-height: calc(100vw - $balloonMobileTopMargin - var(--header-size));
			}
		}
	}

	&.portrait {
		.osui-dropdown-serverside {
			&--at-content {
				.osui-dropdown-serverside__balloon-container {
					--ballon-top-margin-value: calc(var(--header-size) + var(--header-size-content) + 5vw);
				}
			}
		}
	}

	&.landscape {
		.osui-dropdown-serverside {
			// Balloon section
			&__balloon {
				// Content Container
				&-container {
					max-height: 50vh;
				}

				// If do not exist a input search inside balloon
				&--has-not-search {
					.osui-dropdown-serverside__balloon-container {
						max-height: 90vh;
					}
				}
			}

			&--at-content {
				.osui-dropdown-serverside__balloon-container {
					--ballon-top-margin-value: 10px;
				}
			}
		}
	}

	.osui-dropdown-serverside {
		// Balloon section
		&__balloon {
			align-items: center;
			background-color: var(--overlay-background);
			border: none;
			border-radius: var(--border-radius-sharp);
			display: flex;
			left: 0;
			max-width: 100vw;
			opacity: 0;
			overflow: hidden;
			top: 0;
			transition: opacity 250ms ease;
			width: 100vw;
			z-index: var(--layer-global-instant-interaction);

			// Service Studio Preview
			& {
				-servicestudio-background-color: var(--color-neutral-0);
				-servicestudio-left: initial;
				-servicestudio-opacity: 1;
				-servicestudio-position: relative;
				-servicestudio-top: 2px;
			}

			&-container {
				background: var(--color-neutral-0);
				border-radius: var(--osui-balloon-shape);
				box-shadow: var(--shadow-xl);
				display: flex;
				flex-direction: column;
				height: auto;
				margin-top: $balloonMobileTopMargin;
				// 90vh - maxHeight in order to create a margin top/bottom with 5vh
				max-height: calc(90vh - $balloonMobileTopMargin - var(--header-size));
				overflow: hidden;
				width: 85vw;

				// Service Studio Preview
				& {
					-servicestudio-box-shadow: none;
					-servicestudio-margin-top: initial;
					-servicestudio-opacity: 1;
					-servicestudio-width: 100%;
				}
			}

			&-content {
				height: var(--osui-dropdown-ss-balloon-max-height);
				max-height: unset;
			}

			// If do not exist a input search inside balloon
			&--has-not-search {
				.osui-dropdown-serverside__balloon-container {
					margin-top: $balloonMobileTopMargin;
					max-height: calc(var(--viewport-height) - $balloonMobileTopMargin - var(--header-size));
				}
			}
		}

		&--is-opened {
			&.osui-dropdown-serverside__balloon {
				min-height: 100vh;
				opacity: 1;
			}
		}

		// When moved to content container context
		&--at-content {
			align-items: flex-start;
			justify-content: center;
			max-height: 0;

			&.osui-dropdown-serverside--is-opened {
				max-height: 60vh;

				.osui-dropdown-serverside__balloon-container {
					transform: translateY(0);
				}
			}

			.osui-dropdown-serverside__balloon-container {
				margin-top: var(--ballon-top-margin-value);
				position: relative;
				transform: translateY(calc(0.5 * var(--ballon-top-margin-value)));
				transition: all 0.25s ease;
			}

			.osui-dropdown-serverside__balloon-content {
				max-height: calc(100vh - (2 * var(--ballon-top-margin-value)));

				/* width */
				&::-webkit-scrollbar {
					width: 3px;
				}

				/* Track */
				&::-webkit-scrollbar-track {
					background-color: var(--color-neutral-3);
				}

				/* Handle */
				&::-webkit-scrollbar-thumb {
					background-color: var(--color-neutral-6);
				}

				/* Handle on hover */
				&::-webkit-scrollbar-thumb:hover {
					background-color: var(--color-neutral-8);
				}
			}
		}
	}
}