@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;
$cellWidth: 40px !default;

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

  .mat-mdc-table {
    background: global.switch($-theme, $dark: themes.dark-color-overlay(1), $light: transparent);

    thead {
      background: global.switch($-theme, $dark: themes.dark-color-overlay(12), $light: themes.light-color-overlay(4));
    }

    tbody tr {
      &:hover,
      &:focus-within {
        background: global.switch($-theme, $dark: themes.dark-color-overlay(4), $light: themes.light-color-overlay(1));
      }
    }
  }
}

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

  .mat-mdc-table {
    tbody {
      tr {
        transition: all 250ms ease-in-out;
      }
    }

    &,
    thead,
    thead > tr {
      border-top-left-radius: $shape-radius;
      border-top-right-radius: $shape-radius;
    }

    thead > tr > th {
      &:first-of-type {
        border-top-left-radius: $shape-radius;
      }
      &:last-of-type {
        border-top-right-radius: $shape-radius;
      }
    }

    .mat-mdc-footer-row .mat-mdc-cell {
      padding: 0;
    }

    .actions-cell {
      width: $cellWidth;

      &.double {
        width: $cellWidth * 2;
      }
    }
  }
}