@use '@angular/material' as mat;
@mixin sc-table-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);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $scBackground: map-get($theme, sc-background);

  // SLIDER
  //
  // should be in its own stylesheet file

  .ngx-slider {
    &-label {
      color: mat.get-color-from-palette($foreground, secondary-text) !important;
      font-size: 10.5px !important;
      line-height: 11.8125px !important;
    }

    &-bubble {
      color: mat.get-color-from-palette($foreground, secondary-text) !important;
    }

    & .ngx-slider-tick {
      background: map-get($scBackground, slider-bar) !important; // mat-color($primary, 700) !important;
    }

    & .ngx-slider-tick.ngx-slider-selected {
      background-color: mat.get-color-from-palette($primary, 700) !important;
    }

    &-bar {
      background-color: map-get($scBackground, slider-bar) !important;
    }

    &-selection {
      background: mat.get-color-from-palette($primary, 500) !important;
    }

    &-pointer {
      background: mat.get-color-from-palette($primary, 500) !important;

      &::after {
        background: mat.get-color-from-palette($primary, 500) !important;
      }

      &.ngx-slider-active {
        &::after {
          background-color: mat.get-color-from-palette($primary, 700) !important;
        }
      }
    }
  }

  // Structure
  .sc-table {
    &-striped tr:nth-child(even) td, &-row-striped td {
      background-color: mat.get-color-from-palette($background, background);
    }
    
    &-container {
      background-color: mat.get-color-from-palette($background, card);

      table tr:hover td {
        background-color: map-get($scBackground, table-row-hover);
      }

      table tr.row-selected td {
        background-color: map-get($scBackground, table-row-hover);
      }

      table tr.selected-row td {
        background-color: map-get($primary, 100);
      }

      // table tr {
      //   &:nth-child(even):hover td {
      //     background-color: map-get($scBackground, table-row-hover-even);
      //   }

      //   &:nth-child(odd):hover td {
      //     background-color: map-get($scBackground, table-row-hover-odd);
      //   }
      // }
    }
  
    &__top-bar {
      border-color: mat.get-color-from-palette($foreground, divider);
    }

    &-filter {
      &-container {
        border-color: mat.get-color-from-palette($foreground, divider);
      }

      &-more-container {
        background: mat.get-color-from-palette($background, hover);
        border-color: mat.get-color-from-palette($foreground, divider);
      }
    }

    &-loading-shade {
      background: rgba(0, 0, 0, 0.32);
    }

    &-subtitle {
      color: mat.get-color-from-palette($foreground, secondary-text);
      font-size: 12px;
    }

    // BG colors
    &--bg-primary {
      background-color: mat.get-color-from-palette($primary, 500) !important;
      color: mat.get-contrast-color-from-palette($primary, 500) !important;

      &.mat-header-cell,
      &.mat-sort-header-arrow,
      .mat-header-cell,
      .mat-sort-header-arrow {
        color: mat.get-color-from-palette($primary, 100) !important;
      }

      .mat-cell {
        background-color: mat.get-color-from-palette($primary, 500) !important;
        color: mat.get-contrast-color-from-palette($primary, 500) !important;
      }
    }
    
    &--bg-accent {
      background-color: mat.get-color-from-palette($accent, 500) !important;
      color: mat.get-contrast-color-from-palette($accent, 500) !important;
      
      &.mat-header-cell,
      &.mat-sort-header-arrow,
      .mat-header-cell,
      .mat-sort-header-arrow {
        color: mat.get-color-from-palette($accent, 100) !important;
      }
      
      .mat-cell {
        background-color: mat.get-color-from-palette($accent, 500) !important;
        color: mat.get-contrast-color-from-palette($accent, 500) !important;
      }
    }

    &--bg-success {
      background-color: mat.get-color-from-palette($success, 500) !important;
      color: mat.get-contrast-color-from-palette($success, 500) !important;
      
      &.mat-header-cell,
      &.mat-sort-header-arrow,
      .mat-header-cell,
      .mat-sort-header-arrow {
        color: mat.get-color-from-palette($success, 100) !important;
      }
      
      .mat-cell {
        background-color: mat.get-color-from-palette($success, 500) !important;
        color: mat.get-contrast-color-from-palette($success, 500) !important;
      }
    }

    &--bg-warning {
      background-color: mat.get-color-from-palette($warning, 500) !important;
      color: mat.get-contrast-color-from-palette($warning, 500) !important;
      
      &.mat-header-cell,
      &.mat-sort-header-arrow,
      .mat-header-cell,
      .mat-sort-header-arrow {
        color: mat.get-color-from-palette($warning, 100) !important;
      }
      
      .mat-cell {
        background-color: mat.get-color-from-palette($warning, 500) !important;
        color: mat.get-contrast-color-from-palette($warning, 500) !important;
      }
    }

    &--bg-danger {
      background-color: mat.get-color-from-palette($danger, 500) !important;
      color: mat.get-contrast-color-from-palette($danger, 500) !important;
      
      &.mat-header-cell,
      &.mat-sort-header-arrow,
      .mat-header-cell,
      .mat-sort-header-arrow {
        color: mat.get-color-from-palette($danger, 100) !important;
      }
      
      .mat-cell {
        background-color: mat.get-color-from-palette($danger, 500) !important;
        color: mat.get-contrast-color-from-palette($danger, 500) !important;
      }
    }

    &-bottom-panel {
      border-color: mat.get-color-from-palette($foreground, divider);
    }
  }

  td.mat-table-sticky:first-child {
    border-color: mat.get-color-from-palette($foreground, divider);
  }

  td.mat-table-sticky:last-child {
    border-color: mat.get-color-from-palette($foreground, divider);
  }

  th.mat-table-sticky-header:first-child {
    border-color: mat.get-color-from-palette($foreground, divider);
  }

  th.mat-table-sticky-header:last-child {
    border-color: mat.get-color-from-palette($foreground, divider);
  }

  // Pagination
  .mat-paginator {
    border-color: mat.get-color-from-palette($foreground, divider);
  }
}

// ? seperate type / color ?
// @mixin sc-card-typography($theme) {
//   .ngx-slider {
//     &-label {
//       font-size: 10.5px;
//       line-height: 11.8125px;
//     }
//   }

//   .sc-table {
//     &-subtitle {
//       color: mat-color($foreground, secondary-text);
//       font-size: 12px;
//     }
//   }
// }