.table-scroll {
  @apply overflow-x-auto;

  &.half-vh {
    @apply max-h-[50vh];
  }

  table {
    border-collapse: unset;

    @apply mb-0 text-gray-2 border border-background-4 w-full;
  }
}

.table-stacked {
  table {
    @apply w-full border-collapse md:table;

    thead {
      @apply hidden md:table-header-group;
    }

    tbody {
      @apply block md:table-row-group;
    }

    tr {
      @apply block mb-4 md:table-row md:mb-0;

      td {
        @apply block p-3 md:table-cell before:content-[attr(data-label)] before:border-collapse before:border-spacing-0 before:inline-block before:w-24 before:bg-background-2 before:text-xs before:text-gray-2 before:font-semibold md:before:hidden;
      }
    }
  }
}

//Table list
.table-list {
  @apply border-collapse border-spacing-0;

  thead tr {
    @apply bg-background-2;

    a {
      @apply font-semibold;

      &:hover {
        @apply underline;
      }
    }
  }

  td {
    @apply border-b border-background-4 text-sm;

    &:not(:last-child) {
      @apply border-r border-background-4;
    }
  }

  th {
    .sort_link.desc,
    .sort_link.asc {
      @apply underline;
    }
  }

  thead th {
    @apply border-b border-background-4 text-xs font-semibold;

    &:not(:last-child) {
      @apply border-r border-background-4;
    }

    &:first-child {
      @apply text-left pl-4;
    }
  }

  tbody tr td {
    @apply p-3;
  }

  thead th,
  thead td,
  tfoot th,
  tfoot td {
    @apply p-2;
  }

  tr:nth-child(even) {
    @apply bg-background-2;
  }

  th:not(:first-child),
  td:not(:first-child) {
    @apply text-left md:text-center;
  }

  th [type="checkbox"],
  td [type="checkbox"] {
    @apply m-0;
  }

  &.table-list--selectable {
    th:nth-child(2),
    td:nth-child(2) {
      @apply text-left;
    }
  }

  thead tr a,
  thead tr {
    @apply text-gray-2 text-xs;
  }

  td a:not(.button):not([class*="dropdown"] a) {
    @apply text-md font-semibold text-secondary;
  }

  td > .button {
    @apply mb-0;
  }

  .table-list__date,
  .table-list__state {
    @apply text-sm;
  }

  .tabel-list__left {
    @apply text-left;
  }

  .icon-active {
    @apply bg-[#5dc560] inline-block w-3 h-3 align-middle mr-2 rounded-[50%];
  }

  .draggable-table {
    &.dragging {
      @apply border-dashed border-y-2 border-gray;
    }

    .dragging-handle {
      @apply cursor-ns-resize align-top p-3;

      .dragger {
        @apply text-2xl;
      }
    }
  }
}

.table-list__actions {
  @apply text-center whitespace-nowrap;

  a:not(:last-child) {
    @apply pr-2;
  }

  &:last-child {
    @apply text-right;
  }

  span {
    @apply mr-1;
  }

  svg {
    @apply inline-block fill-secondary w-5 h-5;
  }

  .action-space {
    @apply w-5 h-5;
  }
}

.table-list__state {
  @apply text-center;
}

.table-list__type-icon {
  @apply relative cursor-pointer;
}

.table-list__type-label {
  @apply hidden relative font-semibold;

  &.expanded {
    @apply inline-block;
  }
}

.table-list__title-ellipsis {
  @apply whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-2xl inline-block align-middle;
}
