$table-background-color: var(--color-white) !default;
$table-color: var(--color-black) !default;
$table-border-color: createColor(#dbdbdb) !default;
$table-border-width: 1px !default;
$table-head-border-width: 1px 0 2px !default;
$table-body-border-width: 0 0 1px !default;
$table-font-size: calculateRem(16) !default;
$table-padding: calculateRem(8) calculateRem(10) !default;
$table-hover: createColor(#f9f9f9) !default;
$table-stripe: $table-hover !default;
$table-small-padding: calculateRem(4) calculateRem(8) !default;

.table {
  --background-color: #{$table-background-color};
  --font-color: #{$table-color};
  --border-color: #{$table-border-color};
  --border-width: #{$table-border-width};
  --font-size: #{$table-font-size};
  --padding: #{$table-padding};

  --hover-background-color: #{$table-hover};
  --stripe-background-color: #{$table-stripe};

  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%;

  tr {
    background-color: var(--background-color);
    color: var(--font-color);
  }

  th, td {
    --border-width: #{$table-body-border-width};
    border-color: var(--border-color);
    border-style: solid;
    border-width: var(--border-width);
    font-size: var(--font-size);
    padding: var(--padding);
  }

  thead th {
    --border-width: #{$table-head-border-width};
  }

  tr:last-child td {
    border-bottom-width: 0;
  }

  &.is-bordered {
    th, td {
      --border-color: #{$table-border-color};
      --border-width: #{$table-border-width};
    }

    tr:last-child td {
      border-bottom-width: var(--border-width);
    }
  }

  &.is-borderless {
    th, td {
      border: none;
    }
  }

  &.has-outline {
    border: var(--border-width) solid var(--border-color);
  }

  &.is-hoverable {
    tbody tr:hover {
      --background-color: var(--hover-background-color);
    }
  }

  &.is-striped {
    tbody tr:nth-child(odd) {
      --background-color: var(--stripe-background-color);
    }
  }

  &.is-striped-even {
    tbody tr:nth-child(even) {
      --background-color: var(--stripe-background-color);
    }
  }

  &.is-small {
    th, td {
      --padding: #{$table-small-padding};
    }
  }
}

.is-table-container {
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  width: 100%;
}