@import '@angular/material';

// Table mixin
// Use theme to manage colors on Table component
@mixin mic-table-override($theme) {
  $primary: map-get($theme, primary);
  $is-dark: map-get($theme, is-dark);
  $accent: map-get($theme, accent);

  table.mat-mdc-table {
    border: 1px solid transparent;
    &:focus {
      outline: none;
      border-color: map-get($primary, A400);
      border-width: 1px !important;
    }
  }

  .table-column-selector-placeholder {
    @if $is-dark {
      border: dotted 2px $mic-text-colors-normal-light;
    } @else {
      border: dotted 2px $mic-brand-colors-grey;
    }
  }

  .mat-mdc-cell.mat-mdc-table-sticky:not(.mat-column-table-selector):not(.mat-column-table-menu) {
    border-right: 1px solid rgba(0, 0, 0, 0.12);

    @if $is-dark {
      border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    &:focus {
      border-right: map-get($primary, A400) solid 2px;

      @if $is-dark {
        border-right: map-get($mic-dark-blue, A400) solid 2px;
      }
    }
  }

  .mat-mdc-row.highlight {
    td:focus {
      box-shadow: -2px -2px 0px #fff inset, 2px -2px 0px #fff inset, -2px 2px 0px #fff inset, 2px 2px 0px #fff inset;
    }
  }

  td {
    border: 1px solid transparent;
  }

  td:focus {
    outline: 2px solid transparent;
    outline-offset: 4px;
    box-shadow: -2px -2px 0px map-get($primary, A400) inset, 2px -2px 0px map-get($primary, A400) inset,
      -2px 2px 0px map-get($primary, A400) inset, 2px 2px 0px map-get($primary, A400) inset;
  }

  .group > td {
    border-left: 6px solid map-get($accent, A400);
  }

  .group-columns {
    th {
      border-right: 2px solid rgba(0, 0, 0, 0.12);

      @if $is-dark {
        border-right: 2px solid rgba(255, 255, 255, 0.12);
      }
    }
  }

  .table-dragger mat-icon {
    &:hover {
      background-color: map-get($primary, 50);
      border-radius: 50%;
    }
  }

  tr.clickable:not(.mat-mdc-header-row):hover td {
    @if $is-dark {
      background-color: map-get($primary, A700) !important;
    } @else {
      background-color: map-get($primary, 50) !important;
    }
  }
}
