:root {
	--selectHeight: 45px;
}

// Select default state
select {
	appearance: none;
	height: var(--selectHeight);
	opacity: 0;
}

// Selectize
.selectize-control {
	position: relative;

	// Input
	.selectize-input {
		display: flex;
		align-items: center;
		position: relative;
		height: var(--selectHeight);
		cursor: pointer;
		overflow: hidden;
		@include action-fields((
			padding-right: 35px,
			transition: false,
		));

		> * {
			display: inline-flex;
			align-items: center;
			height: 100%;
			border: 0;
			padding: 0;
			background: transparent;

			&.item {
				margin-right: 2px;
				white-space: nowrap;
				overflow: hidden;
			}

			&:focus {
				outline: none;
			}

			&[placeholder]:focus::-webkit-input-placeholder {
				opacity: 1 !important;
			}
		}

		&.dropdown-active {
			// background: #fff;
			// border-color: var(--paletteColor1);
			border-color: rgba(215, 220, 226, 0.9);
		}

		&.ct-disable-search {
			input {
				display: none;
			}
		}
	}

	// Dropdown
	.selectize-dropdown {
		position: absolute;
		// top: 0 !important;
		z-index: 20;
		margin-top: 10px;
		font-size: var(--formFontSize);
		color: var(--selectDropdownTextInitialColor);
		background: var(--selectDropdownBackground);
		border-radius: 2px;
		overflow: hidden;
		box-shadow: 0px 15px 30px 0px rgba(41, 51, 61, 0.1);

		.selectize-dropdown-content {
			max-height: calc(45px * 7);
			overflow-x: hidden;
			overflow-y: auto;

			> * {
				display: flex;
				align-items: center;
				height: var(--selectHeight);
				padding: 0 15px;
				cursor: pointer;
				white-space: nowrap;

				// &:first-child {
				// 	opacity: 0;
				// }

				&.active {
					color: var(--selectDropdownTextHoverColor);
					background: var(--selectDropdownItemHoverColor);
				}

				&.selected {
					color: var(--selectDropdownTextActiveColor);
					font-weight: 500;
					background: var(--selectDropdownItemActiveColor);
				}
			}
		}
	}

	// Input arrows
	.selectize-input {
		> i {
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			width: 40px;
			height: 100%;

			&:before, &:after {
				position: absolute;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 1.2px;
				height: 5px;
				margin: auto;
				background: currentColor;
				border-radius: 2px;
			}

			&:before {
				transform: translate(0px, 0) rotate(-45deg);
			}

			&:after {
				transform: translate(3px, 0) rotate(45deg);
			}
		}

		&.ct-dropdown-rotate-start,
		&.ct-dropdown-rotate-end {
			> i {
				&:before,
				&:after {
					transition: all 0.2s ease;
				}
			}
		}

		&.ct-dropdown-rotate,
		&.ct-dropdown-rotate-end {
			> i {
				&:before {
					transform: translate(3px, 0) rotate(-45deg);
				}

				&:after {
					transform: translate(0px, 0) rotate(45deg);
				}
			}
		}
	}
}