@use "sass:map";
@use "sass:meta";
@use "@angular/material" as mat;
@use "../global/index" as global;
@use "../themes/index" as themes;

$shape-radius: 8px !default;

@mixin override-color($theme) {

  $color-config: mat.get-color-config($theme);
  // $overlayFn: themes.get-overlay-function($theme);
  $-theme: map.get($theme, theme);

  .mat-mdc-select-panel {
    // background: meta.call($overlayFn, 12);

    background-color: global.switch(
      $-theme,
      $dark: themes.dark-color-overlay(8),
      $light: map.get(map.get($theme, background), app-bar)
    );

    /* .mat-mdc-option.mat-mdc-selected:not(.mat-mdc-option-multiple) {
      background: meta.call($overlayFn, 8);
    }

    .mat-mdc-option:hover:not(.mat-option-disabled),
    .mat-option:focus:not(.mat-option-disabled) {
      background: meta.call($overlayFn, 24);
    } */
  }
}

@mixin override-theme($theme) {
  $color-config: mat.get-color-config($theme);
  @if $color-config != null {
    @include override-color($theme);
  }

  .mat-mdc-select-panel {
    border-radius: $shape-radius;
  }
}