.table {
  @apply w-full border-collapse overflow-hidden overflow-y-scroll;

  &.scrollable {
    // & .td:first-child {
    //   @apply border-none w-80;
    // }
    // & .td + td {
    //   @apply border-none;
    // }

    & .tr:nth-child(2n) {
      @apply bg-gray-400/10;
    }

    & .tr {
      & :has(input[type="checkbox"]:checked) > * {
        @apply visible;
      }

      &:hover > .td.select > * {
        @apply visible;
      }

      & .td.select > * {
        @apply invisible;
      }
    }

    .thead > .tr > .th {
      @apply flex items-center;
    }

    & .tbody {
      @apply overflow-hidden overflow-y-scroll max-h-56;
    }

    & .tr {
      @apply flex;
    }
  }
}