@use "./mixins";
@use "./config";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/generate";

@layer components {
  .table {
    @include mixins.base;

    td,
    th {
      @include mixins.cells;
    }

    thead th {
      @include mixins.header-cells;
    }

    tr {
      @include mixins.rows;
    }

    thead > tr {
      @include mixins.header-rows;
    }

    tbody > th {
      @include mixins.body-header-cells;
    }

    tbody + tbody {
      @include mixins.body-sibling;
    }

    > tfoot > tr {
      @include mixins.footer-rows;
    }

    &--striped tbody tr:nth-of-type(odd) {
      @include mixins.odd-row;
    }

    &--striped.background-secondary tbody tr:nth-of-type(odd),
    .background-secondary &--striped tbody tr:nth-of-type(odd) {
      background-color: config.$striped-color-on-secondary;
    }

    &--compact {
      @include mixins.compact;
    }

    &--responsive {
      @include breakpoint.get("md", "down") {
        @include mixins.responsive-table;
      }
    }

    @each $breakpoint in ("default", "sm", "md", "lg", "xl", "xxl") {
      @include breakpoint.get($breakpoint, "down") {
        &-scrollable#{generate.variant-name($breakpoint)} {
          @include mixins.scrollable-wrapper;
        }
      }
    }

    &__sort-button {
      @include mixins.sort-button;

      &::before,
      &::after {
        @include mixins.sort-arrows-base;
      }

      &::before {
        @include mixins.sort-arrow-up;
      }

      &::after {
        @include mixins.sort-arrow-down;
      }

      [aria-sort="descending"] &::before {
        @include mixins.sorted-arrow;
      }

      [aria-sort="ascending"] &::after {
        @include mixins.sorted-arrow;
      }
    }

    &__subrow {
      @include mixins.subrow;
    }

    button[aria-expanded="true"] > svg {
      @include mixins.expanded-icon;
    }

    &__cell--expand {
      @include mixins.expand-padding;
    }

    &__cell--shrink {
      width: 0.1%;
    }

    &__cell--fill {
      width: 100%;
    }
  }
}