@economic/taco 2.24.0 → 2.25.1-alpha.13

package/dist/esm/index.css

@@ -527,7 +527,7 @@
     @apply -mt-px py-0 px-2;
 }
 
-table[data-taco='report'] {
+table[data-taco^='table'] {
     /* reset table */
     @apply border-separate border-spacing-0;
     /* z-indexes & layout */
@@ -540,7 +540,7 @@ table[data-taco='report'] {
     @apply print:float-left print:h-max print:w-full print:overflow-visible print:border-0;
 }
 
-table[data-taco='report'] thead {
+table[data-taco^='table'] thead {
     /* z-indexes & layout */
     @apply sticky top-0 isolate z-20;
     /* grid */
@@ -549,44 +549,40 @@ table[data-taco='report'] thead {
 
 /* header column separator */
 
-table[data-taco='report'] thead:hover th:not(:last-child):after {
+table[data-taco^='table'] thead:hover th:not(:last-child):after {
             @apply bg-grey-300 absolute bottom-2 right-0 top-2 w-px content-[''];
         }
 
-table[data-taco='report'] thead tr:first-child {
+table[data-taco^='table'] thead tr:first-child {
         @apply rounded-t;
     }
 
-table[data-taco='report'] thead tr:first-child th:first-child {
+table[data-taco^='table'] thead tr:first-child th:first-child {
             @apply rounded-tl;
         }
 
-table[data-taco='report'] thead tr:first-child th:last-child {
+table[data-taco^='table'] thead tr:first-child th:last-child {
             @apply rounded-tr;
         }
 
-table[data-taco='report'] thead tr:last-child {
+table[data-taco^='table'] thead tr:last-child {
         @apply border-grey-300 border-b-2;
     }
 
 /* bottom border for column groups */
 
-table[data-taco='report'] thead tr:not(:last-child) th:before {
+table[data-taco^='table'] thead tr:not(:last-child) th:before {
             @apply bg-grey-300 absolute bottom-0 left-2 right-2 h-[2px] content-[''];
         }
 
-table[data-taco='report'] tfoot {
+table[data-taco^='table'] tfoot {
     /* z-indexes & layout */
     @apply sticky bottom-0 isolate z-20;
     /* grid */
-    @apply col-span-full grid grid-cols-[subgrid] grid-rows-[calc(theme(spacing.10)_+_2px)];
+    @apply col-span-full grid grid-cols-[subgrid];
 }
 
-table[data-taco='report'] tfoot > tr {
-        @apply grid-rows-[calc(theme(spacing.10)_+_2px)];
-    }
-
-table[data-taco='report'] tbody {
+table[data-taco^='table'] tbody {
     /* z-indexes & layout */
     @apply isolate z-10;
     /* grid */
@@ -595,7 +591,7 @@ table[data-taco='report'] tbody {
     @apply print:!h-auto print:!pb-0;
 }
 
-table[data-taco='report'] tr {
+table[data-taco^='table'] tr {
     /* styling */
     @apply relative bg-white outline-none;
     /* grid */
@@ -604,49 +600,57 @@ table[data-taco='report'] tr {
 
 /* botom border for column groups */
 
-table[data-taco='report'] tr:last-child th:before {
+table[data-taco^='table'] tr:last-child th:before {
         @apply left-0 right-0;
     }
 
 /* row groups */
 
-table[data-taco='report'] tr[data-row-group] {
+table[data-taco^='table'] tr[data-row-group] {
         @apply bg-grey-100 sticky top-[calc(var(--table-header-group-depth)_*_42px)] z-20 mt-10 print:mt-0;
     }
 
-table[data-taco='report'] tr[data-row-group]:first-child {
+table[data-taco^='table'] tr[data-row-group]:first-child {
             @apply mt-0;
         }
 
-table[data-taco='report'] tr[data-row-group]:not(:first-child):before {
+table[data-taco^='table'] tr[data-row-group]:not(:first-child):before {
             content: '';
             @apply bg-grey-100 border-grey-300 absolute -top-full left-0 right-0 mt-px h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
         }
 
-table[data-taco='report'] tr[data-row-group] td {
+table[data-taco^='table'] tr[data-row-group] td {
             @apply -mt-px border-b-2 border-t-0 font-bold;
         }
 
-table[data-taco='report'] tr:first-child td {
+table[data-taco^='table'] tr:first-child td {
         @apply !border-t-0;
     }
 
-table[data-taco='report'] th {
+table[data-taco^='table'] tr[aria-grabbed='true'] td {
+        @apply !wcag-blue-500;
+    }
+
+table[data-taco^='table'] tr[data-row-dragged-over='true'] td {
+        @apply !bg-grey-100;
+    }
+
+table[data-taco^='table'] th {
     /* layout */
     @apply relative flex h-10 items-center justify-start px-[var(--table-cell-padding-x)];
     /* styling */
     @apply border-grey-300 bg-white font-bold;
 }
 
-table[data-taco='report'] th:not([data-cell-placeholder='true']):hover {
+table[data-taco^='table'] th:not([data-cell-placeholder='true']):hover {
         @apply bg-grey-100;
     }
 
-table[data-taco='report'] th[aria-sort]:hover {
+table[data-taco^='table'] th[aria-sort]:hover {
         @apply cursor-pointer;
     }
 
-table[data-taco='report'] td {
+table[data-taco^='table'] td {
     /* layout */
     @apply flex justify-start px-[var(--table-cell-padding-x)] py-[var(--table-cell-padding-y)];
     /* styling */
@@ -655,147 +659,159 @@ table[data-taco='report'] td {
     @apply break-word hyphens-auto whitespace-pre-line;
 }
 
-table[data-taco='report'][data-table-row-height='short'] td {
+table[data-taco^='table'][data-table-row-height='short'] td {
     @apply min-h-[33px];
 }
 
-table[data-taco='report'][data-table-row-height='medium'] td {
+table[data-taco^='table'][data-table-row-height='medium'] td {
     @apply min-h-[41px];
 }
 
-table[data-taco='report'] [data-cell-align='left'] {
+table[data-taco^='table'] [data-cell-align='left'] {
     @apply justify-start text-left;
 }
 
-table[data-taco='report'] [data-cell-align='center'] {
+table[data-taco^='table'] [data-cell-align='center'] {
     @apply justify-center text-center;
 }
 
-table[data-taco='report'] [data-cell-align='right'] {
+table[data-taco^='table'] [data-cell-align='right'] {
     @apply justify-end text-right;
 }
 
-table[data-taco='report'] [data-cell-pinned] {
+table[data-taco^='table'] [data-cell-pinned] {
     @apply sticky;
 }
 
-table[data-taco='report'] th[data-cell-pinned] {
+table[data-taco^='table'] th[data-cell-pinned] {
     @apply z-30;
 }
 
-table[data-taco='report'] td[data-cell-pinned] {
-    @apply z-10;
+table[data-taco^='table'] td[data-cell-pinned] {
+    @apply z-20;
 }
 
-table[data-taco='report'] td:not([data-cell-truncate='true']) {
+table[data-taco^='table'] td:not([data-cell-truncate='true']) {
     @apply break-word hyphens-auto whitespace-pre-line;
 }
 
 /* FOOTER */
-table[data-taco='report'] tfoot td {
+table[data-taco^='table'] tfoot td {
     @apply border-b-0 font-bold;
 }
 
-table[data-taco='report'] tfoot td:before {
+table[data-taco^='table'] tfoot td:before {
     @apply bg-grey-300 absolute left-0 right-0 top-0 h-[2px] content-[''];
 }
 
 /* OTHER */
 
 /* resizing */
-table[data-taco='report'][data-table-resizing='true'] {
+table[data-taco^='table'][data-table-resizing='true'] {
         @apply select-none;
     }
-table[data-taco='report'][data-table-resizing='true'] th,
-    table[data-taco='report'][data-table-resizing='true'] td,
-    table[data-taco='report'][data-table-resizing='true'] tbody tr {
+table[data-taco^='table'][data-table-resizing='true'] th,
+    table[data-taco^='table'][data-table-resizing='true'] td,
+    table[data-taco^='table'][data-table-resizing='true'] tbody tr {
         @apply pointer-events-none;
     }
 
 /* components in cells */
-table[data-taco='report'] td[data-cell-align='right'] [data-taco='input'],
-table[data-taco='report'] td[data-cell-align='right'] [data-taco='textarea'] {
+table[data-taco^='table'] td[data-cell-align='right'] [data-taco='input'],
+table[data-taco^='table'] td[data-cell-align='right'] [data-taco='textarea'] {
     @apply text-right;
 }
 
-table[data-taco='report'] td [data-taco='textarea'] {
+table[data-taco^='table'] td [data-taco='textarea'] {
     @apply resize-none overflow-y-hidden focus:resize-y;
 }
 
-table[data-taco='report'] td[data-cell-truncate='true'] [data-taco='textarea'] {
+table[data-taco^='table'] td[data-cell-truncate='true'] [data-taco='textarea'] {
     @apply focus:absolute focus:overflow-y-auto;
 }
 
+table[data-taco^='table'] td label {
+    @apply h-fit !min-h-fit w-full !pb-0;
+}
+
+table[data-taco^='table'] td label [data-taco='label-message'] {
+    @apply !-mb-1.5 !-ml-2 !mt-1.5;
+}
+
+table[data-taco^='table'] td label [data-taco='switch'] + [data-taco='label-message'] {
+    @apply !ml-0;
+}
+
 /* font sizing */
-table[data-taco='report'][data-table-font-size='small'] {
+table[data-taco^='table'][data-table-font-size='small'] {
     @apply text-xs;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] {
+table[data-taco^='table'][data-table-font-size='medium'] {
     @apply text-sm;
 }
 
-table[data-taco='report'][data-table-font-size='large'] {
+table[data-taco^='table'][data-table-font-size='large'] {
     @apply text-base;
 }
 
 /* small font size */
-table[data-taco='report'][data-table-font-size='small'] td > [data-taco='button'],
-table[data-taco='report'][data-table-font-size='small'] td > [data-taco='icon-button'] {
+table[data-taco^='table'][data-table-font-size='small'] td > [data-taco='button'],
+table[data-taco^='table'][data-table-font-size='small'] td > [data-taco='icon-button'] {
     @apply !-my-2;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='spinner'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !h-4 !w-4;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td > [data-taco='icon'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='spinner'] {
+table[data-taco^='table'][data-table-font-size='small'] td > [data-taco='icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-[3px];
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='badge'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='badge-icon'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='icon'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='spinner'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge-icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='tag'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='tag'] {
     @apply !-my-0.5 h-5;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='select2-container'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='input'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='select2-container'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='Select2'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='input'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='textarea'] {
     @apply !-mx-[7px] !-my-[4px] !min-h-[theme(spacing.6)] !w-[calc(100%_+_14px)] text-xs focus:z-10;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='input'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='Select2'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='input'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='textarea'] {
     @apply !px-1.5;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='select2-container'] [data-taco='Select2'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='select2-container'] [data-taco='Select2'] {
     @apply !m-auto !w-full;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'] [data-taco='tag'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'] [data-taco='scrollarea'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='Select2'] [data-taco='tag'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='Select2'] [data-taco='scrollarea'] {
     @apply !my-0;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='textarea'] {
-    @apply !py-[3px];
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='textarea'] {
+    @apply !py-[3px] !leading-4;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
     @apply z-10 !-mr-[15px] !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)];
 }
 
-table[data-taco='report'][data-table-font-size='small']
+table[data-taco^='table'][data-table-font-size='small']
     td
     [data-taco='input-container']
     [data-affix-type='postfix']
@@ -803,107 +819,111 @@ table[data-taco='report'][data-table-font-size='small']
     @apply !h-4 !w-4;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='checkbox'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='checkbox-container'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='switch'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='switch-container'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox-container'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='switch'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='switch-container'] {
     @apply !-my-0.5;
 }
 
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='checkbox-container'] [data-taco='checkbox'],
-table[data-taco='report'][data-table-font-size='small'] td [data-taco='switch-container'] [data-taco='switch'] {
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox-container'] [data-taco='checkbox'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='switch-container'] [data-taco='switch'] {
     @apply !my-0;
 }
 
 /* medium font size */
-table[data-taco='report'][data-table-font-size='medium'] td > [data-taco='button'],
-table[data-taco='report'][data-table-font-size='medium'] td > [data-taco='icon-button'] {
+table[data-taco^='table'][data-table-font-size='medium'] td > [data-taco='button'],
+table[data-taco^='table'][data-table-font-size='medium'] td > [data-taco='icon-button'] {
     @apply !-my-1.5;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td > [data-taco='icon'] {
+table[data-taco^='table'][data-table-font-size='medium'] td > [data-taco='icon'] {
     @apply !-my-0.5;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='tag'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='tag'] {
     @apply !-my-0.5;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='select2-container'],
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='Select2'],
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='input'],
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='select2-container'],
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='Select2'],
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='input'],
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='textarea'] {
     @apply !-mx-[9px] !-my-[6px] !min-h-[theme(spacing.8)] !w-[calc(100%_+_16px)] focus:z-10;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='select2-container'] [data-taco='Select2'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='select2-container'] [data-taco='Select2'] {
     @apply !m-auto !w-full;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='Select2'] [data-taco='tag'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='Select2'] [data-taco='tag'] {
     @apply !my-0;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='Select2'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='Select2'] {
     @apply !px-2;
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td[data-cell-truncate='true'] [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='textarea'] {
+    @apply !pr-[5px];
+}
+
+table[data-taco^='table'][data-table-font-size='medium'] td[data-cell-truncate='true'] [data-taco='textarea'] {
     @apply !pb-[5px];
 }
 
-table[data-taco='report'][data-table-font-size='medium'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
     @apply z-10 !-mr-4;
 }
 
 /* large font size */
-table[data-taco='report'][data-table-font-size='large'] td > [data-taco='button'],
-table[data-taco='report'][data-table-font-size='large'] td > [data-taco='icon-button'] {
+table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='button'],
+table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='icon-button'] {
     @apply !-my-1;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td > [data-taco='icon'] {
+table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='icon'] {
     @apply !-my-0.5;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='select2-container'],
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'],
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='input'],
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='select2-container'],
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='Select2'],
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input'],
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'] {
     @apply !-mx-[11px] !-mb-[7.5px] !-mt-[8.5px] !w-[calc(100%_+_22px)] focus:z-10;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='select2-container'] [data-taco='Select2'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='select2-container'] [data-taco='Select2'] {
     @apply !m-auto !w-full;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='Select2'] {
     @apply !px-2.5;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'] [data-taco='tag'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='Select2'] [data-taco='tag'] {
     @apply !my-0 !mt-px;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'] {
     @apply !py-[7.5px];
 }
 
-table[data-taco='report'][data-table-font-size='large'] td:not([data-cell-truncate='true']) > [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='large'] td:not([data-cell-truncate='true']) > [data-taco='textarea'] {
     @apply !pb-[8.5px];
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='input'],
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'],
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='textarea'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input'],
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='Select2'],
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'] {
     @apply h-10 px-2.5 text-base;
 }
 
-table[data-taco='report'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
     @apply !-mr-[19px] !h-10 !w-10;
 }
 
-table[data-taco='report'][data-table-font-size='large']
+table[data-taco^='table'][data-table-font-size='large']
     td
     [data-taco='input-container']
     [data-affix-type='postfix']
@@ -913,97 +933,97 @@ table[data-taco='report'][data-table-font-size='large']
 
 /* row/cell backgrounds -- we have to be specific so that nested tables don't inherit */
 /* normal rows */
-table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td {
+table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td {
             @apply bg-white;
         }
-table[data-taco='report'] > tbody > tr:not([data-row-selected]):hover > td,
-        table[data-taco='report'] > tbody > tr:not([data-row-selected])[data-row-active] > td,
-        table[data-taco='report'] > tbody > tr:not([data-row-selected])[data-row-group] > td {
+table[data-taco^='table'] > tbody > tr:not([data-row-selected]):hover > td,
+        table[data-taco^='table'] > tbody > tr:not([data-row-selected])[data-row-active] > td,
+        table[data-taco^='table'] > tbody > tr:not([data-row-selected])[data-row-group] > td {
             --table-row-actions-shadow: theme(colors.grey.100);
             @apply bg-grey-100;
         }
 /* search highlighting */
-table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='true'] {
+table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='true'] {
             --table-row-actions-shadow: #e9f2ff;
             @apply !bg-[#e9f2ff];
         }
-table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='current'] {
+table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='current'] {
             --table-row-actions-shadow: #bdd7fc;
             @apply !bg-[#bdd7fc];
         }
 /* selected rows */
-table[data-taco='report'] > tbody > tr[data-row-selected] > td {
+table[data-taco^='table'] > tbody > tr[data-row-selected] > td {
             @apply bg-blue-100;
         }
-table[data-taco='report'] > tbody > tr[data-row-selected]:hover > td,
-        table[data-taco='report'] > tbody > tr[data-row-selected][data-row-active] > td,
-        table[data-taco='report'] > tbody > tr[data-row-selected][data-row-group] > td {
+table[data-taco^='table'] > tbody > tr[data-row-selected]:hover > td,
+        table[data-taco^='table'] > tbody > tr[data-row-selected][data-row-active] > td,
+        table[data-taco^='table'] > tbody > tr[data-row-selected][data-row-group] > td {
             --table-row-actions-shadow: #d6e3f6;
             @apply bg-[#d6e3f6];
         }
 /* search highlighting */
-table[data-taco='report'] > tbody > tr[data-row-selected] > td[data-cell-highlighted] {
+table[data-taco^='table'] > tbody > tr[data-row-selected] > td[data-cell-highlighted] {
             --table-row-actions-shadow: #b4d2fd;
             @apply !bg-[#b4d2fd];
         }
 
 /* normal rows */
 
-table[data-taco='report']:focus-within > tbody > tr:not([data-row-selected])[data-row-active] > td {
+table[data-taco^='table']:focus-within > tbody > tr:not([data-row-selected])[data-row-active] > td {
             --table-row-actions-shadow: theme(colors.grey.200);
             @apply bg-grey-200;
         }
 
 /* selected rows */
 
-table[data-taco='report']:focus-within > tbody > tr[data-row-selected][data-row-active] > td {
+table[data-taco^='table']:focus-within > tbody > tr[data-row-selected][data-row-active] > td {
             --table-row-actions-shadow: #ccd8eb;
             @apply bg-[#ccd8eb];
         }
 
 /* normal rows */
 
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected]):not([data-row-active]) > td {
+table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected]):not([data-row-active]) > td {
             --table-row-actions-shadow: theme(colors.white);
             @apply bg-white;
         }
 
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected])[data-row-active] > td {
+table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected])[data-row-active] > td {
             --table-row-actions-shadow: theme(colors.grey.200);
             @apply bg-grey-200;
         }
 
 /* selected rows */
 
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected]:not([data-row-active]) > td {
+table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected]:not([data-row-active]) > td {
             --table-row-actions-shadow: theme(colors.blue.100);
             @apply bg-blue-100;
         }
 
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected][data-row-active] > td {
+table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected][data-row-active] > td {
             --table-row-actions-shadow: #ccd8eb;
             @apply bg-[#CCD8EB];
         }
 
 /* row metadata */
-table[data-taco='report'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
+table[data-taco^='table'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
     @apply !border-b-0 border-t font-bold;
 }
 
-table[data-taco='report'] tbody tr[data-row-group='true'] + tr[data-row-meta-layout='heading'] td {
+table[data-taco^='table'] tbody tr[data-row-group='true'] + tr[data-row-meta-layout='heading'] td {
     @apply !border-t-0;
 }
 
-table[data-taco='report'] tbody tr[data-row-meta-layout='summary']:not([data-row-group='true']) td {
+table[data-taco^='table'] tbody tr[data-row-meta-layout='summary']:not([data-row-group='true']) td {
     @apply !border-b-0 font-bold;
 }
 
-table[data-taco='report'] tbody tr[data-row-meta-layout='item']:not([data-row-group='true']) td {
+table[data-taco^='table'] tbody tr[data-row-meta-layout='item']:not([data-row-group='true']) td {
     @apply !border-b-0;
 }
 
 /* printing */
-table[data-taco='report'] [data-cell-id^='__'] {
+table[data-taco^='table'] [data-cell-id^='__'] {
     @apply print:hidden;
 }
 
@@ -1123,407 +1143,80 @@ table[data-taco='report'] [data-cell-id^='__'] {
     @apply flex w-3/12 rounded bg-blue-500 p-4 font-bold text-white;
 }
 
-/* cells */
-[role='cell'],
-[role='columnheader'],
-[data-taco='table3-column-group'] > div,
-[data-taco='table2-footer-summary'] {
-    @apply border-grey-300;
-}
-
-[role='cell']:not([data-highlighted='true']),
-[role='columnheader'],
-[data-taco='table3-column-group'] > div {
-    @apply flex;
-}
-
-[data-taco='table3-column-group'] > div {
-    @apply grow;
-}
-
-/* In cases where row height might differ from default one (example: textarea without truncate or changing of font size or row height),
-   we need to prevent editing controls to take all available space */
-[role='cell']:not([data-highlighted='true']) {
-    @apply items-start;
-}
-
-[role='cell'][data-align='left'],
-[role='columnheader'][data-align='left'],
-[data-taco='table3-column-group'][data-align='left'] > div {
-    @apply justify-start text-left;
-}
-
-[role='cell'][data-align='center'],
-[role='columnheader'][data-align='center'],
-[data-taco='table3-column-group'][data-align='center'] > div {
-    @apply justify-center text-center;
-}
-
-[role='cell'][data-align='right'],
-[role='columnheader'][data-align='right'],
-[data-taco='table3-column-group'][data-align='right'] > div {
-    @apply justify-end text-right;
-}
-
-[role='row']:not(:last-child) [role='cell'] {
-    @apply border-b;
-}
-
-/* Removes a pixel space between the row and spacer div, so that the spacer div's top border appears like
-   bottom border of the cells */
-[role='row']:last-child [role='cell'] {
-    @apply -mb-px;
-}
-
-/* row/cell backgrounds */
-
-[role='columnheader'],
-[data-taco='table3-column-group'] > div {
-    @apply bg-white;
-}
-
-[role='columnheader'] [data-taco='header-separator'] {
-    @apply -mr-1;
-}
-[data-taco='table3-column-group'] [data-taco='header-separator'] {
-    @apply -mr-3;
-}
-
-/* normal rows */
-[role='row']:not([data-selected='true']):not([data-invalid='true']) [role='cell'] {
-        @apply bg-white;
-    }
-[role='row']:not([data-selected='true']):not([data-invalid='true']):hover [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.grey.100);
-        @apply bg-grey-100;
-    }
-[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.grey.100);
-        @apply bg-grey-100;
-    }
-[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true']:hover [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.grey.100);
-        @apply bg-grey-100;
-    }
-/* Fields shouldn’t have white background when not in current row and hovered*/
-[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='false']:hover [role='cell'] .bg-white {
-            @apply !bg-grey-100;
-        }
-/* normal rows when focus is inside the table */
-[data-taco='table2']:focus-within
-    [role='row'][data-current='true']:not([data-selected='true']):not([data-invalid='true'])
-    [role='cell'] {
-    --table3-row-actions-shadow: theme(colors.grey.200);
-    @apply bg-grey-200;
-}
-/* normal rows when hover is paused */
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.white);
-        @apply !bg-white;
-    }
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.grey.200);
-        @apply !bg-grey-200;
-    }
-
-/* selected rows */
-[role='row'][data-selected='true']:not([data-invalid='true']) [role='cell'] {
-        @apply bg-blue-100;
-    }
-[role='row'][data-selected='true']:not([data-invalid='true']):hover [role='cell'] {
-        --table3-row-actions-shadow: #d6e3f6;
-        @apply bg-[#D6E3F6];
-    }
-[role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true']:hover [role='cell'],
-    
-    [role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: #d6e3f6;
-        @apply bg-[#D6E3F6];
-    }
-/* selected rows when focus is inside the table */
-[data-taco='table2']:focus-within
-    [role='row'][data-current='true'][data-selected='true']:not([data-invalid='true'])
-    [role='cell'] {
-    --table3-row-actions-shadow: #ccd8eb;
-    @apply bg-[#CCD8EB];
-}
-/* selected rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.blue.100);
-        @apply !bg-blue-100;
-    }
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: #ccd8eb;
-        @apply !bg-[#CCD8EB];
-    }
-
-/* error rows */
-[role='row'][data-invalid='true'] [role='cell'] {
-        @apply bg-[#FFEDE9];
-    }
-[role='row'][data-invalid='true']:hover [role='cell'] {
-        --table3-row-actions-shadow: #ffe4de;
-        @apply bg-[#FFE4DE];
-    }
-[role='row'][data-invalid='true'][data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.red.100);
-        @apply bg-red-100;
-    }
-[role='row'][data-invalid='true'][data-current='true']:hover [role='cell'] {
-        --table3-row-actions-shadow: #ffe4de;
-        @apply bg-[#FFE4DE];
-    }
-/* Fields with errors shouldn’t have white background when not in current row */
-[role='row'][data-invalid='true'][data-current='false'] [role='cell'] .bg-white {
-            @apply !bg-[#FFEDE9];
-        }
-/* Request from UX: In error state, input backgroud color should be the same as row background color */
-[role='row'][data-invalid='true'][data-current='false']:hover [role='cell'] .bg-white {
-            @apply !bg-[#FFE4DE];
-        }
-/* error rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-invalid='true'] [role='cell'] {
-    --table3-row-actions-shadow: theme(colors.red.100);
-    @apply bg-red-100;
-}
-/* error rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-invalid='true']:hover:not([data-current='true']) [role='cell'] {
-        --table3-row-actions-shadow: #ffede9;
-        @apply !bg-[#FFEDE9];
-    }
-[data-pause-hover='true'] [role='row'][data-invalid='true']:hover[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.red.100);
-        @apply !bg-red-100;
-    }
-
-/* dragged over row */
-[role='row'][data-dragged-over='true'] [role='cell'] {
-    @apply !bg-grey-100;
-}
-/* dragging row */
-[role='row'][aria-grabbed='true'] [role='cell'] {
-    @apply !wcag-blue-500;
-}
-
-/* error row */
-/*!!!!*/
-[data-taco='table2-body'] [role='row'][data-invalid='true'] [role='cell'] {
-    /*@apply !bg-[#FFF5F2];*/
-}
-
-/* cell component overrides */
-
-/* small font size */
-[data-font-size='small'] [role='cell'] > [data-taco='button'],
-[data-font-size='small'] [role='cell'] > [data-taco='icon-button'] {
-    @apply !-my-2;
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
-    @apply !h-4 !w-4;
-}
-
-[data-font-size='small'] [role='cell'] > [data-taco='icon'],
-[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
-    @apply !-my-[3px];
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
-[data-font-size='small'] [role='cell'] [data-taco='icon'],
-[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
-    @apply !-my-0.5 !text-xs;
+/* editing */
+table[data-taco='table3'][data-table-editing-mode='detailed'] td [data-taco='input']:focus,
+table[data-taco='table3'][data-table-editing-mode='detailed'] td [data-taco='textarea']:focus {
+    @apply yt-focus-dark;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='tag'] {
-    @apply h-4 min-h-[theme(spacing.4)];
+table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='input'],
+table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='textarea'],
+table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='Select2'] {
+    @apply bg-grey-100;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='Select2'],
-[data-font-size='small'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-[2px];
+table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='switch'] {
+    @apply opacity-50;
 }
 
-/* from validation */
-[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
-[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
-[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
-[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
-    @apply !-mt-1;
-    @apply !mb-0;
-}
-/*---*/
-
-[data-font-size='small'] [role='cell'] [data-taco='textarea'] {
-    @apply py-px leading-4;
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='input'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'],
-[data-font-size='small'] [role='cell'] [data-taco='textarea'],
-[data-font-size='small'] [role='cell'] [data-taco='combobox'] {
-    @apply h-6 min-h-[theme(spacing.6)] px-1.5 text-xs;
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] button {
-    @apply !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)];
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] [data-taco='icon'] {
-    @apply !h-4 !w-4;
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='checkbox'],
-[data-font-size='small'] [role='cell'] [data-taco='checkbox-container'],
-[data-font-size='small'] [role='cell'] [data-taco='switch'],
-[data-font-size='small'] [role='cell'] [data-taco='switch-container'] {
-    @apply !-my-0.5;
-}
-
-[data-font-size='small'] [role='cell'] [data-taco='checkbox-container'] [data-taco='checkbox'],
-[data-font-size='small'] [role='cell'] [data-taco='switch-container'] [data-taco='switch'] {
-    @apply !my-0;
+table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-move='true'] {
+    @apply rounded border-2 border-blue-500 px-px;
 }
 
-/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
-
-[data-font-size='small'] [role='cell'][data-editable]:not([data-highlighted='true']) {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_6px_-_1px)];
+table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-move='true'] td {
+        @apply border-b-0;
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-   because it should take all the available space in the cell */
-
-[data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_6px_-_1px)];
-    }
-
-[data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
-[data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
-[data-font-size='small'] [role='cell'][data-editable] [data-taco='switch'],
-[data-font-size='small'] [role='cell'][data-editable] [data-taco='switch-container'] {
-    @apply !mx-[calc(var(--table3-cell-padding-x)_-_1px)] !-mt-px;
-}
-
-/* medium font size */
-[data-font-size='medium'] [role='cell'] > [data-taco='button'],
-[data-font-size='medium'] [role='cell'] > [data-taco='icon-button'] {
-    @apply !-my-1.5;
-}
-
-[data-font-size='medium'] [role='cell'] > [data-taco='icon'] {
-    @apply !-my-0.5;
-}
-
-[data-font-size='medium'] [role='cell'] [data-taco='Select2'] {
-    @apply !px-2;
-}
-
-[data-font-size='medium'] [role='cell'] [data-taco='Select2'],
-[data-font-size='medium'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-[4px];
-}
-
-/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
-
-[data-font-size='medium'] [role='cell'][data-editable]:not([data-highlighted='true']) {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
+table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-move='true'] > td:first-child {
+        @apply rounded-l;
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-   because it should take all the available space in the cell */
-
-[data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
+table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-move='true'] > td:last-child {
+        @apply rounded-l;
     }
 
-[data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
-[data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
-[data-font-size='medium'] [role='cell'][data-editable] [data-taco='switch'],
-[data-font-size='medium'] [role='cell'][data-editable] [data-taco='switch-container'] {
-    @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
-}
-
-[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
-[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
-[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
-[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
-    @apply !-mt-1.5 !mb-0;
-}
+/* invalid rows */
 
-/* large font size */
-[data-font-size='large'] [role='cell'] > [data-taco='button'],
-[data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
-    @apply !-my-1;
-}
-
-[data-font-size='large'] [role='cell'] > [data-taco='icon'] {
-    @apply !-my-0.5;
-}
-
-[data-font-size='large'] [role='cell'] [data-taco='Select2'] {
-    @apply !px-2.5;
-}
-
-[data-font-size='large'] [role='cell'] [data-taco='Select2'],
-[data-font-size='large'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-[6.5px];
-}
-
-[data-font-size='large'] [role='cell'] [data-taco='textarea'] {
-    @apply py-[9.5px];
-}
-
-[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
-[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
-[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
-[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
-    @apply !-mt-2;
-    @apply !mb-0;
-}
-
-[data-font-size='large'] [role='cell'] [data-taco='input'],
-[data-font-size='large'] [role='cell'] [data-taco='Select2'],
-[data-font-size='large'] [role='cell'] [data-taco='textarea'] {
-    @apply h-10 px-2.5 text-base;
-}
-
-[data-font-size='large'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] button {
-    @apply !h-10 !w-10;
-}
-
-[data-font-size='large'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] [data-taco='icon'] {
-    @apply !h-6 !w-6;
-}
-
-/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
-
-[data-font-size='large'] [role='cell'][data-editable]:not([data-highlighted='true']) {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
-    }
+table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'] > td, table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true'] > td, table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'] > td {
+            --table-row-actions-shadow: #ffe4de;
+            @apply bg-[#ffede9];
+        }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-   because it should take all the available space in the cell */
+table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:hover > td,
+        table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'][data-row-group] > td,
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true']:hover > td,
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true'][data-row-group] > td,
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:hover > td,
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'][data-row-group] > td {
+            --table-row-actions-shadow: #ffe4de;
+            @apply bg-[#ffe4de];
+        }
 
-[data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
-    }
+table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'][data-row-active] > td,
+        table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'][data-row-active]:hover > td,
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true'][data-row-active] > td,
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true'][data-row-active]:hover > td,
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'][data-row-active] > td,
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'][data-row-active]:hover > td {
+            --table-row-actions-shadow: theme(colors.red.100);
+            @apply bg-red-100;
+        }
 
-[data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
-[data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],
-[data-font-size='large'] [role='cell'][data-editable] [data-taco='switch'],
-[data-font-size='large'] [role='cell'][data-editable] [data-taco='switch-container'] {
-    @apply !mx-[calc(var(--table3-cell-padding-x)_-_5px)] !mt-px;
-}
+/* search highlighting */
 
-/* Icon inside column header button uses em values therefore text-sm is required to prevent icon
-   from overflowing button's boundaries */
-[data-font-size='large'] [role='columnheader'] button {
-    @apply !text-sm;
-}
+table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'] > td[data-cell-highlighted], table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true'] > td[data-cell-highlighted], table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true'] > td[data-cell-highlighted] {
+            --table-row-actions-shadow: #b4d2fd;
+            @apply !bg-[#b4d2fd];
+        }
 
-/* When spinner is rendered in the last cell of the table, it slightly pushes the edge of the table(while rotating),
-   and making horisontal scroll bar jump */
-[data-editing='true'] [role='cell']:last-child [data-taco='spinner'] {
-    overflow: hidden;
-}
+table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='input'],
+        table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='textarea'],
+        table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='Select2'],
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='input'],
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='textarea'],
+        table[data-taco='table3']:focus-within > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='Select2'],
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='input'],
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='textarea'],
+        table[data-taco='table3'][data-table-pause-hover='true'] > tbody > tr[data-row-editing-invalid='true']:not([data-row-active='true']) td [data-taco='Select2'] {
+            @apply !bg-transparent;
+        }