@use "sass:map";

table.gl-table {
  background-color: var(--gl-color-alpha-0);
  @apply gl-text-default;

  tr {
    th,
    td {
      @apply gl-border-b-1 gl-bg-transparent gl-p-5 gl-border-b-solid;
      @apply gl-border-default;
      @apply gl-leading-normal;
      @apply gl-text-base;
      @apply gl-align-top;
      @apply gl-text-default;
      @apply gl-font-normal;
    }

    &:focus-visible {
      @apply gl-focus;
      position: relative;
      z-index: 1;
    }
  }

  &.table-borderless {
    tr {
      td {
        @apply gl-border-b-0;
      }
    }
  }

  thead tr th {
    @apply gl-font-bold gl-text-heading;

    .gl-table-th-sort-icon-wrapper {
      @apply gl-ml-2;
    }

    &.gl-table-th-align-right > div {
      @apply gl-flex-row-reverse;

      .gl-table-th-sort-icon-wrapper {
        @apply gl-ml-0 gl-mr-2;
      }
    }

    [name="sort-icon"] {
      user-select: none;
      color: var(--gl-table-sorting-icon-color);
    }
  }

  // Sticky header
  &--sticky-header thead tr {
    position: sticky;
    top: -1px;
    @apply gl-bg-default;
    box-shadow: inset 0 -1px 0 var(--gl-border-color-default);
  }

  .table-primary,
  .table-primary:hover {
    background-color: var(--gl-feedback-info-background-color);

    > td {
      background-color: var(--gl-feedback-info-background-color);
    }
  }

  caption {
    @apply gl-pt-2;
  }

  @mixin gl-tmp-stacked-override {
    tbody > tr {
      &::after {
        content: "";
        @apply gl-h-6;
        @apply gl-w-full;
        @apply gl-block;
      }

      > td[data-label],
      > th[data-label] {
        @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;

        &::before {
          @apply gl-text-left;
        }

        &:first-child {
          @apply gl-border-t-1 gl-border-t-solid;
        }

        &:not(:first-child) {
          @apply gl-border-t-0;
        }
      }

      div {
        @apply gl-text-right;
        @apply gl-break-words;
      }
    }
  }

  &.b-table {
    &.b-table-stacked {
      @include gl-tmp-stacked-override();
    }

    @each $breakpoint in map.keys($grid-breakpoints) {
      $next: breakpoint-next($breakpoint, $grid-breakpoints);
      @if ($next != null) {
        &.b-table-stacked-#{$next} {
          @include gl-container-width-down(#{$next}) {
            @include gl-tmp-stacked-override();
          }
        }
      }
    }
  }

  &.table-hover tbody tr:hover,
  &.table-hover td.table-secondary:hover {
    background-color: var(--gl-table-row-background-color-hover);
  }

  thead th:hover {
    background-color: transparent !important;

    [name="sort-icon"] {
      display: flex !important;
    }
  }
}

.table.b-table > thead > tr > th,
.table.b-table > tfoot > tr > th {
  background-image: none !important;
}

.table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left),
.table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) {
  padding-right: 1rem;
}