@import '~@angular/material/theming';

$gray: (
  50: #ffffff,
  100: #fbfbfb,
  200: #f5f5f5,
  300: #e6e6e6,
  700: #666666,
  800: #3d3d3d,
  900: #212121,
  1000: #000000,
  contrast: (
    10: $dark-primary-text,
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    1000: $light-primary-text
  )
);

@mixin prutech-list-theme($theme, $typography) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $grey-scale: mat-palette($gray, 800, 200, 1000);
  .column-value {
    text-overflow: ellipsis;
    word-break: break-word;
    width: 100%;
  }

  .no-records {
    position: absolute;
    top: 50vh;
    left: 40vw;
    font-size: 32px;
    font-weight: 600;
  }

  .list-wrapper {
    height: 100%;
    overflow: hidden;
    padding: 16px 16px 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    width: 100%;
    .list-container {
      flex: 1 1 calc(100% - 60px);
      min-height: calc(100% - 60px);
      width: 100%;
      .list {
        height: 100%;
        overflow: hidden;
        padding: 16px 16px 0px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
        width: 100%;
        .list-header {
          box-sizing: border-box;
          display: flex;
          width: 100%;
          flex: 1 1 80px;
          min-height: 80px;
          .header-row {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: flex-start;
            height: fit-content;
            width: 100%;
            height: 60px;
            .mat-form-field-wrapper {
              padding-bottom: 0px;
            }
            .title {
              font-size: mat-font-size($typography, headline);
              display: flex;
              margin-right: 20px;
              margin-bottom: 30px;
            }
            .search {
              flex: 1 1 calc(100% - 120px);
              margin-right: 20px;
              .search-icon {

                &:hover {
                  color: mat-color($primary);
                  cursor: pointer;
                }
              }
            }
            .list-sort {
              flex: 0 0 150px;
              margin-right: 10px;
            }
            .filter-icon {
              flex: 0 0 50px;
              min-height: 50px;
              margin-right: 10px;
              font-size: 32px;
              height: 32px;
            }
            .add-action {
              flex: 0 0 120px;
              margin-right: 10px;
              height: 46px;
            }
          }
        }

        &.full {
          height: 100%;
        }

        .list-body {
          width: 100%;
          flex: 1 1 calc(100% - 80px);
          min-height: 0;
          .search-table {
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            justify-content: flex-start;
            width: 100%;
            @include mat-elevation(2);
            .header {
              flex: 1 1 56px;
              min-height: 56px;
            }
            .row {
              height: fit-content;
              box-sizing: border-box;
              padding: 16px 0 16px 32px;
              background-color: mat-color($grey-scale, 50);
              border-bottom: 1px solid mat-color($grey-scale, 300);
              overflow: hidden;
              &:nth-child(even) {
                background-color: mat-color($grey-scale, 100);
              }
              &:hover {
                background: mat-color($grey-scale, 800, .08);
              }
              &.header-row {
                background: mat-color($grey-scale, 100);
                color: mat-contrast($grey-scale, 100);
                border-bottom: solid 2px mat-color($primary, 100);
                font-weight: bold;
              }

              .column-value {
                overflow: hidden;
                text-overflow: ellipsis;
                //padding-right: 8px;
                white-space: nowrap;
                width: calc(100% - 32px);
                //padding-bottom: 16px;
                &.multi-line {
                  white-space: pre-wrap;
                }
              }
            }
            .search-table-body {
              flex: 1 1 calc(100% - 56px);
              min-height: calc(100% - 56px);
              .scroll-container {
                height: 100%;
              }
              .infinite-scroll-container {
                height: 100%;
                overflow-y: auto;
              }
            }
          }
          .card-details {
            overflow-x: hidden;
          }
        }
      }
    }
    .pager-container {
      flex: 1 1 60px;
      min-height: 60px;
      width: 100%;
      .pager {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        justify-content: flex-end;
        width: 100%;
      }
    }
  }
  .add {
    position: fixed;
    bottom: 40px;
    right: 35px;
    z-index: 9999;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    color: #fff;
    box-shadow: 2px 2px 3px #000000;
    padding: 13px;
    display: inline-block;
    margin-left: 15px;
    background-color: mat-color($accent, lighter);
    &:hover {
      background-color: mat-color($accent, darker);
    }
    .addIcon {
      font-size: 32px;
    }
  }
  .card-sort-icon {
    float: right;
  }
}