@use "sass:math";

// ELEMENT: Select.
// $sui-wrap: true | $rtl: false
@include body-class(true, false) {
	select.sui-select {
		+ .sui-select {
			min-width: 100%;
			max-width: 100%;
			display: block;
			text-align: left;

			// STATE: Default.
			.selection {
				display: block;

				span[role="combobox"] {
					// TYPE: Single Select.
					&.select2-selection--single {
						height: auto;
						cursor: pointer;
						user-select: none;
						display: flex;
						flex-flow: row nowrap;
						align-items: center;
						position: relative;
						margin: 0;
						padding: 0;
						border: 1px solid palette(gray, lighter);
						border-radius: $border-radius;
						background-color: #fafafa;
						transition: $transition;

						// Label.
						.select2-selection__rendered {
							min-width: 10px;
							overflow: hidden;
							display: block;
							flex: 1;
							padding: 8px 5px 8px 14px;
							color: $nightrider;
							font: 500 15px/22px $font;
							letter-spacing: -0.2px;
							text-overflow: ellipsis;
							white-space: nowrap;

							.select2-selection__placeholder {
								color: $fiftyshades;
							}
						}

						// Icon.
						.select2-selection__arrow {
							width: 38px;
							height: 38px;
							display: flex;
							flex-flow: row wrap;
							align-items: center;
							flex: 0 0 auto;
							position: relative;
							margin: 0;
							padding: 0;
							border: 0;
							color: $grey;

							[class*="sui-icon-"] {
								display: block;
								margin: 0 auto;

								&:before {
									color: inherit;
									display: block;
								}
							}
						}
					}

					// TYPE: Multi Select.
					&.select2-selection--multiple {
						display: flex;
						flex-flow: row wrap;
						align-items: flex-start;
						margin: 0;
						padding: 3px 9px;
						border: 1px solid $overcast;
						border-radius: $border-radius;
						background-color: $cloud;

						// Options.
						.select2-selection__rendered {
							min-width: 1px;
							display: flex;
							flex: 0 1 auto;
							flex-flow: row wrap;
							align-items: center;
							margin: 0;
							padding: 0;
							border: 0;

							.select2-selection__choice {
								max-width: 200px;
								// overflow: hidden;
								display: flex;
								flex-flow: row nowrap;
								align-items: center;
								margin: 2px;
								padding: 0;
								border: 0;
								border-radius: $border-radius;
								background-color: $ironmike;
								color: $white;
								font: 500 12px/16px $font;
								letter-spacing: $font--letter-spacing;

								.select2-selection__choice__display {
									min-width: 1px;
									overflow: hidden;
									display: block;
									flex: 1;
									padding: 5px 10px;
									padding-left: 5px;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}

						// Search input.
						.select2-search {
							&.select2-search--inline {
								min-width: 100px;
								flex: 1;
								margin: 5px;
								padding: 0;
								border: 0;
								display: block;

								.select2-search__field {
									width: 100% !important;
									height: 22px;
									resize: none;
									display: block;
									margin: 0;
									padding: 0;
									border: 0;
									border-radius: 0;
									background-color: transparent;
									color: $nightrider;
									font: 500 15px/22px $font;
									letter-spacing: $font--letter-spacing;

									&::placeholder {
										color: $fiftyshades;
									}

									&:-moz-placeholder {
										color: $fiftyshades;
									}

									&::-moz-placeholder {
										color: $fiftyshades;
									}

									&:-ms-input-placeholder {
										color: $fiftyshades;
									}

									&::-webkit-input-placeholder {
										color: $fiftyshades;
									}
								}
							}
						}
					}
				}

				&:hover {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							background-color: $white;
						}
					}
				}
			}

			&:not(.sui-select-theme--search) .selection {
				span[role="combobox"] {
					// TYPE: Multi Select.
					&.select2-selection--multiple {
						// Options.
						.select2-selection__rendered {
							.select2-selection__choice {
								.sui-button-icon {
									width: 26px;
									height: 26px;
									cursor: pointer;
									display: flex;
									flex-flow: column nowrap;
									align-items: center;
									justify-content: center;
									margin: 0;
									padding: 0;
									border: 0;
									border-top-left-radius: 0;
									border-bottom-left-radius: 0;
									background-color: #5e5e5e;
									color: $overcast;
									text-align: center;

									&:focus {
										box-shadow: none;
									}
								}
							}
						}
					}
				}
			}

			// DESIGN: Icon.
			&.sui-select-theme--icon {
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							// Label.
							.select2-selection__rendered {
								position: relative;
								padding-left: 46px;

								[class*="sui-icon-"] {
									width: 30px;
									height: 30px;
									display: flex;
									flex-flow: row wrap;
									align-items: center;
									justify-content: center;
									position: absolute;
									top: 50%;
									left: 10px;
									transform: translateY(-50%);
									text-align: center;

									&:before {
										display: block;
										font-size: 16px;
									}
								}

								.select2-selection__placeholder {
									margin-left: -32px;
								}
							}
						}
					}
				}
			}

			// DESIGN: Color.
			&.sui-select-theme--color {
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							// Label.
							.select2-selection__rendered {
								position: relative;
								padding-left: 45px;

								.sui-color {
									width: 30px;
									height: 30px;
									position: absolute;
									top: 50%;
									left: 5px;
									border-width: 1px;
									border-style: solid;
									border-radius: math.div($border-radius, 2);
									transform: translateY(-50%);
								}

								.select2-selection__placeholder {
									margin-left: -31px;
								}
							}
						}
					}
				}
			}

			// DESIGN: Smart Search.
			&.sui-select-theme--search {
				.selection {
					span[role="combobox"] {
						// TYPE: Multi Select.
						&.select2-selection--multiple {
							position: relative;

							@include icon(before, magnifying-glass-search, true) {
								width: 30px;
								position: absolute;
								top: 50%;
								left: 9px;
								transform: translateY(-50%);
								text-align: center;
							}

							.select2-selection__rendered {
								padding-left: 40px;

								.select2-selection__choice {
									min-width: 1px;
									max-width: none;
									display: flex;
									flex-flow: row nowrap;
									flex: 1;
									margin: 0;
									padding: 0;
									background-color: transparent;
									border-radius: 0;
									color: $nightrider;
									font: 500 15px/22px $font;
									letter-spacing: $font--letter-spacing;
								}

								&.has-option-selected {
									width: 100%;

									+ .select2-search {
										display: none;
									}
								}
							}
						}
					}
				}

				// STATE: Hover
				&:hover {
					.selection {
						span[role="combobox"] {
							background: $white;
						}
					}
				}

				// STATE: Focus
				&.select2-container--focus {
					.selection {
						span[role="combobox"] {
							border-color: $blue;
							background: $white;
							box-shadow: 0 0 0 2px $blue-ghost;

							.select2-search {
								textarea {
									&:focus {
										outline: none;
									}
								}
							}
						}
					}

					&.select2-container--open {
						&.sui-select-dropdown-container--above {
							.selection {
								span[role="combobox"] {
									border-top-color: $overcast;
									border-top-left-radius: 0;
									border-top-right-radius: 0;
								}
							}
						}

						&.sui-select-dropdown-container--below {
							.selection {
								span[role="combobox"] {
									border-bottom-color: $overcast;
									border-bottom-left-radius: 0;
									border-bottom-right-radius: 0;
								}
							}
						}
					}
				}
			}

			// STATE: Focus.
			&.select2-container--focus {
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							background-color: $white;
						}
					}
				}
			}

			// STATE: Dropdown open.
			&.select2-container--open {
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							// Icon.
							.select2-selection__arrow {
								transform: rotate(180deg);
							}
						}
					}
				}
			}

			// STATE: Disabled.
			&.select2-container--disabled {
				.selection {
					cursor: not-allowed;

					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							pointer-events: none;
							border-color: palette(silver, default);
							background-color: palette(silver, default);

							// Label.
							.select2-selection__rendered {
								color: $fiftyshades;
							}

							// Icon.
							.select2-selection__arrow {
								color: $fiftyshades;
							}
						}

						// TYPE: Multi Select.
						&.select2-selection--multiple {
							pointer-events: none;

							.select2-selection__rendered {
								border-color: palette(silver, default);
								background-color: palette(silver, default);
							}
						}
					}
				}
			}
		}

		// SIZE: Small height.
		&.sui-select-sm {
			+ .sui-select {
				// STATE: Default.
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							// Label.
							.select2-selection__rendered {
								padding: 6px 6px 6px 12px;
								font-size: 13px;
								line-height: 16px;
							}

							// Icon.
							.select2-selection__arrow {
								width: 28px;
								height: 28px;
							}
						}
					}
				}

				// DESIGN: Icon.
				&.sui-select-theme--icon {
					.selection {
						span[role="combobox"] {
							// TYPE: Single Select.
							&.select2-selection--single {
								// Label.
								.select2-selection__rendered {
									padding-left: 36px;

									[class*="sui-icon-"] {
										left: 5px;

										&:before {
											font-size: 12px;
										}
									}
								}

								.select2-selection__placeholder {
									margin-left: -24px;
								}
							}
						}
					}
				}

				// DESIGN: Color.
				&.sui-select-theme--color {
					.selection {
						span[role="combobox"] {
							// TYPE: Single Select.
							&.select2-selection--single {
								// Label.
								.select2-selection__rendered {
									padding-left: 40px;

									.sui-color {
										width: 20px;
										height: 20px;
										left: 10px;
									}

									.select2-selection__placeholder {
										margin-left: -28px;
									}
								}
							}
						}
					}
				}
			}
		}

		// SIZE: Auto width.
		&[data-width] {
			+ .sui-select {
				min-width: auto;
			}
		}

		// DESIGN: Inline select.
		&.sui-select-inline {
			+ .sui-select {
				min-width: 1px;
				display: inline-block;
				margin-right: 10px;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	// STATE: Error.
	.sui-form-field {
		&.sui-form-field-error {
			select.sui-select {
				+ .sui-select {
					// STATE: Default.
					.selection {
						span[role="combobox"] {
							// TYPE: Single Select.
							&.select2-selection--single {
								border-bottom-color: $red;
								box-shadow: 0 1px 0 0 $red;
							}

							// TYPE: Multi Select.
							&.select2-selection--multiple {
								.select2-selection__rendered {
									border-bottom-color: $red;
									box-shadow: 0 1px 0 0 $red;
								}
							}
						}
					}
				}
			}
		}
	}
}

// $sui-wrap: true | $rtl: true
@include body-class(true, true) {
	select.sui-select {
		+ .sui-select {
			direction: rtl;
			text-align: right;

			.selection {
				span[role="combobox"] {
					// TYPE: Single Select.
					&.select2-selection--single {
						// Label.
						.select2-selection__rendered {
							padding-right: 14px;
							padding-left: 5px;
						}
					}
				}
			}

			// DESIGN: Icon.
			&.sui-select-theme--icon {
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							// Label.
							.select2-selection__rendered {
								padding-left: 5px;
								padding-right: 46px;

								[class*="sui-icon-"] {
									left: auto;
									right: 10px;
								}

								.select2-selection__placeholder {
									margin-left: auto;
									margin-right: -32px;
								}
							}
						}
					}
				}
			}
		}
	}
}

// $sui-wrap: true | $rtl: false | $monochrome: true
@include body-class(true, false, true) {
	select.sui-select {
		+ .sui-select {
			// STATE: Default.
			.selection {
				span[role="combobox"] {
					// TYPE: Single Select.
					&.select2-selection--single {
						border-color: $black;
						background-color: $white;

						// Label.
						.select2-selection__rendered {
							color: $black;

							.select2-selection__placeholder {
								color: $black;
							}
						}

						// Icon.
						.select2-selection__arrow {
							color: $black;
						}
					}

					// TYPE: Multi Select.
					&.select2-selection--multiple {
						// Options.
						.select2-selection__rendered {
							border-color: $black;
							background-color: $white;

							.select2-search {
								input {
									color: $black;

									&::placeholder {
										color: $black;
									}

									&:-moz-placeholder {
										color: $black;
									}

									&::-moz-placeholder {
										color: $black;
									}

									&:-ms-input-placeholder {
										color: $black;
									}

									&::-webkit-input-placeholder {
										color: $black;
									}
								}
							}

							.select2-selection__choice {
								background-color: $black;

								.sui-button-icon {
									background-color: $black;
									color: $white;
								}
							}
						}
					}
				}
			}

			// DESIGN: Smart Search.
			&.sui-select-theme--search {
				.selection {
					span[role="combobox"] {
						// TYPE: Multi Select.
						&.select2-selection--multiple {
							.select2-selection__rendered {
								.select2-selection__choice {
									color: $black;

									.sui-button-icon {
										color: $black;
									}
								}
							}
						}
					}
				}
			}

			// STATE: Disabled.
			&.select2-container--disabled {
				.selection {
					span[role="combobox"] {
						// TYPE: Single Select.
						&.select2-selection--single {
							border-color: $grey;
							background-color: $white;

							// Label.
							.select2-selection__rendered {
								color: $grey;
							}

							// Icon.
							.select2-selection__arrow {
								color: $grey;
							}
						}

						// TYPE: Multi Select.
						&.select2-selection--multiple {
							.select2-selection__rendered {
								border-color: $grey;
								background-color: $grey;
							}
						}
					}
				}
			}
		}
	}

	// STATE: Error.
	.sui-form-field {
		&.sui-form-field-error {
			select.sui-select {
				+ .sui-select {
					// STATE: Default.
					.selection {
						span[role="combobox"] {
							// TYPE: Single Select.
							&.select2-selection--single {
								border-bottom-color: $black;
								box-shadow: 0 1px 0 0 $black;
							}

							// TYPE: Multi Select.
							&.select2-selection--multiple {
								.select2-selection__rendered {
									border-bottom-color: $black;
									box-shadow: 0 1px 0 0 $black;
								}
							}
						}
					}
				}
			}
		}
	}
}

// ELEMENT: Dropdown.
// $sui-wrap: false | $rtl: false
@include body-class(false, false) {
	.sui-select {
		&.sui-select-dropdown-container--open {
			display: block;

			* {
				box-sizing: border-box;
				font-variant-ligatures: none;
				-webkit-font-variant-ligatures: none;
				text-rendering: optimizeLegibility;
				-moz-osx-font-smoothing: grayscale;
				font-smoothing: antialiased;
				-webkit-font-smoothing: antialiased;
				text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
			}

			.sui-select-dropdown {
				display: block;
				margin: 0;
				padding: 10px 0;
				border: 1px solid palette(gray, lighter);
				border-radius: $border-radius;
				background-color: $white;
				box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.07);

				// Search input.
				.select2-search {
					display: block;
					margin: 4px 0 14px;
					padding: 0 14px;

					input {
						width: 100%;
						max-width: 100%;
						display: block;
						margin: 0;
						padding: 9px 14px;
						border: 1px solid palette(gray, lighter);
						border-radius: $border-radius;
						color: $nightrider;
						font: 500 15px/20px $font;
						letter-spacing: -0.2px;

						&::placeholder {
							color: $fiftyshades;
						}

						&:-moz-placeholder {
							color: $fiftyshades;
						}

						&::-moz-placeholder {
							color: $fiftyshades;
						}

						&:-ms-input-placeholder {
							color: $fiftyshades;
						}

						&::-webkit-input-placeholder {
							color: $fiftyshades;
						}

						&:hover,
						&:focus {
							border-color: palette(gray, lighter);
							outline: none;
							box-shadow: none;
						}
					}

					&.select2-search--hide {
						display: none !important;
					}
				}

				// Dropdown list.
				.select2-results {
					display: block;
					margin: 0;
					padding: 0;
					border: 0;

					.select2-results__options {
						max-height: 200px;
						overflow-y: auto;
						display: block;
						margin: 0;
						padding: 0;
						border: 0;
						list-style: none;
						padding-inline-start: 0;

						.select2-results__option {
							user-select: none;
							display: block;
							margin: 0;
							padding: 0 14px;
							border: 0;
							background-color: transparent;
							color: $grey;
							font: 500 15px/35px $font;
							letter-spacing: -0.2px;
							list-style: none;
							transition: $transition;

							&.select2-results__message {
								position: relative;
								margin: 0 15px;
								padding: 15px 20px;
								padding-left: 46px;
								border: 0;
								border-radius: $border-radius;
								background-color: palette(silver, default);
								color: $nightrider;
								font: 400 13px/22px $font;
								letter-spacing: $font--letter-spacing;

								@include icon(before, profile-male, true) {
									width: 30px;
									position: absolute;
									top: 50%;
									left: 10px;
									transform: translateY(-50%);
									color: $grey;
									font-size: 16px;
									text-align: center;
								}
							}

							.select2-results__group {
								color: $fiftyshades;
								font-size: 12px;
								font-weight: 500;
							}

							&:not(.select2-results__option--selected) {
								cursor: pointer;

								&.select2-results__option--highlighted {
									background-color: $haze;
									color: $nightrider;
								}
							}

							&.select2-results__option--selected {
								background-color: $grey;
								color: $white;

								&.select2-results__option--highlighted {
									background-color: $grey;
									color: $white;
								}
							}
						}
					}
				}

				// SIZE: Small.
				&.sui-select-dropdown-sm {
					padding: 15px 0;

					// Dropdown list.
					.select2-results {
						.select2-results__options {
							max-height: 208px;

							.select2-results__option {
								font-size: 13px;
								line-height: 30px;
							}
						}
					}
				}
			}

			// DESIGN: Select with icon.
			&.sui-select-theme--icon {
				.sui-select-dropdown {
					// Dropdown list.
					.select2-results {
						.select2-results__options {
							.select2-results__option {
								position: relative;

								[class*="sui-icon-"] {
									width: 30px;
									height: 30px;
									display: flex;
									flex-flow: row nowrap;
									align-items: center;
									justify-content: center;
									position: absolute;
									top: 0;
									left: 10px;
									text-align: center;

									&:before {
										display: block;
										flex: 0 0 auto;
										color: inherit;
										font-size: 16px;
									}
								}

								&[role="option"] {
									padding-left: 46px;
								}
							}
						}
					}

					// SIZE: Small.
					&.sui-select-dropdown-sm {
						// Dropdown list.
						.select2-results {
							.select2-results__options {
								.select2-results__option {
									[class*="sui-icon-"] {
										height: 28px;
										left: 5px;

										&:before {
											font-size: 12px;
										}
									}

									&[role="option"] {
										padding-left: 36px;
									}
								}
							}
						}
					}
				}
			}

			// DESIGN: Select with color.
			&.sui-select-theme--color {
				.sui-select-dropdown {
					// Dropdown list.
					.select2-results {
						.select2-results__options {
							.select2-results__option {
								position: relative;

								.sui-color {
									width: 20px;
									height: 20px;
									position: absolute;
									top: 50%;
									left: 10px;
									border-width: 1px;
									border-style: solid;
									border-radius: math.div($border-radius, 2);
									transform: translateY(-50%);
									text-align: center;
								}

								&[role="option"] {
									padding-left: 40px;
								}
							}
						}
					}
				}
			}

			// DESIGN: Select with variables.
			&.sui-select-theme--vars {
				.sui-select-dropdown {
					width: 240px !important;
					margin-left: -200px;

					// Dropdown list.
					.select2-results {
						.select2-results__options {
							.select2-results__option {
								&[role="option"] {
									display: flex;
									flex-flow: row nowrap;
									align-items: center;
									position: relative;

									.sui-variable-name {
										min-width: 100px;
										flex: 1;
									}

									.sui-variable-value {
										flex: 0 0 auto;
										color: $fiftyshades;
										font-size: 12px;
									}
								}

								&--group[role="group"] {
									padding-left: 0;
									padding-right: 0;

									.select2-results__group {
										cursor: initial;
										padding-left: 14px;
										padding-right: 14px;
									}
								}
							}
						}
					}
				}
			}

			// DESIGN: Smart Search.
			&.sui-select-theme--search {
				.sui-select-dropdown {
					border-color: $blue;

					&.sui-select-dropdown--above {
						border-bottom-style: none;
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
						box-shadow: 0 -2px 0 2px $blue-ghost;
					}

					&.sui-select-dropdown--below {
						border-top-style: none;
						border-top-left-radius: 0;
						border-top-right-radius: 0;
						box-shadow: 0 2px 0 2px $blue-ghost;
					}
				}
			}
		}
	}
}

// $sui-wrap: false | $rtl: true
@include body-class(false, true) {
	.sui-select {
		&.sui-select-dropdown-container--open {
			direction: rtl;

			.sui-select-dropdown {
				// Search input.
				.select2-search {
					input {
						text-align: right;
					}
				}

				// Dropdown list.
				.select2-results {
					.select2-results__options {
						.select2-results__option {
							text-align: right;
						}
					}
				}
			}

			// DESIGN: Select with icon.
			&.sui-select-theme--icon {
				.sui-select-dropdown {
					// Dropdown list.
					.select2-results {
						.select2-results__options {
							.select2-results__option {
								[class*="sui-icon-"] {
									right: 10px;
									left: auto;
								}

								&[role="option"] {
									padding-left: 14px;
									padding-right: 46px;
								}
							}
						}
					}
				}
			}

			// DESIGN: Select with color.
			&.sui-select-theme--color {
				.sui-select-dropdown {
					// Dropdown list.
					.select2-results {
						.select2-results__options {
							.select2-results__option {
								.sui-color {
									right: 10px;
									left: auto;
								}

								&[role="option"] {
									padding-right: 40px;
									padding-left: 14px;
								}
							}
						}
					}
				}
			}
		}
	}
}