How to change class style of overlay component such as nb-option-list, nb-option of NbAutocompleteComponent, etc?

[aksth]

I want to change the style such as height, padding, justify-content, etc. of the <nb-option-list> and <nb-option> of the auto-complete component. I have a long list and the overlay options list's (<nb-option-list>) height is very large occupying everything below. I am also looking to change the padding and other properties of the individual option (<nb-option>). How can I achieve this? Since the overlay is created outside of the component scope, how can I control its style? Selector such as ::ng-deep is not achieving this too.

<nb-autocomplete
    #auto
    (selectedChange)="onSelectionChange($event)"
    [size]="'large'"
  >
    <nb-option
      *ngFor="let option of filteredOptions$ | async"
      [value]="option.name"
      class="country-select-option"
    >
      <span class="country-option-name">{{ option.name }}</span>
      <span class="country-option-dial">{{ option.dial }}</span>
    </nb-option>
</nb-autocomplete>

I want to change the style by using selector 'country-select-option' such as:

::ng-deep .country-select-option {
      justify-content: space-between;
  }

How to make it work? This can be done if I use the style property directly in the HTML. But is there a CSS/SCSS way?

[aksth]

@outstandyy @yggg

[Tatametheus]

I want to know it too!

[swbradshaw]

I would like to know as well. I really want to expand the width of the nb-options, and don't see any way to do this.

[Tharrington86]

Was this ever resolved? I am trying to accomplish something similar and I am unable to overcome this.

[jesuscc98]

same here.