@use "sass:map";
@use "../config" as *;
@use "../functions" as *;
@use "../layout/breakpoints" as *;
@use "../mixins/tokens" as *;

// stylelint-disable custom-property-no-missing-var-function
$table-tokens: () !default;

// scss-docs-start table-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$table-tokens: defaults(
  (
    --table-cell-padding-y: .5rem,
    --table-cell-padding-x: .5rem,
    --table-cell-vertical-align: top,
    --table-color: var(--fg-body),
    --table-bg: var(--bg-body),
    --table-accent-bg: transparent,
    --table-border-width: var(--border-width),
    --table-border-color: var(--border-color),
    --table-group-separator-color: currentcolor,
    --table-striped-color: var(--table-color),
    --table-striped-bg-factor: 5%,
    --table-striped-bg: color-mix(in srgb, var(--table-color) var(--table-striped-bg-factor), transparent),
    --table-active-color: var(--table-color),
    --table-active-bg-factor: 10%,
    --table-active-bg: color-mix(in srgb, var(--table-color) var(--table-active-bg-factor), transparent),
    --table-hover-color: var(--table-color),
    --table-hover-bg-factor: 7.5%,
    --table-hover-bg: color-mix(in srgb, var(--table-color) var(--table-hover-bg-factor), transparent),
  ),
  $table-tokens
);
// scss-docs-end table-tokens
// stylelint-enable custom-property-no-missing-var-function

$table-striped-order: odd !default;
$table-striped-columns-order: even !default;

//
// Basic Bootstrap table
//

@layer content {
  .table {
    @include tokens($table-tokens);

    // Reset needed for nesting tables
    --table-color-type: initial;
    --table-bg-type: initial;
    --table-color-state: initial;
    --table-bg-state: initial;
    // End of reset

    width: 100%;
    margin-bottom: $spacer;
    vertical-align: var(--table-cell-vertical-align);
    border-color: var(--theme-border, var(--table-border-color));

    // Target th & td
    // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
    // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
    // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
    // stylelint-disable-next-line selector-max-universal
    > :not(caption) > * > * {
      padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
      // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
      color: var(--table-color-state, var(--table-color-type, var(--theme-fg, var(--table-color))));
      background-color: var(--theme-bg-subtle, var(--table-bg));
      border-block-end-width: var(--table-border-width);
      box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--theme-bg-subtle, var(--table-accent-bg))));
    }

    > tbody {
      vertical-align: inherit;
    }

    > thead {
      vertical-align: bottom;
    }
  }

  .table-group-divider {
    border-block-start: calc(var(--table-border-width) * 2) solid var(--table-group-separator-color);
  }

  //
  // Change placement of captions with a class
  //

  .caption-top {
    caption-side: top;
  }

  //
  // Condensed table w/ half padding
  //

  .table-sm {
    // stylelint-disable-next-line selector-max-universal
    > :not(caption) > * > * {
      --table-cell-padding-y: .25rem;
      --table-cell-padding-x: .25rem;
    }
  }

  // Border versions
  //
  // Add or remove borders all around the table and between all the columns.
  //
  // When borders are added on all sides of the cells, the corners can render odd when
  // these borders do not have the same color or if they are semi-transparent.
  // Therefore we add top and border bottoms to the `tr`s and left and right borders
  // to the `td`s or `th`s

  .table-bordered {
    > :not(caption) > * {
      border-width: var(--table-border-width) 0;

      // stylelint-disable-next-line selector-max-universal
      > * {
        border-width: 0 var(--table-border-width);
      }
    }
  }

  .table-borderless {
    // stylelint-disable-next-line selector-max-universal
    > :not(caption) > * > * {
      border-block-end-width: 0;
    }

    > :not(:first-child) {
      border-block-start-width: 0;
    }
  }

  // Zebra-striping
  //
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)

  // For rows
  .table-striped {
    > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
      --table-color-type: var(--theme-fg, var(--table-striped-color));
      --table-bg-type: color-mix(in srgb, var(--theme-fg, var(--table-color)) var(--table-striped-bg-factor), transparent);
    }
  }

  // For columns
  .table-striped-columns {
    > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
      --table-color-type: var(--theme-fg, var(--table-striped-color));
      --table-bg-type: color-mix(in srgb, var(--theme-fg, var(--table-color)) var(--table-striped-bg-factor), transparent);
    }
  }

  // Active table
  //
  // The `.table-active` class can be added to highlight rows or cells

  .table-active {
    --table-color-state: var(--theme-fg, var(--table-active-color));
    --table-bg-state: color-mix(in srgb, var(--theme-fg, var(--table-color)) var(--table-active-bg-factor), transparent);
  }

  // Hover effect
  //
  // Placed here since it has to come after the potential zebra striping

  .table-hover {
    > tbody > tr:hover > * {
      --table-color-state: var(--theme-fg, var(--table-hover-color));
      --table-bg-state: color-mix(in srgb, var(--theme-fg, var(--table-color)) var(--table-hover-bg-factor), transparent);
    }
  }

  // Responsive tables
  //
  // Generate `.table-responsive` classes that act as container query contexts
  // and enable horizontal scrolling when table content overflows.

  @each $breakpoint in map.keys($breakpoints) {
    $prefix: breakpoint-prefix($breakpoint, $breakpoints);

    .#{$prefix}table-responsive {
      container-type: inline-size;

      @include media-breakpoint-down($breakpoint) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
  }

  // Stacked tables
  //
  // Generate `.table-stacked` classes that convert table rows into stacked
  // blocks using container queries. Requires a `.table-responsive` ancestor
  // and `data-cell` attributes on `<td>` elements for column labels.

  @each $breakpoint in map.keys($breakpoints) {
    $prefix: breakpoint-prefix($breakpoint, $breakpoints);

    @include container-breakpoint-down($breakpoint) {
      .#{$prefix}table-stacked {
        > thead {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
        }

        > tbody > tr {
          display: block;
          padding-block: var(--table-cell-padding-y);

          + tr {
            border-block-start: var(--table-border-width) solid var(--table-border-color);
          }

          > td {
            display: block;
            padding: calc(var(--table-cell-padding-y) * .25) calc(var(--table-cell-padding-x) * 2);
            border: 0;

            &:first-child {
              font-weight: var(--font-weight-bold);
            }

            // + td::before {
            //   margin-block-start: .25rem;
            // }

            &[data-cell]:not(:first-child)::before {
              display: block;
              font-weight: var(--font-weight-semibold);
              content: attr(data-cell);
            }
          }

          > td:not(:first-child) + td::before {
            margin-block-start: .25rem;
          }
        }
      }
    }
  }
}