// Default:
.Table {
  border-collapse: collapse;
  margin-bottom: 1rem;
  text-align: left;
  width: 100%;

  td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid map-deep-get($colors-render, 'background', 'lighter');
  }

  th {
    padding: 0.75rem;
    vertical-align: bottom;
    border-bottom: 1px solid map-deep-get($colors-render, 'background', 'lighter');
    background-color: white;
  }
}

// Fixed the header on top during vertical scrolling:
.Table--stickyHeader {
  thead {
    th {
      position: sticky;
      top: 0;
      z-index: map-get($zindexs, 'positive');
    }
  }
}

// Striped:
.Table--striped {
  tbody {
    tr:nth-of-type(odd) {
      background-color: map-deep-get($colors-render, 'background', 'lightest'); //N20  // rgba(0,0,0,.05);
    }
  }
}
/* stylelint-disable no-descending-specificity */

// Bordered:
.Table--bordered {
  border-width: 1px;
  border-color: map-deep-get($colors-render, 'border', 'default');
  border-radius: 4px;
  border-style: solid;

  th:not(:first-child),
  td:not(:first-child){
    border-left: 1px solid map-deep-get($colors-render, 'border', 'default');
  }
}

// Hoverable:
// Important: Put the hover color into `td` and `th`
.Table--hoverable {
  tbody tr:hover {
    td,
    th {
      background-color: map-deep-get($colors-render, 'background', 'opaline'); //N900
      color: map-deep-get($colors-render, 'text', 'dark');
    }
  }
}

// Sizes:
// narrow | small
.Table--narrow {
  // reduce the padding of table cells
  th,
  td {
    padding: 0.5rem;
  }
}

.Table--small {
  // reduce font size
  // reduce the padding of table cells
  th,
  td {
    padding: 0.25rem;
  }
}

// Layout:
// https://www.w3schools.com/cssref/pr_tab_table-layout.asp
.Table--layoutFixed {
  table-layout: fixed;
}