@use '@angular/material' as mat;
@mixin sc-mat-overrides-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $success: map-get($theme, success);
  $warning: map-get($theme, warning);
  $danger: map-get($theme, danger);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $scForeground: map-get($theme, sc-foreground);
  $scBackground: map-get($theme, sc-background);

  //? Using a color value for the app background from our custom theme color map
  .mat-app-background {
    background-color: map-get($scBackground, main-bg) !important;
  }

  //*
  //* CDK Drag & Drop
  //*

  .cdk-drag-preview {
    color: mat.get-color-from-palette($foreground, text);
    border: 0;

    &.bg-card {
      background-color: mat.get-color-from-palette($background, card);
    }
  }


  //*
  //* Chips
  //*

  .mat-chip.mat-chip-selected {
    // &.mat-primary {
    //   background: mat.get-color-from-palette($primary, 500);
    //   color: mat.get-contrast-color-from-palette($primary, 500);
    // }

    &.mat-success {
      background: mat.get-color-from-palette($success, 500);
      color: mat.get-contrast-color-from-palette($success, 500);
    }
  
    &.mat-warning {
      background: mat.get-color-from-palette($warning, 500);
      color: mat.get-contrast-color-from-palette($warning, 500);
    }
    
    &.mat-danger {
      background: mat.get-color-from-palette($danger, 500);
      color: mat.get-contrast-color-from-palette($danger, 500);
    }
  }

  //*
  //* Lists
  //*

  .mat-list-item-active {
    background: mat.get-color-from-palette($background, "hover");
  }

  //*
  //* Dialog
  //*

  .mat-dialog-title {
    border-color: mat.get-color-from-palette($foreground, divider);
  }

  .mat-dialog-actions {
    border-color: mat.get-color-from-palette($foreground, divider);
  }

  //*
  //* Tabs
  //*


  .mat-tab-group--sticky-header {
    .mat-tab-header {
      background-color: mat.get-color-from-palette($background, card);
    }
  }
}