@import '../variables';

@mixin search-table() {
  .search-table {
    > div {
      width: 100%;
      .scroll-container {
        height: 100%;
        .icon {
          text-align: center;
        }

      }
      .header-row.row {
        overflow: hidden;
        background: mat-color($accent, darker);
        color: mat-color($accent, darker-contrast);
        height: 100%;
        > div:first-child {
          padding-left: 8px;
        }
        > div {
          flex: 1 1 23%;
          min-width: 23%;
          max-width: 23%;
          box-sizing: border-box;
          word-wrap: break-word;
          &.icon {
            flex: 1 1 8%;
            min-width: 8%;
            max-width: 8%;
            box-sizing: border-box;
          }
        }
      }
    }
    .row {
      overflow-x: auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
      justify-content: flex-start;
      height: fit-content;
      width: 100%;
      &.sm > div {
        flex: 1 1 auto;
        &:first-child {
          padding-left: 0px;
        }
      }
      > div:first-child {
        padding-left: 8px;
      }
      > div {
        padding: 10px 0;
        flex: 1 1 22%;
        box-sizing: border-box;
        text-transform: capitalize;
        &.icon {
          flex: 1 1 8%;
          min-width: 8%;
          max-width: 8%;
          box-sizing: border-box;
        }

      }
      &:hover {
        cursor: pointer;
        background: mat-color($mat-gray, 200);
      }
    }
  }
}