@use 'sass:map';

@use "@angular/material" as mat;
@use '../global/index' as global;
@use '../themes/index' as themes;

@mixin override-color($theme) {
  $-theme: map.get($theme, theme);

  .mat-drawer-container {
    @if $-theme == "dark" {
      .mat-drawer-backdrop.mat-drawer-shown {
        background: rgba(black, 0.7);
      }
    }

    @if $-theme == "light" {
      background-color: transparent;
    }

    .mat-drawer {
      @if ($-theme == "dark") {
        background: themes.dark-color-overlay(2);
      } @else if $-theme == "light" {
        background: map.get(map.get($theme, background), background);
      }
    }
  }
}

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

  .mat-drawer-container {
    background: transparent;

    .mat-drawer-content {
      background: transparent;
    }

    .mat-sidenav {
      .mat-mdc-nav-list .mdc-list-item__primary-text {
        display: flex;
      }
    }
  }
}