@use "config";
@use "mixins";
@use "variables";
@use "sass:color";
@use "sass:map";
@use "sass:math";

.table {
  $table-border: 1px solid
    color.adjust(
      map.get(variables.$greyscale, "light"),
      $lightness: math.percentage(config.$hue-threshold * 2)
    );
  $responsive-table-bottom-gap: map.get(variables.$spacers, 2);
  $responsive-table-label-bg: map.get(variables.$greyscale, "lighter");
  width: 100%;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0;
  @include mixins.breakpoint(tablet, max) {
    border: none;
  }

  thead {
    background-color: map.get(variables.$greyscale, "lighter");
    border-bottom: 1px solid map.get(variables.$greyscale, "light");
    color: map.get(variables.$greyscale, "base");
    font-weight: bold;
    text-align: left;
    @include mixins.breakpoint(tablet, max) {
      border: none;
    }

    th {
      border: solid
        color.adjust(
          map.get(variables.$greyscale, "light"),
          $lightness: math.percentage(config.$hue-threshold * 2)
        );
      border-width: 1px 0;
    }
  }

  tr {
    background-color: transparent;
    transition: background-color var(--transitions) ease;
    @include mixins.breakpoint(tablet, min) {
      &:hover {
        background-color: map.get(variables.$greyscale, "lighter");
      }
    }

    td,
    th {
      padding: 1rem;
    }

    td {
      border-bottom: 1px solid
        color.adjust(
          map.get(variables.$greyscale, "light"),
          $lightness: math.percentage(config.$hue-threshold * 2)
        );
    }

    &:last-child {
      > td {
        border-color: transparent;
      }
    }
  }
  @include mixins.breakpoint(tablet, max) {
    &:not(.unresponsive) {
      thead tr {
        position: absolute;
        top: -9999em;
        left: -9999em;
      }

      tr {
        border-bottom: none;
        display: block;

        td {
          align-items: flex-start;
          border: none;
          display: flex;
          flex-direction: column;

          &:before {
            content: attr(data-label);
            display: inline-block;
            font-weight: bold;
            line-height: 1.5;
            min-width: 40%;
            padding-right: map.get(variables.$spacers, 2);
            text-align: left;
          }
        }
      }

      tr + tr {
        border-top: 1px solid
          color.adjust(
            map.get(variables.$greyscale, "light"),
            $lightness: math.percentage(config.$hue-threshold * 2)
          );
        margin-top: $responsive-table-bottom-gap;
        padding-top: $responsive-table-bottom-gap;
      }
      /* Get table cells to act like rows */
    }
  }
  &--no-hover {
    tr {
      @include mixins.breakpoint(tablet, min) {
        &:hover {
          background-color: initial;
        }
      }
    }
  }
  &--bordered {
    // coming
  }
  &--condensed {
    // coming
  }
}