@use 'sass:color';
@use '../theme.scss' as *;

$verticalMargin: 1em;
$horizontalMargin: 0;
$margin: $verticalMargin $horizontalMargin;
$borderWidth: 1px;
$tableBorderColor: #d7dae2;
$border: $borderWidth solid $tableBorderColor;

$borderCollapse: separate;
$borderSpacing: 0;
$textAlign: left;

$tableFontColor: #2c3e50;
$tableFontSize: 13px;

// Row
$rowBorder: 1px solid $borderColor;
// Cell
$cellVerticalPadding: relativePx(8);
$cellHorizontalPadding: relativePx(8);

$cellPadding: $cellVerticalPadding $cellHorizontalPadding;
$cellTextAlign: inherit;

$headerBackgroundColor: #eee;
// $headerBackgroundColor: #e5e9f2;
$tableBorderRadius: 1em;
.table-title {
  background-color: color.adjust($headerBackgroundColor, $lightness: 5%);
  padding: 10px 20px;
}
table.be-table {
  width: 100%;
  text-align: $textAlign;
  background-color: $background;
  margin: $margin;
  // border: $border;
  color: $tableFontColor;
  font-size: $tableFontSize;
  border-collapse: $borderCollapse;
  border-spacing: $borderSpacing;
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
  &.labeled {
    margin-top: 0;
  }
  thead {
    tr {
      th {
        cursor: auto;
        background: $headerBackgroundColor;
        text-align: inherit;
        color: rgba(0, 0, 0, 0.87);
        font-weight: bold;
        padding: $inputPadding;
        vertical-align: inherit;
        text-transform: none;
        border-bottom: $border;
        white-space: nowrap;
        &:first-child {
          border-left: none;
        }
      }
    }
  }
  &.structured {
    tr {
      th,
      td {
        border-left: 0 solid $tableBorderColor;
        border-right: $border;
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  tr {
    td {
      padding: $inputPadding;
      text-align: $cellTextAlign;
      border-bottom: $border;
      line-height: $inputLineHeight;
      &.label {
        background-color: $headerBackgroundColor;
      }
    }
    th,
    td {
      &:first-child {
        border-left: none;
      }
      &.disabled {
        color: #f2f2f2;
        pointer-events: none;
      }
    }
    &:first-child td {
      border-top: none;
    }
  }
  &.border {
    border: $border;
    tr {
      th,
      td {
        border-left: $border;
        &:first-child {
          border-left: none;
        }
      }
      &:last-child td {
        border-bottom: none;
      }
    }
    tfoot {
      tr td {
        border-top: $border;
      }
    }
    border-radius: 14px;
    overflow: hidden;
  }
  &.selection {
    tr {
      &:hover {
        background-color: #f2f2f2;
      }
      &.select {
        background-color: $lightPrimary;
      }
    }
  }
  &.striped {
    &.odd {
      tr:nth-child(odd) {
        background-color: #f2f2f2;
      }
    }
    &.even {
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    }
  }
  //.be-input, .be-select-box, .be-switch, .be-button {
  //  font-size: 0.8em;
  //}
  [class*='align-left'] {
    text-align: left;
  }
  [class*='align-center'] {
    text-align: center;
  }
  [class*='align-right'] {
    text-align: right;
  }
  [class*='align-top'] {
    vertical-align: top;
  }
  [class*='align-middle'] {
    vertical-align: middle;
  }
  [class*='align-bottom'] {
    vertical-align: bottom;
  }

  &.divide {
    &-two td {
      width: calc(100% * 0.5);
    }
    &-three td {
      width: calc(100% / 3);
    }
    &-four td {
      width: calc(100% / 4);
    }
    &-five td {
      width: calc(100% / 5);
    }
    &-six td {
      width: calc(100% / 6);
    }
    &-seven td {
      width: calc(100% / 7);
    }
    &-eight td {
      width: calc(100% / 8);
    }
    &-nine td {
      width: calc(100% / 9);
    }
    &-ten td {
      width: calc(100% / 10);
    }
    @for $i from 2 through 10 {
      &-#{$i} td {
        width: calc(100% / $i);
      }
    }
  }
  &.widths {
    tbody tr td.col,
    thead tr th.col {
      @for $i from 1 through 10 {
        &-#{$i} {
          width: $gridPercent * $i * 1%;
        }
      }
    }
  }
  .be-input input {
    padding: $compactPadding;
  }
  .be-select-box {
    select {
      padding: $compactPadding;
    }
    i {
      padding: $compactVerticalPadding + px;
    }
  }
  .be-button {
    padding: $compactPadding;
  }
}