@use '_variables' as *; @use '_mixins' as *; $ng-select-highlight: pvar(--mainColor); $ng-select-primary-text: pvar(--mainForegroundColor); // $ng-select-disabled-text: #f9f9f9 !default; $ng-select-border: $input-border-color; // $ng-select-border-radius: 4px !default; $ng-select-bg: pvar(--mainBackgroundColor); // Cannot use a CSS variable as the default them use darken on this variable $ng-select-selected: lighten($main-color, 40%); // $ng-select-selected-text: $ng-select-primary-text !default; $ng-select-marked: pvar(--mainColorLightest); // $ng-select-marked-text: $ng-select-primary-text !default; $ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); $ng-select-placeholder: pvar(--greyForegroundColor); $ng-select-height: 30px; $ng-select-value-padding-left: 15px; $ng-select-value-font-size: $form-input-font-size; // $ng-select-value-text: $ng-select-primary-text !default; // $ng-select-dropdown-bg: $ng-select-bg !default; // $ng-select-dropdown-border: $ng-select-border !default; // $ng-select-dropdown-optgroup-text: rgba(0, 0, 0, 0.54) !default; // $ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default; // $ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default; // $ng-select-dropdown-option-text: rgba(0, 0, 0, 0.87) !default; $ng-select-dropdown-option-disabled: pvar(--greyForegroundColor); $ng-select-input-text: pvar(--mainForegroundColor); @import '@ng-select/ng-select/scss/default.theme'; .ng-select { font-size: $ng-select-value-font-size; line-height: $form-input-line-height; &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { border-color: $ng-select-border !important; } } .ng-input > input { color: pvar(--inputForegroundColor) !important; } .ng-dropdown-panel .ng-dropdown-panel-items .ng-option { &:not(.ng-option-marked, .ng-option-selected) { color: pvar(--mainForegroundColor); background-color: pvar(--mainBackgroundColor); } } .ng-select-container { background-color: pvar(--inputBackgroundColor); } .ng-arrow-wrapper { @include padding-right(12px); } .ng-arrow { border-color: #000 transparent transparent !important; } &.ng-select-opened .ng-arrow { border-color: transparent transparent #000 !important; } &.ng-select-single .ng-value-container .ng-value { color: pvar(--inputForegroundColor); .ng-value-label { display: flex; align-items: center; } } &.ng-select-multiple .ng-select-container .ng-value-container { @include padding-left(12px); .ng-value { @include margin-left(12px); background-color: pvar(--mainColorLightest); .ng-value-icon { border: 0 !important; } } } }