[class*="fizz-table"] {
  --heading-col-width: 150px;
  width: 100%;
  border-spacing: 0;
}

[class*="fizz-table"] tbody tr,
[class*="fizz-table"] thead tr {
  position: relative;
  background-color: $color-background-surface;
}

@media (max-width: $breakpoint-m) {
  [class*="fizz-table"]:not(.fizz-table-matrix):not(.fizz-table-compact):not(.fizz-table-cell-borders):not(.fizz-table-unresponsive) tbody tr:first-of-type td:first-of-type {
    border-top: $border-width-thin solid $color-border-default;
  }

  .fizz-table-condensed:not(.fizz-table-unresponsive) td:first-of-type {
    border-top: $border-width-thin solid $color-border-default;
  }
  .fizz-table-condensed tr:last-of-type td:last-of-type {
    border-bottom: $border-width-thin solid $color-border-default;
  }
}

.fizz-table:not(.fizz-table-unresponsive) tbody tr:not(.fizz-is-hidden) {
  display: block;
}

.fizz-table:not(.fizz-table-cell-borders):not(.fizz-table-condensed) td:first-of-type {
  padding-top: $spacing-16;
}

.fizz-table:not(.fizz-table-cell-borders):not(.fizz-table-condensed) td:last-of-type {
  border-bottom: $border-width-thin solid $color-border-default;
  padding-bottom: $spacing-16;
}

.fizz-table-condensed:not(.fizz-table-cell-borders) tbody tr:first-of-type td:first-of-type {
  padding-top: $spacing-4;
}

.fizz-table-bordered tr:last-of-type td:last-of-type {
  border-bottom: 0;
}

.fizz-table-bordered tr:last-of-type td {
  border-bottom: 0;
}

[class*="fizz-table"] th,
[class*="fizz-table"] caption {
  vertical-align: bottom;
  font-weight: $font-weight-semibold;
}

[class*="fizz-table"] th:not(.fizz-text-right):not(.fizz-text-center),
[class*="fizz-table"] caption {
  text-align: left;
}

.fizz-table:not(.fizz-table-unresponsive) th {
  display: none;
}

.fizz-table th, 
.fizz-table td,
.fizz-table caption {
  padding: $spacing-8 $spacing-16;
  font-size: inherit;
  line-height: inherit;
}

.fizz-table caption {
  padding: $spacing-16;
  background-color: $color-background-surface;
}

.fizz-table-condensed th, 
.fizz-table-condensed td,
.fizz-table-condensed caption {
  padding: $spacing-4 $spacing-8;
  font-size: $text-small-font-size;
  line-height: $text-small-line-height;
}

.fizz-table:not(.fizz-table-unresponsive) tbody tr:not(.fizz-is-hidden) td {
  display: flex;
  align-items: flex-start;
}

.fizz-table:not(.fizz-table-unresponsive) td[data-label]:before {
  content: attr(data-label);
  font-weight: $font-weight-semibold;
  min-width: var(--heading-col-width);
  text-align: left;
}

.fizz-table td[data-label].fizz-align-content-start:before {
  align-self: flex-start;
}

.fizz-table-menu {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 30px;
  height: auto;
  background-color: inherit;
}

.fizz-table-menu .fizz-popover {
  display: none;
  position: absolute;
  top: $spacing-32;
  right: 0;
  z-index: $elevation-popover;
}

@media (max-width: $breakpoint-m) {
  .fizz-has-table-menu > td:first-of-type {
    padding-right: 4rem;
  }
}

.fizz-icon-button-small.fizz-is-active + .fizz-popover {
  display: block;
}

.fizz-table span + span {
  margin-left: $spacing-8;
}

.fizz-table-bordered {
  border: $border-width-thin solid $color-border-default;
  border-collapse: collapse;
}

.fizz-table-cell-borders th:first-of-type, 
.fizz-table-cell-borders td:first-of-type {
  border-top: $border-width-thin solid $color-border-default;
}
.fizz-table-cell-borders {
  border-bottom: $border-width-thin solid $color-border-default;
}

.fizz-table-matrix {
  border: $border-width-thin solid $color-border-default;
  width: auto;
}

.fizz-table-matrix th,
.fizz-table-matrix td {
  font-size: $text-small-font-size;
  line-height: $text-small-line-height;
}

.fizz-table-matrix td {
  border-bottom: 0;
}

.fizz-table-matrix th {
  padding: $spacing-8 $spacing-16;
  border-bottom: $border-width-thin solid $color-border-default;
}

.fizz-table-matrix td {
  padding: $spacing-4 $spacing-16;
}

.fizz-table-matrix tbody tr:first-of-type td {
  padding-top: $spacing-12;
}

.fizz-table-matrix tbody tr:last-of-type td {
  padding-bottom: $spacing-12;
}

.fizz-table-matrix th:nth-of-type(n+2),
.fizz-table-matrix td:nth-of-type(n+2) {
  text-align: center;
}

.fizz-table-matrix th:not(:last-child),
.fizz-table-matrix td:not(:last-child) {
  border-right: $border-width-thin solid $color-border-default;
}

.fizz-table-compact {
  background-color: $color-background-surface;
}

.fizz-table-compact tfoot {
  font-size: $text-large-font-size;
  line-height: $text-large-line-height;
}

.fizz-table-compact tfoot td {
  white-space: nowrap;
}

.fizz-table-compact th,
.fizz-table-compact td {
  padding: $spacing-4 $spacing-16;
  vertical-align: top;
}

.fizz-table-compact .fizz-align-right {
  text-align: right;
}

.fizz-table-compact th:first-child,
.fizz-table-compact td:first-child {
  padding-left: 0;
}

.fizz-table-compact th:last-child,
.fizz-table-compact td:last-child {
  padding-right: 0;
}

.fizz-table-align-top tbody td {
  vertical-align: top;
}

.fizz-table-unresponsive {
  font-variant-numeric: tabular-nums;
}

.fizz-table-unresponsive th,
.fizz-table-unresponsive tbody td {
    display: table-cell;
    border-bottom: $border-width-thin solid $color-border-default;
}

.fizz-table-unresponsive thead tr:not(.fizz-is-hidden),
.fizz-table-unresponsive tbody tr:not(.fizz-is-hidden) {
  display: table-row;
}

@media (max-width: calc(#{$breakpoint-m} - 1px)) {
  .fizz-row-select td:not(:first-child) {
    margin-left: $spacing-32;
  }
  .fizz-row-select tr {
    position: relative;
  }
  .fizz-row-select td:first-child {
    position: absolute;
    top: 0;
    bottom: 0;
    border-bottom: $border-width-thin solid $color-border-default;
  }
  .fizz-row-select td:first-child .fizz-checkbox {
    position: relative;
    margin-top: .225em;
  }
  .fizz-row-select tbody tr:first-child td:nth-of-type(2) {
    border-top: $border-width-thin solid $color-border-default;
  }
  .fizz-row-select td:nth-of-type(2) {
    padding-top: $spacing-16;
  }
}

@media (min-width: $breakpoint-m) {
  
  .fizz-table {
    font-variant-numeric: tabular-nums;
  }

  .fizz-table:not(.fizz-table-unresponsive) th,
  .fizz-table:not(.fizz-table-unresponsive) tbody tr:not(.fizz-is-hidden) td {
    display: table-cell;
    border-bottom: $border-width-thin solid $color-border-default;
  }

  .fizz-table:not(.fizz-table-unresponsive) thead tr:not(.fizz-is-hidden),
  .fizz-table:not(.fizz-table-unresponsive) tbody tr:not(.fizz-is-hidden) {
    display: table-row;
    margin: 0;
  }
  
  .fizz-table tr {
    border-bottom: $border-width-thin solid $color-border-default;
  }

  .fizz-table th, 
  .fizz-table td {
    padding: $spacing-16 $spacing-24;
  }

  .fizz-table caption {
    padding: $spacing-16 $spacing-24;
    margin-bottom: 0;
  }

  .fizz-table-condensed th, 
  .fizz-table-condensed td,
  .fizz-table-condensed caption {
    padding: $spacing-4 $spacing-8;
  }

  .fizz-table-bordered caption,
  .fizz-table-cell-borders caption {
    border: solid $color-border-default;
    border-width: $border-width-thin $border-width-thin 0 $border-width-thin;
  }

  .fizz-table-cell-borders {
    border-bottom: 0;
  }
  
  .fizz-table:not(.fizz-table-condensed) td:first-of-type {
    border-top: 0;
    padding-top: $spacing-16;
  }
  
  .fizz-table:not(.fizz-table-condensed) td:last-of-type {
    padding-bottom: $spacing-16;
  }

  .fizz-table td:before {
    display: none;
  }
  
  .fizz-table th.fizz-align-right,
  .fizz-table td.fizz-align-right {
    text-align: right;
  }
  
  .fizz-table-highlight-rows tbody tr:hover td {
    background-color: $color-background-highlight;
    position: relative;
  }

  .fizz-table-menu {
    position: relative;
    top: auto;
    right: auto;
  }
  
  .fizz-table-menu .fizz-popover {
    display: none;
    position: absolute;
    top: $spacing-32;
    right: 0;
  }

  .fizz-table:not(.fizz-table-bordered):not(.fizz-table-cell-borders) td:first-of-type {
    border-top: none;
  }

  .fizz-table-cell-borders th, 
  .fizz-table-cell-borders td {
    border: solid $color-border-default;
    border-width: 0 $border-width-thin $border-width-thin 0;
  }
  .fizz-table-cell-borders tr:first-of-type th {
    border-top-width: $border-width-thin;
  }
  .fizz-table-cell-borders th:first-of-type,
  .fizz-table-cell-borders td:first-of-type {
    border-left-width: $border-width-thin;
  }
  .fizz-table tr:first-of-type th {
    border-top: $border-width-thin solid $color-border-default;
  }
  .fizz-row-select td:first-child {
    position: relative;
  }
  .fizz-row-select .fizz-checkbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.fizz-row-open + .fizz-is-hidden {
  display: table-row !important;
}