.select-with-search {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	font-family: inherit;

	.search-input {
		width: 100%;
		padding: 12px 40px 12px 12px;
		border: 1px solid #808080;
		border-radius: 4px;
		box-sizing: border-box;
		cursor: pointer;
		background:
			#fff
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='none' stroke='%23323a45' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E")
			no-repeat right 12px center;
		color: #333;
		font-size: 14px;
		line-height: 1.5;
		transition:
			border-color 0.2s ease-in-out,
			box-shadow 0.2s ease-in-out;

		&:focus {
			border-color: #2684ff;
			box-shadow: 0 0 0 1px #2684ff;
			outline: none;
		}

		&::placeholder {
			color: #808080;
			font-size: 13px;
		}

		&.selected {

			&::placeholder {
				color: #333;
				font-size: 13px;
			}
		}
	}

	.dropdown-menu {
		position: absolute;
		width: 100%;
		border: 1px solid #d9d9d9;
		max-height: 250px;
		overflow-y: auto;
		background: #fff;
		z-index: 1000;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		margin-top: 7px;
		padding-top: 5px;
		padding-bottom: 5px;
		border-radius: 5px;

		.dropdown-option {
			padding: 12px;
			cursor: pointer;
			font-size: 13px;
			color: #333;
			transition: background-color 0.2s ease-in-out;

			&:hover {
				background: #f1f1f1;
			}

			&.selected {
				background: #2684ff;
				color: #fff;
			}

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

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

		.no-options {
			padding: 12px;
			text-align: center;
			color: #808080;
			font-size: 13px;
		}

		.loading {
			padding: 12px;
			text-align: center;
			color: #808080;
			font-size: 13px;
		}
	}
}