@use "sass:map";
@use '~@angular/material' as mat;

@import "./pagination/ql-pagination.theme";
@import "./../common/base-styles.theme";

@keyframes hourglass-flip {
  0% {
    transform: rotate(0deg) scale(0.5);
  }

  50% {
    transform: rotate(180deg) scale(0.5);
  }

  100% {
    transform: rotate(360deg) scale(0.5);
  }

}

@mixin ql-table-theme($theme, $typo: null, $reverse: false, $overrides: ()) {
  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  $table-values: (
          min-table-height: 30vh,
  );

  $table-values: map.merge($table-values, $overrides);
  @if ($reverse) {
    $primary: map-get($config, accent);
    $ascent: map-get($config, primary);

    $config: map.set($config, primary, $primary);
    $config: map.set($config, ascent, $ascent);
  }

  // Global class for filter menu
  div.cdk-overlay-pane {
    div.mat-menu-panel.filter {
      max-width: none;
      width: 20vw;
    }
  }

  ql-table {
    @include extract-style-map($table-values);

    min-height: var(--min-table-height, map.get($table-values, min-table-height));
    position: relative;

    .overlay {

      width: calc(var(--table-width) * 1px);
      height: calc(var(--table-height) * 1px);
      position: absolute;
      top: 0;
      left: 0;

      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;

      mat-icon {
        fill: mat.get-color-from-palette($primary);
        transform: scale(0.5);
      }

      &.animating {
        background-color: lightgrey;
        opacity: 0.4;

        mat-icon {
          animation:  3s hourglass-flip infinite forwards;
        }
      }
    }

    table {
      min-height: inherit;
      width: 100%;
      display: flex;

      .main {
        flex-flow: column wrap;
        display: flex;
        flex: 1;
      }

      .filter {
        flex: 0;
      }


     @include ql-pagination-theme($theme, $overrides)
    }

    th, td {
      padding: .8rem;
      border-bottom: solid 0.1rem mat.get-color-from-palette($ascent, 50, 0.8);

      @if ($typo != null) {
        font-size: mat.font-size($typo, body-1);
        font-family: mat.font-family($typo);
        font-weight: unset;
      }
    }

    ql-thead {
      tr {
        background-color: mat.get-color-from-palette($primary, 50, 0.5);
      }
    }
  }
}