table.gl-table {
  @include gl-text-gray-500;
  @include gl-bg-transparent;

  tr {
    th,
    td {
      @include gl-border-t-none;
      @include gl-border-b-solid;
      @include gl-border-b-1;
      @include gl-p-5;
      @include gl-bg-transparent;
      @include gl-line-height-normal;
      @include gl-font-base;
    }

    th {
      @include gl-font-weight-bold;
      @include gl-border-gray-200;
    }

    td {
      @include gl-border-gray-100;
    }
  }

  .table-primary,
  .table-primary:hover {
    > td {
      @include gl-bg-blue-50;
    }
  }

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

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

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

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

      div {
        @include gl-text-right;
        @include gl-overflow-wrap-break;
      }
    }
  }

  $stacked-table-breakpoints: (
    'sm': 'xs',
    'md': 'sm',
    'lg': 'md',
    'xl': 'lg',
  );

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

    @each $class, $mq in $stacked-table-breakpoints {
      &.b-table-stacked-#{$class} {
        @include media-breakpoint-down(#{$mq}) {
          @include gl-tmp-stacked-override();
        }
      }
    }
  }
}