.view-layout {
  &.view-list {
    @apply rounded-2xl border shadow-md overflow-auto;

    & .view-table {
      @apply flex flex-col min-w-[800px];
    }

    & .row {
      @apply flex justify-between items-center flex-nowrap px-3 border-b border-gray-200 h-14;

      &.view-head {
        @apply bg-base-200 font-bold;
      }
    }
  }

  &.view-grid {
    @apply mt-5;

    & .view-table {
      @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5;
    }

    & .row {
      &.view-item {
        @apply card bg-base-100 shadow-md border border-gray-200 p-3 relative pb-8;

        & .col {
          @apply w-auto
        }

        & > .hide {
          @apply hidden;
          visibility: hidden;
        }

        & > .actionbar {
          @apply absolute right-0 bottom-0 flex px-3 py-1 w-auto border-t border-l rounded-tl-xl;
          box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.1);
        }
      }

      &.view-head {
        display: none;
        visibility: hidden;
      }
    }
  }
}
