$element_h: 45px;
$element_p: 0 20px;
$element_bw: 2px;
$element_bc: #f3f3f3;

// Select default state
select {
	appearance: none;
	width: 100%;
	color: inherit;
	height: $element_h;
	padding: $element_p;
	border-style: solid;
	border-width: $element_bw;
	border-color: $element_bc;
	cursor: pointer;
	border-radius: initial;
	background: transparent;

	&:focus {
		outline: none;
	}
}

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

	// Input
	.selectize-input {
		display: flex;
		position: relative;
		height: $element_h;
		padding: $element_p;
		border-style: solid;
		border-width: $element_bw;
		border-color: $element_bc;
		background: #ffffff;
		cursor: pointer;
		overflow: hidden;

		> * {
			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
	.selectize-dropdown {
		position: absolute;
		z-index: 20;
		background: #fff;
		box-shadow: 0 20px 29.4px 0.6px rgba(0, 0, 0, 0.1);

		.selectize-dropdown-content {
			max-height: calc(#{$element_h} * 7);
			overflow-x: hidden;
			overflow-y: auto;

			> * {
				display: flex;
				align-items: center;
				height: $element_h;
				padding: $element_p;
				cursor: pointer;
				white-space: nowrap;

				&.active {
					background: rgba(0, 0, 0, 0.03);
				}

				&.selected {
					color: #fff;
					background: #89be61;
				}

				> .highlight {
					font-weight: bold;
				}
			}
		}
	}

	// Input arrows
	.selectize-input {
		> i {
			position: absolute;
			z-index: 2;
			top: calc(50% - 3.5px);
			right: 15px;
			width: 10px;
			height: 7px;

			&:before,
			&:after {
				position: absolute;
				content: '';
				width: 2px;
				height: 7px;
				background: #808080;
				border-radius: 2px;
			}

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

			&:after {
				transform: translate(6px, 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(6px, 0) rotate(-45deg);
				}

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

		&:after {
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			content: '';
			background: inherit;
			height: 100%;
			width: 40px;
			box-shadow: -5px 0px 10px 0px #fff;
		}
	}
}