@use "sass:math";
@use "sass:selector";
@use "../../variables/a11y" as a11yVariables;
@use "../../tools/a11y";
@use "../../tools/colour";
@use "../../tools/grid";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

$table-overflow-shadow-width: 1.25rem;
$table-overflow-shadow-colour: rgb(0 0 0 / 40%);
$table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);

@property --overflow-shadow-start {
  syntax: "<color>";
  inherits: false;
  initial-value: #{$table-overflow-shadow-colour-hidden};
}

@property --overflow-shadow-end {
  syntax: "<color>";
  inherits: false;
  initial-value: #{$table-overflow-shadow-colour-hidden};
}

@keyframes overflow-shadows {
  0% {
    --overflow-shadow-start: #{$table-overflow-shadow-colour-hidden};
    --overflow-shadow-end: #{$table-overflow-shadow-colour};
  }

  5% {
    --overflow-shadow-start: #{$table-overflow-shadow-colour};
  }

  95% {
    --overflow-shadow-end: #{$table-overflow-shadow-colour};
  }

  100% {
    --overflow-shadow-start: #{$table-overflow-shadow-colour};
    --overflow-shadow-end: #{$table-overflow-shadow-colour-hidden};
  }
}

.tna-table {
  @include spacing.space-above;
  max-width: 100%;
  margin-bottom: spacing.space(4);

  position: relative;
  z-index: 1;

  text-align: left;

  border-collapse: collapse;

  &:last-child {
    margin-bottom: 0;
  }

  &__caption {
    width: 100%;
    padding: 0 0 spacing.space(1);

    caption-side: top;

    @include typography.font-size(16);
  }

  &__head {
    vertical-align: bottom;
  }

  &__body {
    vertical-align: top;
  }

  &__foot {
    @include typography.main-font-weight-bold;
    vertical-align: top;
  }

  &__row {
  }

  &__header {
  }

  &__cell {
  }

  &__header,
  &__cell {
    padding: spacing.space(0.25) spacing.space(1);

    @include colour.colour-border("keyline", 1px, solid, bottom);

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }

    &--numeric {
      text-align: right;
    }

    &--align-left {
      text-align: left;
    }

    &--align-centre {
      text-align: center;
    }

    &--align-right {
      text-align: right;
    }

    &--align-justify {
      text-align: justify;
    }

    &--align-top {
      vertical-align: top;
    }

    &--align-middle {
      vertical-align: middle;
    }

    &--align-bottom {
      vertical-align: bottom;
    }
  }

  &__head &__header {
    @include colour.thick-keyline-dark(bottom);
  }

  &__foot &__header,
  &__foot &__cell {
    @include colour.thick-keyline-dark(top);
  }

  p {
    + p {
      margin-top: spacing.space(0.25);
    }
  }

  &--full {
    width: 100%;
  }
}

.tna-table-wrapper {
  @include spacing.space-above;
  margin-bottom: spacing.space(4);

  overflow: auto;

  background:
    linear-gradient(
      to right,
      colour.colour-var("background") 50%,
      rgb(255 255 255 / 0%)
    ),
    linear-gradient(
        to right,
        rgb(255 255 255 / 0%),
        colour.colour-var("background") 50%
      )
      0 100%,
    radial-gradient(
      ellipse #{$table-overflow-shadow-width} 50% at left center,
      #{$table-overflow-shadow-colour},
      #{$table-overflow-shadow-colour-hidden}
    ),
    radial-gradient(
        ellipse #{$table-overflow-shadow-width} 50% at right center,
        #{$table-overflow-shadow-colour},
        #{$table-overflow-shadow-colour-hidden}
      )
      0 100% transparent;
  background-size:
    #{$table-overflow-shadow-width * 2} 100%,
    #{$table-overflow-shadow-width * 2} 100%,
    100% 100%,
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    0 0,
    100%,
    0 0,
    100%;
  background-attachment: local, local, scroll, scroll;

  border-radius: 0.1px;

  container-type: inline-size;

  contain: paint;

  @include a11y.focus-indicator-only-on-keyboard-focus;

  /*
  * ------------------------------------------
  * Can remove the @supports rule when support
  * for the scroll-driven animations below has
  * been enabled by default in Firefox and the
  * documented scroll-timeline syntax (x and y
  * as opposed to vertical and horizontal) can
  * be used
  * https://caniuse.com/mdn-css_properties_animation-timeline_view
  * ------------------------------------------
  */
  @supports (scroll-timeline: --overflow-shadows x) {
    background:
      radial-gradient(
        ellipse #{$table-overflow-shadow-width} 50% at left center,
        var(--overflow-shadow-start),
        #{$table-overflow-shadow-colour-hidden}
      ),
      radial-gradient(
          ellipse #{$table-overflow-shadow-width} 50% at right center,
          var(--overflow-shadow-end),
          #{$table-overflow-shadow-colour-hidden}
        )
        transparent;
    background-position: 0;

    animation: overflow-shadows 1ms linear;
    animation-timeline: --overflow-shadows;
    scroll-timeline: --overflow-shadows x;
  }

  &:last-child {
    margin-bottom: 0;
  }

  .tna-table {
    &__caption {
      max-width: calc(100vw - #{grid.gutter-width-double()});
      max-width: 100cqw;

      position: sticky;
      left: 0;

      @include media.on-tiny {
        max-width: calc(100vw - #{grid.gutter-width-tiny-double()});
        max-width: 100cqw;
      }
    }
  }

  // &--sticky-first-column {
  //   background: radial-gradient(
  //       ellipse #{$table-overflow-shadow-width} 50% at right center,
  //       var(--overflow-shadow-end),
  //       #{$table-overflow-shadow-colour-hidden}
  //     )
  //     transparent;

  //   .tna-table {
  //     &__header,
  //     &__cell {
  //       &:first-child {
  //         max-width: 50vw;
  //         max-width: 50cqw;

  //         position: sticky;
  //         left: 0;
  //         z-index: 1;

  //         overflow-wrap: break-word;

  //         hyphens: auto;
  //         @include colour.colour-background("background");

  //         &::after {
  //           content: "";

  //           width: 0.75rem;

  //           position: absolute;
  //           top: 0;
  //           bottom: -1px;
  //           left: 100%;

  //           background: linear-gradient(
  //             90deg,
  //             var(--overflow-shadow-start) 0%,
  //             #{$table-overflow-shadow-colour-hidden} 100%
  //           );
  //           animation: overflow-shadows linear;
  //           animation-timeline: --overflow-shadows;
  //         }
  //       }
  //     }
  //   }
  // }

  &--scroll {
    .tna-table {
      &__caption {
        &::after {
          content: " (scroll to see more)";
        }
      }
    }
  }
}