$include-core-component-table: true;

table, .#{$table} {
  width: 100%;
  box-sizing: border-box;
}

.#{$table-header-sticky} {
  thead, .#{$thead} {
    th, .#{$th} {
      top: 0;
      position: sticky !important;
      @include th-sticky;
    }
  }
  &.#{$table-borders-horizontal}, &.#{$table-borders}, .#{$table-borders-horizontal}, .#{$table-borders} {
    thead, .#{$thead} {
      .#{$th}, th {
        border-bottom: $table-border;
      }
    }
    tbody, .#{$tbody} {
      tr, .#{$tr} {
        &:first-child {
          .#{$th}, th, .#{$td}, td {
            border-top: 0 none;
          }
        }
      }
    }
  }
}

.#{$table-footer-sticky} {
  tfoot, .#{$tfoot} {
    .#{$th}, th, .#{$td}, td {
      bottom: 0;
      position: sticky !important;
      @include td-sticky;
    }
  }
  &.#{$table-borders-horizontal}, &.#{$table-borders}, .#{$table-borders-horizontal}, .#{$table-borders} {
    tfoot, .#{$tfoot} {
      .#{$th}, th, .#{$td}, td {
        border-top: $table-border;
      }
    }
  }
}

.#{$table-body-sticky} {
  tbody, .#{$tbody} {
    th, .#{$th} {
      left: 0;
      position: sticky !important;
      @include th-sticky;
    }
  }
  &.#{$table-borders-horizontal}, &.#{$table-borders} {
    tbody, .#{$tbody} {
      .#{$th}, th {
        border-right: $table-border;
      }
    }
  }
}

table, .#{$table}, .#{$inline-table} {
  border-spacing: 0;
  background: $table-background;
  text-align: $table-text-align;

  &.#{$table-borders-horizontal} {
    border-bottom: $table-border;
    .#{$td}, td, .#{$th}, th {
      border-top: $table-border;
    }
  }

  &.#{$table-borders-vertical} {
    border-right: $table-border;
    .#{$td}, td, .#{$th}, th {
      border-left: $table-border;
    }
  }

  &.#{$table-borders} {
    border-right: $table-border;
    border-bottom: $table-border;
    .#{$td}, td, .#{$th}, th {
      border-left: $table-border;
      border-top: $table-border;
    }
  }
  &.#{$table-borders-outside} {
    border: $table-border;
  }

  &.#{$table-fixed} {
    table-layout: fixed;
  }

  &.#{$table-ellipsis} {
    table-layout: fixed;
    .#{$td}, td, .#{$th}, th {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  @media (min-width: ($table-mobile-max-width + 1px)) {
    &.#{$table-hoverable-td} {
      tbody, .#{$tbody} {
        td, .#{$td} {
          &:not(.#{$table-un-hover}) {
            &:hover, &.hover {
              background-color: $table-td-bgcolor-hover !important;
              color: $table-td-color-hover !important;
              .#{$table-on-hover} {
                visibility: visible;
              }
            }
          }
        }
      }
    }

    &.#{$table-hoverable-tr} {
      tbody, .#{$tbody} {
        tr, .#{$tr} {
          &:not(.#{$table-un-hover}) {
            &:hover, &.hover {
              td, .#{$td} {
                @include td-hover;
                .#{$table-on-hover} {
                  visibility: visible;
                }
              }
            }
          }
        }
      }
    }
  
    &.#{$table-hoverable-col} {
      overflow: hidden;
      col, .#{$col}, td, .#{$td}, th, .#{$th} {
        position: relative;
        span {
          position: relative;
          z-index: 3;
        }
        &:hover, &.hover {
          &:after {
            background-color: $table-col-bgcolor-hover;
            content: '\00a0'; 
            height: 300vh;  
            left: 0;
            position: absolute;  
            top: -100vh;
            width: 100%;
            z-index: 10;
            pointer-events: none;
          }
        }
      }
    }
  }

  &.#{$table-zebra-odd} {
    .#{$tbody}, tbody {
      .#{$tr}, tr {
        &:nth-child(odd) {
          td, .#{$td} {
            background-color: $table-zebra-bgcolor;
          }
        }
      }
    }
  }

  &.#{$table-zebra-even} {
    .#{$tbody}, tbody {
      .#{$tr}, tr {
        &:nth-child(even) {
          td, .#{$td} {
            background-color: $table-zebra-bgcolor;
          }
        }
      }
    }
  }

  .#{$table-on-hover} {
    visibility: hidden;
  }
  tfoot, .#{$tfoot}, tbody, .#{$tbody} {
    font-size: $table-font-size;
    color: $table-color;
  }
  tbody, .#{$tbody} {
    a.#{$tr}, a.#{$td} {
      color: inherit;
    }
    td:not(.#{$actions}) a:not(.#{$button}) {
      &:hover {
        text-decoration: underline;
      }
    }
    td, .#{$td} {
      a {
        cursor: pointer;
      }
    }
  }
}

.#{$overflow-auto}, .#{$overflow-scroll} {
  table, .#{$table}, .#{$inline-table} {
    &.#{$table-hoverable-col} {
      overflow: visible;
      col, .#{$col}, td, .#{$td}, th, .#{$th} {
        &:hover, &.hover {
          &:after {
            height: 100vh;  
          }
        }
      }
    }
  }
}
td, .#{$td} {
  @include td-style;
  &.#{$disabled} {
    @include td-disabled;
  }
  &.#{$table-td-ellipsis} {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
  }
}
th, .#{$th} {
  @include th-style;
}
tr, .#{$tr} {
  &.#{$disabled} {
    .#{$td}, td {
      @include td-disabled;
    }
  }
}
.#{$table-scroll} {
  overflow-y: auto;
  width: 100%;
}
.#{$table} {
  display: table;
}
.#{$inline-table} {
  display: inline-table;
}
.#{$table}, .#{$inline-table} {
  .#{$tbody} {
    display: table-row-group;
  }
  .#{$tfoot} {
    display: table-footer-group;
  }
  .#{$thead} {
    display: table-header-group;
  }
  .#{$tr} {
    display: table-row;
  }
  .#{$td}, .#{$th} {
    display: table-cell;
  }
  .#{$colgroup} {
    display: table-column-group;
  }
  .#{$col} {
    display: table-column;
  }
}

@each $value in $table-td-width-vw-sizes {
  .#{$width}-#{$value}-vw {
    width: 10vw;
  }
}

@media (max-width: $table-mobile-max-width) {
  .#{$table-mobile} {
    display: block !important;
    width: 100%;
    &.#{$table-borders-vertical} {
      td, .#{$td}, th, .#{$th} {
        &[data-th]:before {
          border-left: $table-border;
          border-right: $table-mobile-td-border;
        }
      }
    }
    &.#{$table-borders}, &.#{$table-borders-horizontal} {
      tr, .#{$tr} {
        border-top: $table-border;
      }
      th, td, .#{$th}, .#{$td} {
        &:not(:first-child) {
          border-top: $table-mobile-td-border;
        }
      }
    }

    tbody, .#{$tbody}, tfoot, .#{$tfoot}, tr, .#{$tr} {
      display: block;
      width: 100%;
    }
    .#{$thead}, thead {
      display: none;
    }
    tr, .#{$tr} {
      @include table-mobile-tr;
      .#{$td}, td {
        display: table;
        table-layout: fixed;
        padding: 0 !important;
        border: 0 none;
        width: 100%;
        &[data-th] {
          &:before {
            content: attr(data-th);
            display: table-cell;
            box-sizing: border-box;
            text-align: left;
            vertical-align: middle;
            @include th-style;
            width: $table-mobile-th-width;
            max-width: $table-mobile-th-width;
            padding: $table-mobile-th-padding;
          }
        }
        .#{$table-on-hover} {
          visibility: visible;
        }
        > span {
          padding: $table-mobile-td-padding;
          display: table-cell;
          width: $table-mobile-td-width;
          box-sizing: border-box;
          text-align: left;
          vertical-align: middle;
          ~ span {
            width: auto !important;
          }
        }
      }
    }
  }
}

.#{$table}, .#{$inline-table} {
  .#{$expandable-trigger} {
    .#{$toggle-show} {
      display: none;
    }
    .#{$toggle-hide} {
      display: inline-block;
    }
  }

  .#{$expandable-toggler} {
    display: none !important;
    &:checked {
      + .#{$expandable-trigger} {
        .#{$toggle-show} {
          display: inline-block;
        }
        .#{$toggle-hide} {
          display: none;
        }
      }
    }
  }

  .#{$expandable-toggler} {
    &:not(:checked) {
      + * {
        &.#{$expandable} {
          display: none !important;
        }
        &.#{$expandable-trigger} {
          + .#{$expandable} {
            display: none !important;
          }
        }
      }
    }
    &:checked {
      + * {
        &.#{$expandable} {
          @include table-expanded;
        }
        &.#{$expandable-trigger} {
          @include table-expanded-trigger;
          + .#{$expandable} {
            @include table-expanded;
          }
        }
      }
    }
  }
}