@import '../../../styles/_partials/index';

.Combobox {
	// host modifiers
	&.Combobox__Readonly {
		@include if-theme-light() {
			background-color: $gray2;
		}
		@include if-theme-dark() {
			background-color: $gray-dark-alt;
		}
	}
}
@import '../../../styles/_partials/index';

.Combobox {
	--inputHeight: 37px;
	--optionHeight: 37px;
	--comboBoxIconPadding: 50px;
	display: inline-flex;
	width: 100%;
	position: relative;
	max-width: 100%;

	&.Combobox__InputHeightLarge {
		--inputHeight: 57px;
	}

	&.Combobox__InputHeightLarge {
		--inputHeight: 47px;
	}

	&.Combobox__OptionHeightLarge {
		--optionHeight: 57px;
	}

	.Combobox__SearchIcon {
		opacity: 0;
	}

	.Combobox__CurrentOptionIcon {
		opacity: 1;
	}

	.Combobox__BasicInput {
		margin-bottom: 0;
		width: 100%;

		input {
			padding: 0;
			height: var(--inputHeight);
			transition: padding-left none;
			padding-left: 20px;
			padding-right: 42px;
			transition: padding-left 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
		}

		&.Combobox__BasicInput__HasIcon input {
			padding-left: var(--comboBoxIconPadding) !important;
		}
	}

	&.Combobox__Disabled {
		filter: grayscale(100%);
		opacity: 0.6;

		* {
			pointer-events: none;
		}
	}

	.Combobox__CaretIcon, .Combobox__CloseIcon {
		position: absolute;
		right: 20px;
		margin: 0;
	}

	&:not(.Combobox__Open) {

		&:focus,
		&:focus-visible {
			outline: none;
		}
	}

	&.Combobox__Open {
		z-index: 5;

		.Combobox__SearchIcon {
			transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
			opacity: 1;
		}

		.Combobox__CurrentOptionIcon {
			opacity: 0;
		}

		.Combobox__BasicInput {
			input {
				padding-left: 50px;
				border-radius: 4px 4px 0 0;
			}
		}

		.Combobox_Options {
			display: block;
		}
	}

	.DownloadSmall {
		width: 12px;
		height: 12px;
		align-self: center;
		margin: 0 7px 0 0;

		path {
			@include __theme-fill($green-dark, $green);
		}
	}

	.Combobox_OptionsContainer {
		overflow: auto;
		max-height: inherit;
	}

	.Combobox_Options {
		overflow: hidden;
		position: absolute;
		top: calc(var(--inputHeight) + 1px);
		left: 0;
		display: none;
		width: 100%;
		@include theme-input-background-color;
		@include theme-input-border-box-shadow;
		border-radius: 0 0 4px 4px;
	}

	.Combobox_OptionGroup {
		min-height: 37px;
		line-height: 37px;
		text-align: left;
		@include theme-color-gray-else-gray25;
		@include theme-background-gray15-else-graydark50;
		@include tracking(5);
		font-weight: 700;
		padding: 0 20px;
		display: flex;
	}

	.Combobox_Option {
		display: flex;
		align-items: center;
		line-height: var(--optionHeight);
		height: var(--optionHeight);
		padding: 0 10px;

		&:last-of-type {
			border-radius: 0 0 4px 4px;
		}

		@include cursorPointer;

		&.Combobox_Option__Disabled {
			cursor: not-allowed;
			* {
				cursor: not-allowed;
			}

			opacity: .5;
		}

		&.Combobox__NoResults {
			filter: none;
			opacity: 1;
			@include theme-color-gray-else-gray25;
		}

		.Combobox__Right {
			flex-grow: 1;
			margin-left: 20px;
			text-align: right;

			.Combobox__Check {
				margin: 0 10px;
				vertical-align: middle;

				* {
					@include __theme-fill($green-dark, $green);
				}
			}
		}

		.Combobox__SecondaryText {
			font-weight: 300;
		}

		svg.Combobox__ItemIcon,
		img {
			margin: 0 10px 0 0;
			width: auto;
			flex-shrink: 0;
		}

		img {
			height: 22px;
			border-radius: 1px;

			@include if-theme-dark() {
				filter: brightness(0.44);
			}
		}

		.Combobox_Option_Label {
			max-width: 100%;
		}

		.Combobox_Option_Label, .Combobox__Right {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.Combobox__SecondaryText {
			margin-right: 0;
		}

		&:focus,
		&.Combobox_Option__Focus {
			outline: none;
			@include __theme-color($white, $gray-dark);
			@include __theme-background($green-dark, white);

			span {
				@include __theme-color($white, $gray-dark);
			}

			.Combobox__Check path {
				@include __theme-fill($white, $gray-dark);
			}
		}

		&.Combobox_Option__Striped:nth-child(even):not(:hover):not(:focus):not(.Combobox_Option__Focus) {
			@include theme-background-gray2-else-gray2row;
		}
	}
}

.Combobox__SearchIcon,
.Combobox__CurrentOptionIcon {
	pointer-events: none;
	position: absolute;
	margin-left: 20px;
	transition: opacity none;
}