@use '../common/variables';
@use '../common/mixins';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// variables
// elements
// striped
// hasHover
// dense
// border
// kind (for table cell component)
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// variables
// —————————————————————————————————————————————————————————————————

$padding-vertical: .5rem;
$padding-horizontal: .75rem;
$padding-dense-vertical: .25rem;
$padding-dense-horizontal: .5rem;

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  background-color: variables.$background-paper;

  &_content {
    width: 100%;
  }

  &_head {
    @extend %caption;
    font-weight: bold;
    color: variables.$text-alt;
  }
  
  &_cell {
    padding: $padding-vertical $padding-horizontal;
    text-overflow: ellipsis;

    .buttons {
      justify-content: flex-end;
      flex-wrap: nowrap;
    }
  }
 
  &_pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: $padding-vertical $padding-horizontal;
    border-block-start: variables.$border;
  }

  &_paginationInfo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  &_paginationCount {
    white-space: nowrap;
    color: variables.$text-alt;
  }
  
  &_paginationPages {
    width: fit-content;
  }

  &_paginationPage {
    white-space: nowrap;
    color: variables.$text-alt;
    padding: 0 0.25rem;
  }

  &_rowSelect {
    width: 5rem;
    margin-block-end: 0;

    .input_label {
      display: none;
    }
  }
}

td.table_cell { border-block-start: variables.$border; }
th.table_cell { background-color: rgba(variables.$contrast, 0.05); }

// —————————————————————————————————————————————————————————————————
// striped
// —————————————————————————————————————————————————————————————————

.table-striped {

  .table_row:nth-child(even) {
    background-color: rgba(variables.$contrast, 0.03);
  }
}

// —————————————————————————————————————————————————————————————————
// hasHover
// —————————————————————————————————————————————————————————————————

.table-hasHover {

  .table {
    
    &_head .table_row:hover { background-color: transparent; }
    &_row:hover { background-color: variables.$hover; }
  }
}
// —————————————————————————————————————————————————————————————————
// dense
// —————————————————————————————————————————————————————————————————

.table-dense {

  .table {

    &_cell {
      @extend %caption;
      padding: $padding-dense-vertical $padding-dense-horizontal;
    }
  }

  ~ .table_pagination {
    padding: $padding-dense-vertical;
  }

  th.table_cell {
    @extend %overline;
    font-weight: variables.$weight-bold;
  }
}

// —————————————————————————————————————————————————————————————————
// border
// —————————————————————————————————————————————————————————————————

.table-border {
  border: variables.$border;
  border-radius: variables.$border-radius-md;
  
  ~ .table_pagination {
    border-block-start: 0;
    border-block-end: variables.$border;
    border-inline: variables.$border;
    border-end-start-radius: variables.$border-radius-md;
    border-end-end-radius: variables.$border-radius-md;
  }
}

// —————————————————————————————————————————————————————————————————
// kind (for table cell component)
// —————————————————————————————————————————————————————————————————

.table_cell {

  &-number {
    text-align: right;
  }
  
  &-action {
    text-align: right;
    width: 1%;
    white-space: nowrap;

    .buttons {
      justify-content: flex-end;
    }
  }
}