@function rowWidth() {
  @return 100%;
}

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

  &.scrollable {
    & .td:first-child {
      @apply border-none w-12 min-w-[3rem];
    }
    & .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;
    }

    .thead,
    .tfoot,
    .tbody,
    .th,
    .td {
      display: block;
      width: 100%;
      max-width: 100vw;
    }

    & .th:first-child,
    & .td:first-child {
      @apply min-w-[12rem] max-w-[20%] w-[20%];
    }

    & .tbody {
      @apply overflow-y-auto max-h-[36rem];
    }

    & .tr {
      @apply flex flex-nowrap;
    }

    @media (max-width: 768px) {
      & .th:first-child,
      & .td:first-child {
        @apply min-w-[8rem] max-w-[25%] w-[25%];
      }
    }

    @media (max-width: 480px) {
      & .th:first-child,
      & .td:first-child {
        @apply min-w-[6rem] max-w-[30%] w-[30%];
      }

      & .tbody {
        @apply max-h-[24rem];
      }
    }
  }
}