@import "setup";

$vs-state-active-bg: $unmellow-yellow;
$vs-state-active-color: $arsenic;

@import "vue-select/src/scss/vue-select.scss";

.choices-container {
	.v-select {
		width: 100%;
	}

	.vs__selected-options {
		padding-left: 20px;
		padding-right: 20px;
	}

	.vs__dropdown-toggle {
		background-color: rgba(white, 0.1);
		border: 0;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.vs__search {
		color: rgba(white, 0.4);
		font-size: 16px;
		font-weight: 600;
		font-family: $font-poppins;
	}

	.vs__actions {
		padding-right: 20px;
	}

	.vs__open-indicator {
		fill: white;
	
	}

	.vs__selected {
		margin: 0;
		border: 0;

		color: white;
		font-size: 20px;
		font-weight: 600;
		font-family: $font-poppins;
	}

	.vs__dropdown-menu {
		font-size: 16px;
		font-weight: 600;
		font-family: $font-poppins;
		background-color: $eerie-black;
	}

	.vs__dropdown-option {
		color: white;

		&--highlight {
			color: $arsenic;
		}
	}

	.vs__clear {
		display: none;
		pointer-events: none;
	}
}