$grey-300: #e0e0e0;
$grey-400: #bdbdbd;
$app-primary-50: #e3f2fd;
$app-primary-100: #bbdefb;
$app-primary: #2196f3;
$app-primary-700: #1976d2;
$background-color: #ffffff;
$filter-background-color: #fafafa;

$filter-item-size-sm: 120px;
$filter-item-size-md: calc(#{$filter-item-size-sm} * 2); // default
$filter-item-size-lg: calc(#{$filter-item-size-md} * 2);
$filter-item-size-input-range: 360px;

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

.ngx-slider {
  height: 2px !important;
  width: 100%;
  margin: 38px 0 8px !important;

  &-bubble {
    font-size: 14px !important;
  }

  &-label {
    color: rgba(0, 0, 0, 0.6);
    margin-top: -0.25em;
    display: block;
    line-height: 11.8125px;
  }

  // &-selection {
  //   background: $app-primary !important;
  // }

  &-bar-wrapper {
    height: 26px !important;
    margin-top: -18px !important;
    padding-top: 17px !important;
  }

  &-bar {
    height: 2px !important;
  }

  &-tick {
    width: 2px !important;
    height: 2px !important;
    top: 2px !important;
  }

  &-pointer {
    cursor: pointer;
    width: 18px !important;
    height: 18px !important;
    top: -9px !important;
    background: $app-primary !important;
    border-radius: 50% !important;

    &::after {
      content: "";
      width: 8px !important;
      height: 8px !important;
      top: 5px !important;
      left: 5px !important;
      border-radius: 50% !important;
      background: $app-primary !important;
    }

    &.ngx-slider-active {
      &::after {
        background-color: $app-primary-700 !important;
      }
    }
  }
}

table {
  border-collapse: separate !important;
}

// Structure
.sc-table {
  &-striped tr:nth-child(even) td,
  &-row-striped td {
    background-color: #fafafa;
  }

  //? the container arround the whole table
  &-container {
    position: relative;
    min-height: 200px;
    max-height: var(--app-height, 100vh);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: $background-color;

    table tr:hover td {
      background-color: #bbdefb;
    }
  }

  &-pagination.additional-info {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;

    .additional-info__col-start {
      border-top: 1px solid;
      flex: 1;
      padding: $spacer;
      flex: 1 0 300px;
    }

    .mat-paginator {
      flex: 1 0 auto;
    }
  }

  //? the row above the table (including quick filters, filter config button and search field)
  &__top-bar {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid;

    .top-bar {
      &__col-start {
        flex: 1;
        padding: $sc-table-top-bar-spacing-y $sc-table-top-bar-spacing-x;
        overflow: hidden;

        &.--scroll-horizontal {
          overflow-x: auto;
          
          .sc-table-filter__wrapper {
            flex-wrap: nowrap;
            
            &::after {
              content: "";
              flex: 0 0 1px;
            }
          }
        }
      }

      &__col-end {
        flex: 0 0 auto;
        display: flex;
        gap: $grid-gap;
        padding: $sc-table-top-bar-spacing-y $sc-table-top-bar-spacing-x;
        margin-left: auto;
      }
    }

    .filter-actions {
      grid-column-start: 2;
      flex: 0 0 180px;
      max-width: 180px;
      margin-left: auto;
    }

    .search {
      flex: 0 1 240px;
      justify-self: flex-end;
    }
  }

  &-filter {
    &__wrapper {
      display: flex;
      gap: $grid-gap;
      flex-wrap: wrap;
      // overflow: auto;
    }

        &__item {
          --filter-item-size-sm: #{$filter-item-size-sm};
          --filter-item-size-md: #{$filter-item-size-md};
          --filter-item-size-lg: #{$filter-item-size-lg};
    
          display: flex;
          align-items: center;
          // padding: ($grid-gap * 0.5);
          flex: 0 0 var(--filter-item-size-md);
          max-width: var(--filter-item-size-md);
    
          sc-table-filter {
            display: block;
    
            sc-select,
            sc-input {
              min-height: 56px;
            }
          }
    
          .mat-button-toggle {
            &-group {
              margin-top: 2px !important;
            }
    
            &-button {
              height: 49px !important;
            }
          }
    
          &--checkbox {
            flex: 0 0 auto;
            min-height: 56px;
            max-width: $filter-item-size-lg !important;
    
            .mat-checkbox-layout {
              white-space: normal !important;
            }
          }
    
          &--input-range {
            flex: 0 0 $filter-item-size-input-range;
            max-width: none !important;
          }
    
          &--sm {
            flex: 0 0 var(--filter-item-size-sm);
            max-width: var(--filter-item-size-sm);
          }
    
          &--md {
            flex: 0 0 var(--filter-item-size-md);
            max-width: var(--filter-item-size-md);
          }
    
          &--lg {
            flex: 0 0 var(--filter-item-size-lg);
            max-width: var(--filter-item-size-lg);
          }
    
          &--auto {
            flex: 0 0 auto;
            max-width: none;
            min-width: none;
          }
        }

    &__group {
      &:not(.--single):not(.--end) {
        --filter-item-size-sm: calc(#{$filter-item-size-sm} + #{$grid-gap});
        --filter-item-size-md: calc(#{$filter-item-size-md} + #{$grid-gap});
        --filter-item-size-lg: calc(#{$filter-item-size-lg} + #{$grid-gap});

        margin-right: -$grid-gap;
      }

      &.input-group:not(.--single) .filter-group-connector {
        border-right: 0 !important;
        border-radius: 0 !important;
      }

      &:not(.--single):not(.--start):not(.--end) {
        .mat-form-field-appearance-outline .mat-form-field-outline-start {
          border-radius: 0 !important;
        }

        .mat-form-field-appearance-outline .mat-form-field-outline-end {
          border-radius: 0 !important;
        }

        // removing border-right and preserving the borders for :focus and :hover state
        .mat-form-field-appearance-outline:not(.mat-focused)
          .mat-form-field-flex:not(:hover)
          .mat-form-field-outline-end {
          border-right: 0 !important;
        }
      }

      &.--end {
        .mat-form-field-appearance-outline .mat-form-field-outline-start {
          border-radius: 0 !important;
        }
      }
    }

    &--vertical.mat-menu-panel {
      padding: $content-padding !important;
      min-width: calc(#{$content-padding} * 2 + #{$filter-item-size-sm}) !important;
      max-width: calc(#{$content-padding} * 2 + #{$filter-item-size-md} - #{$grid-gap}) !important;

      .mat-menu-content {
        padding: 0 !important;
      }

      .sc-table-filter__item {
        min-width: 145px; // if not set, slider collapses
      }

      .sc-table-filter__item--checkbox {
        flex: 0 0 auto;
        max-width: $filter-item-size-md !important;

        .mat-checkbox-layout {
          white-space: normal !important;
        }
      }
    }

    &-more-container {
      display: flex;
      background: $filter-background-color;
      padding: $card-padding;
      border-bottom: 1px solid;
      padding: $sc-table-top-bar-spacing-y $sc-table-top-bar-spacing-x;
    }

    &-category {
      &-title {
        font-weight: 500;
      }

      &-divier {
        margin-left: -24px !important;
        margin-right: -24px !important;
        margin-top: 24px !important;
        margin-bottom: 24px !important;
      }
    }
  }

  &-quickfilter {
    grid-column-start: 1;
  }

  &-table-container {
    position: relative;
    /*max-height: calc( REMOVED BECAUSE NOT NEEDED
      100% - 114px - 32px
    ); // subtracting table-header-height, table-footer-height & "additional vertical space" of sc-table-filter-container*/
    overflow: auto; //removed for reasons
    height: 100%;
    overflow-anchor: none;
  }

  &-loading-shade {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-loader {
    height: 4px !important;
  }

  &-subtitle {
    color: rgba(black, 0.54);
    font-size: 12px;
  }

  &-img {
    width: 30px;
    max-height: 30px;
    overflow: hidden;
    &:not(:last-child) {
      margin-right: 10px;
    }

    &-rounded {
      border-radius: 50%;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  &-icon {
    width: 24px;
    max-height: 24px;
    overflow: hidden;
    &:not(:last-child) {
      margin-right: 10px;
    }

    &-rounded {
      border-radius: 50%;
    }
  }

  &-cell {
    display: flex;
    align-items: center;
  }

  &-actions {
    display: flex;
    justify-content: flex-end;
  }

  &-align-right > div {
    // justify-content: flex-end;
    text-align: right;
    flex-direction: row-reverse;
  }
  &-align-right .mat-sort-header-arrow {
    margin: 0 6px 0 0 !important;
  }

  // * COMPACT TABLE
  // ? place class "sc-table-compact" on table container
  &-compact {
    .mat {
      &-row {
        height: auto;
      }

      &-column-actions {
        .mat-icon-button {
          width: 32px !important;
          height: 24px !important;
          line-height: 24px !important;
          border-radius: 0;
        }

        // .mat-icon {
        //   width: 18px !important;
        //   height: 18px !important;
        //   font-size: 18px !important;
        // }
      }
    }

    @mixin action-spacing(
      $padding-left: 0px,
      $padding-right: 0px,
      $border-width: 1px,
      $btn-width: 40px,
      $btn-count: 1
    ) {
      width: calc((#{$btn-count} * #{$btn-width}) + #{$border-width}) !important;
      min-width: calc((#{$btn-count} * #{$btn-width}) + #{$border-width}) !important;
      padding-left: $padding-left !important;
      padding-right: $padding-right !important;
    }
    @for $i from 1 through 10 {
      .mat-column-actions-#{$i} {
        @include action-spacing(8px, 8px, 1px, 26px, $i);
      }
    }

    .sc-table-input {
      .mat-form-field-appearance-standard {
        .mat-form-field {
          &-wrapper {
            min-height: auto;
          }

          &-infix {
            padding: 8px 0;
          }

          // &-flex {
          //   align-items: center;
          // }

          &-input-element {
            font-size: 14px;
            line-height: 16px;
            // margin-top: 0;
          }

          &-suffix {
            .mat-icon-button {
              width: 32px !important;
              height: 32px !important;
              line-height: 24px !important;
            }
          }
        }
      }
    }
  }

  &-bottom-panel {
    border-top: 1px solid;
    min-height: 48px;
    flex: 0 0 auto;
    width: 100%;

    .key-value-pairs {
      display: flex;
      gap: $grid-gap;
      padding: $card-padding;
      overflow: auto;

      &__item {
        display: flex;
        flex-direction: column;
        flex: 0 0 240px;
      }

      &__key,
      &__value {
        margin-bottom: 0;
      }

      &.--horizontal {
        .key-value-pairs {
          &__item {
            flex: 0 0 auto;
            flex-direction: row;
            display: flex;
            align-items: baseline;
            gap: 4px;
          }

          &__key,
          &__value {
            flex: 0 0 auto;
          }
        }
      }
    }
  }
}

.sc-table-input {
  align-self: flex-end;
  flex: 1;

  .mat-form-field-appearance-standard {
    .mat-form-field {
      &-wrapper {
        min-height: 48px;
        padding-bottom: 0;
      }

      &-underline {
        bottom: 0;
      }

      &-flex {
        padding-top: 0;
        align-items: center;
      }

      &-infix {
        padding: 1.18em 0;
        border-top: 0;
      }
    }
  }

  input.mat-input-element {
    margin-top: 0 !important;
  }
}

.mat-button-toggle-label-content {
  > sc-icon {
    display: inline-flex;
  }
}

table {
  width: 100%;
}

// Column Widths
.mat-column {
  &-number,
  &-state {
    max-width: 64px;
  }

  &-created {
    max-width: 124px;
  }

  &-icon {
    width: 24px;
  }
}

// .mat-column-actions {
//   min-width: calc(40px + 40px + 16px + 16px + 1px); // buttons + padding (L/R) + border
//   width: calc(40px + 40px + 16px + 16px + 1px);
//   padding: 0 16px !important;
// }

@mixin action-spacing($padding-left: 16px, $padding-right: 16px, $border-width: 1px, $btn-width: 40px, $btn-count: 1) {
  width: calc((#{$btn-count} * #{$btn-width}) + #{$border-width}) !important;
  min-width: calc((#{$btn-count} * #{$btn-width}) + #{$border-width}) !important;
  padding-left: $padding-left !important;
  padding-right: $padding-right !important;
}
@for $i from 1 through 10 {
  .mat-column-actions-#{$i} {
    @include action-spacing(16px, 16px, 1px, 40px, $i);
  }
}

// Rows
.mat-row {
  &:last-child > td {
    border-bottom-width: 0;
  }
}

// Cells
td.mat-cell:first-of-type,
td.mat-footer-cell:first-of-type,
th.mat-header-cell:first-of-type:not(.mat-column-sc-tableLoadingIndicator) {
  padding-left: $card-padding !important;
}

.mat-header-cell,
.mat-cell {
  padding: 4px 8px !important;
}

// Z-index
.mat-header-cell {
  z-index: 98 !important;
}

.mat-header-cell.mat-table-sticky-header {
  z-index: 99 !important;
}

td.mat-table-sticky:first-child {
  border-right: 1px solid;
}

td.mat-table-sticky:last-child {
  border-left: 1px solid;
}

th.mat-table-sticky-header:first-child {
  border-right: 1px solid;
}

th.mat-table-sticky-header:last-child {
  border-left: 1px solid;
}

// Pagination
.mat-paginator {
  border-top: 1px solid;

  &-container {
    padding: 0 $card-padding;
  }
}

@for $i from 1 through 100 {
  .sc-table-line-clamp-#{$i} * {
    display: -webkit-box;

    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}