@use "../../00-base/00-config/00-variables" as *;
@use "../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Tables: helpers
// *
////////////////////////////////////////////////////////////////////////////////


// * Mixins
// =============================================================================

// ** Responsive tables
// -- option to reformat or to use a scrollbar: "reformatted" or "scroll"

@mixin table-responsive($type) {
  @include bp-xs-only {
    // -- https://css-tricks.com/responsive-data-tables/
    @if ($type == "reformatted") {
      caption {
        display: block;
        padding: rem(10);
        border-bottom: rem(1) solid hsl(var(--clr-border));
      }

      /* Force table to not be like tables anymore */
      :is(
        table,
        thead,
        tbody,
        th,
        td,
        tr
      ) {
        display: block;
      }

      thead {
        border: 0 none;
        background: transparent;

        tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }
      }

      tr {
        border: 0 none; // we'll set borders in the td's

        &.odd {
          td {
            border-bottom: rem(1) solid hsl(var(--clr-white));
          }
        }
      }

      td {
        /* Behave  like a "row" */
        position: relative;
        // padding-left: 50%;
        border: none;
        border-bottom: rem(1) solid hsl(var(--clr-border));

        &::before {
          // include the row title
          content: attr(data-title)": ";
          display: block;
          padding-right: rem(10);
          white-space: nowrap;
          font-weight: bold;
        }
      }

      // no need for the extra padding and ":" when no th's
      table.no-th {
        td {
          position: static;
          width: auto;

          &::before {
            display: none;
          }
        }
      }
      // -- Scrolling
    } @else {
      position: relative;
      margin-bottom: var(--gap-lg);
      border: rem(1) solid hsl(var(--clr-border));

      table {
        table-layout: auto;
        border-collapse: separate;
        border-spacing: 0;
        empty-cells: show;
        margin-bottom: 0;
        border: 0 none;
      }

      // If no th rows or columns, do regular vertical scroll.
      &.js-table--no-th {
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        min-height: .01%;
      }

      // if ths only in thead or tfoot,
      // turn it into a column + vertical scrolling of table.
      &.js-table--th-row {
        overflow: hidden;

        table {
          position: relative;
          width: 100%;
          padding: 0;
        }

        thead {
          position: absolute;
          top: 0;
          display: block;
          height: 100%;
          width: rem(120);

          tr {
            display: flex;
            flex-direction: column;

            &:last-child {
              border-bottom: 0 none;
            }
          }

          th,
          td {
            display: block;
            overflow: hidden;
            min-height: rem(100); // actual height will be set by JS based on highest cell
            text-overflow: ellipsis;
            word-wrap: normal;
            border-left: rem(1) solid hsl(var(--clr-spot-1));
            border-right: rem(1) solid hsl(var(--clr-spot-1));
            border-bottom: rem(1) solid white;
          }
        }

        tbody {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          // Subtract cell width and extra for paddings&borders.
          width: calc(100vw - 120px - 40px);

          tr {
            display: flex;
            flex-direction: column;
          }

          th,
          td {
            display: block;
            // Actual height will be set by JS based on highest cell.
            min-height: rem(100);
          }
        }
      }

      &.js-table--th-top {
        thead {
          left: 0;
        }

        tbody {
          margin-left: rem(120); // cell width
        }
      }

      &.js-table--th-bottom {
        thead {
          right: 0;
        }

        tbody {
          margin-right: rem(120); // cell width
        }
      }

      // if ths in left or right column: add vertical scrolling.
      &.js-table--th-col {
        table {
          display: block;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 0;
          width: 100%;
        }

        tbody {
          position: static;
        }

        tr {
          position: static;

          &:last-child {
            .th__content {
              border-bottom: 0 none;
            }
          }
        }

        th {
          padding: 0;
          width: 0;
          border: 0;
          background: transparent none;
        }

        .th__content {
          position: absolute;
          width: rem(120);
          padding: rem(10);
          border-bottom: rem(1) solid hsl(var(--clr-white));
          background: hsl(var(--clr-spot-1));
        }
      }

      &.js-table--th-left {
        padding-left: rem(120);

        .th__content {
          left: 0;
        }
      }

      &.js-table--th-right {
        padding-right: rem(120);

        .th__content {
          right: 0;
        }
      }
    }
  }
}

