/*
 * Citizen - SRF Filtered Value Filter Select
 * https://starcitizen.tools
*/

@import '../../../../resources/variables.less';

.skin-theme-clientpref-night {
	.select2-dropdown {
		background-color: var( --color-surface-0 );
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-close-mask {
		background-color: var( --color-surface-0 );
	}

	.select2-container--default .select2-selection--single {
		background-color: var( --color-surface-0 );
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: var( --color-base );
	}

	.select2-container--default .select2-selection--single .select2-selection__placeholder {
		color: var( --color-subtle );
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		border-color: @dark-bg-30 transparent transparent transparent;
	}

	.select2-container--default.select2-container--disabled .select2-selection--single {
		background-color: @dark-bg-20;
	}

	.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
		border-color: transparent transparent @dark-bg-30 transparent;
	}

	.select2-container--default .select2-selection--multiple {
		background-color: var( --color-surface-0 );
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
		color: var( --color-subtle );
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		background-color: @dark-bg-20;
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		color: var( --color-subtle );
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
		color: var( --color-base );
	}

	.select2-container--default.select2-container--focus .select2-selection--multiple {
		border: solid 1px var( --color-surface-0 );
	}

	.select2-container--default.select2-container--disabled .select2-selection--multiple {
		background-color: @dark-bg-20;
	}

	.select2-container--default .select2-search--dropdown .select2-search__field {
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--default .select2-results__option[ aria-disabled='true' ] {
		color: var( --color-subtle );
	}

	.select2-container--default .select2-results__option[ aria-selected='true' ] {
		background-color: @dark-bg-20;
	}

	.select2-container--default .select2-results__option--highlighted[ aria-selected ] {
		color: var( --color-emphasized );
		background-color: var( --color-progressive );
	}

	.select2-container--classic .select2-selection--single {
		background-color: @dark-bg-10;
		background-image: linear-gradient( to bottom, var( --color-surface-0 ) 50%, @dark-bg-20 100% );
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--classic .select2-selection--single:focus {
		border: var( --border-width-base ) solid var( --color-progressive );
	}

	.select2-container--classic .select2-selection--single .select2-selection__rendered {
		color: var( --color-base );
	}

	.select2-container--classic .select2-selection--single .select2-selection__placeholder {
		color: var( --color-subtle );
	}

	.select2-container--classic .select2-selection--single .select2-selection__arrow {
		background-color: @dark-bg-20;
		background-image: linear-gradient( to bottom, @dark-bg-10 50%, @dark-bg-30 100% );
		border-left: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--classic .select2-selection--single .select2-selection__arrow b {
		border-color: @dark-bg-30 transparent transparent transparent;
	}

	.select2-container--classic[ dir='rtl' ] .select2-selection--single .select2-selection__arrow {
		border-right: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--classic.select2-container--open .select2-selection--single {
		border: var( --border-width-base ) solid var( --color-progressive );
	}

	.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
		border-color: transparent transparent @dark-bg-30 transparent;
	}

	.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
		background-image: linear-gradient( to bottom, var( --color-surface-0 ) 0%, @dark-bg-20 50% );
	}

	.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
		background-image: linear-gradient( to bottom, @dark-bg-20 50%, var( --color-surface-0 ) 100% );
	}

	.select2-container--classic .select2-selection--multiple {
		background-color: var( --color-surface-0 );
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--classic .select2-selection--multiple:focus {
		border: var( --border-width-base ) solid var( --color-progressive );
	}

	.select2-container--classic .select2-selection--multiple .select2-selection__choice {
		background-color: @dark-bg-20;
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
		color: var( --color-subtle );
	}

	.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
		color: var( --color-base );
	}

	.select2-container--classic.select2-container--open .select2-selection--multiple {
		border: var( --border-width-base ) solid var( --color-progressive );
	}

	.select2-container--classic .select2-search--dropdown .select2-search__field {
		border: var( --border-width-base ) solid @dark-bg-50;
	}

	.select2-container--classic .select2-dropdown {
		background-color: var( --color-surface-0 );
	}

	.select2-container--classic .select2-results__option[ aria-disabled='true' ] {
		color: var( --color-subtle );
	}

	.select2-container--classic .select2-results__option--highlighted[ aria-selected ] {
		color: var( --color-emphasized );
		background-color: var( --background-color-progressive-subtle );
	}

	.select2-container--classic.select2-container--open .select2-dropdown {
		border-color: var( --color-progressive );
	}
}
