@use "sass:color";
@use "../import/variables";
@use "../import/blueprints";
@use "../import/mixins";

.table-batches {margin-bottom:20px;
  .apply-button {@extend %iconButton;line-height:40px;border-radius:50%;margin-left:8px;}
}
.view-table {position: relative; margin:0 0 40px 0;
  .loading-placeholder { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 32px; background: color.adjust(#fff, $alpha: -0.3);
    .loading-indicator {@extend %loadingIndicator;height:64px;top:0;padding-left:68px; margin-top:25px;
      div {background: variables.$grey4;}
    }
  }
  .view-table-col {overflow:hidden;text-overflow:ellipsis;white-space: nowrap;padding-right:7px;
    .action-container {display:flex;color: variables.$color1;
      &:hover {text-decoration:underline;}
      .action-icon {flex:0 0 auto;position:relative;top:-1px;
        + .label {margin-left:8px;}
      }
      .label {flex:1 0 auto;}
    }
  }
  .view-table-head {display:flex;padding:10px;border-bottom:1px solid variables.$grey5;align-items:center;
    .view-table-head-columns {display:flex;flex:1 0 auto;padding:0 15px 0 20px;font-size:0.75rem;line-height:1.1em;letter-spacing:0.06em;text-transform: uppercase;
      .view-table-col {
        &.sortable {cursor: pointer;
          .icon {font-size:0.75rem;line-height:1.1em;}
        }
        &.sorted { color: variables.$color1b;}
      }
    }
  }

  .view-table-row {display:flex;align-items:center;padding:0 10px;@include mixins.transition(all 300ms);border-bottom:1px solid variables.$grey5;
    &:hover {background: variables.$grey1;}
    &.has-children {border-left:1px solid variables.$grey5;}
    &.clickable {cursor:pointer;}
    .view-table-row-columns {display:flex;flex:1 1 auto;min-width:0;text-overflow: ellipsis;padding:10px 15px 10px 20px;}
    &.active {background: variables.$grey1;
      &.selected {background: variables.$grey1;}
    }
    &.selected {background: color.adjust(variables.$color1, $alpha: -0.85);}
  }
}

.view-table-list-row {
  .view-table-row {
    border-top: 1px solid variables.$grey5;
    margin-top: -1px; padding-top: 1px;
    .view-table-list-expand-icon {
      width: 16px;
      margin-right: 10px;
    }
  }
  .view-table-list-row-children {margin-left:16px;
    &.has-children { position:relative;
      .view-table-row {border-left:1px solid variables.$grey5;}
    }
  }
}

.view-table-pagination {display: flex;justify-content: space-between;font-weight:600;font-size:0.875rem;line-height:1.1em;align-items: center;flex-wrap: wrap;margin:-10px 0 30px 0;
  .pagination-nav {display: flex;margin:10px -5px;
    .pagination-nav-item {min-width:30px;line-height:30px;border-radius:15px;text-align:center;margin: 0 5px;padding:0 7px;
      &.active {background-color: variables.$color1;color:#fff;}
      &.button {cursor: pointer;background: variables.$grey1;transition:all .2s;
        &:hover { background: variables.$grey5;}
      }
      &.disabled {}
      &.number {cursor: pointer;}
    }
  }
  .pagination-select {display:flex;align-items: center;margin:10px auto 10px 0;
    .label {margin-right:20px;}
  }
}