table {
  border-spacing: 0;
  width: 100%;
  display: grid;
  gap: spacer(4);

  & > * {
    display: block;
  }

  & > caption {
    text-align: unset;
    @include font-size(4);
  }

  & > thead {
    display: none;
  }

  & > thead,
  & > tbody,
  & > tfoot {
    & > * > * {
      padding: spacer(4);
      text-align: left;
      vertical-align: middle;
    }
  }

  &[aria-busy="true"] {
    & > tbody,
    & > tfoot {
      opacity: $disabled-opacity;
      pointer-events: none;
    }
  }

  & > tbody,
  & > tfoot {
    display: contents;

    & > * {
      display: block;
      border: $border;
      border-radius: $table-border-radius;

      &[aria-selected]:hover,
      &[aria-selected="true"] {
        cursor: pointer;
        background-color: var(--active-bg);
      }

      & > th[scope="row"] {
        font-weight: normal;
      }

      & > * {
        display: block;

        &.icon-cell {
          text-align: center;
          position: relative;
          overflow: hidden;
          font-size: $big-icon-size;
          @include breakpoint-up(lg) {
            width: $table-image-thumb-height;
            min-width: $table-image-thumb-height;
          }

          img {
            max-width: $table-image-thumb-height;
            @include breakpoint-up(lg) {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        &[aria-busy="true"]::after {
          content: "";
          display: block;
          @include dummy;
          height: 1lh;
          aspect-ratio: 3;
        }

        &:not(:first-child) {
          border-top: $border;
        }

        &[data-label]:before {
          display: block;
          font-weight: bold;
          margin-bottom: spacer(2);
          content: attr(data-label);
        }

        h4,
        h5,
        h6 {
          font-weight: bold;
        }
      }
    }
  }

  & > thead th {
    padding-top: 0;
    white-space: nowrap;

    &[aria-sort] {
      cursor: pointer;

      &:after {
        @extend %icon;
        margin-left: spacer(1);
      }
    }

    &[aria-sort="none"]:after {
      background-color: transparent;
    }

    &[aria-sort="ascending"]:after {
      @extend .icon-outline-cheveron-up;
    }

    &[aria-sort="descending"]:after {
      @extend .icon-outline-cheveron-down;
    }
  }

  & > tbody > * {
    @include bg-color(filled);

    & > * > .actions {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      gap: spacer(3);

      @include breakpoint-up(lg) {
        justify-content: end;
      }
    }
  }

  & > tfoot > tr {
    background-color: var(--body-bg);
    font-weight: bold;
  }

  @include breakpoint-up(lg, true) {
    &,
    & > * {
      display: revert;
    }

    & > thead,
    & > tbody,
    & > tfoot {
      &,
      & > *,
      & > * > * {
        display: revert;
        border: none;
      }
    }

    & > caption {
      margin-bottom: spacer(4);
    }

    & > tbody,
    & > tfoot {
      & > * > * {
        border-top: $border;

        &:first-child {
          border-left: $border;
        }

        &:last-child {
          border-right: $border;
        }

        &[data-label]:before {
          display: none;
        }

        &.icon-cell {
          border-right: $border;
        }
      }

      &:last-child > tr:last-child > * {
        border-bottom: $border;
      }
    }

    & > tbody > :first-child {
      & > :first-child {
        border-top-left-radius: $table-border-radius;
      }

      & > :last-child {
        border-top-right-radius: $table-border-radius;
      }
    }

    & > :last-child > :last-child {
      & > :first-child {
        border-bottom-left-radius: $table-border-radius;
      }

      & > :last-child {
        border-bottom-right-radius: $table-border-radius;
      }
    }
  }
}
