Rebased with 11.x

Closes #3332685

core/themes/claro/css/components/tables.css

@@ -12,8 +12,7 @@
 
 table {
   width: 100%;
-  margin-top: var(--space-l);
-  margin-bottom: var(--space-l);
+  margin-block: var(--space-l);
   border-collapse: collapse;
 }
 
@@ -22,11 +21,7 @@ table {
 }
 
 caption {
-  text-align: left; /* LTR */
-}
-
-[dir="rtl"] caption {
-  text-align: right;
+  text-align: start;
 }
 
 th {
@@ -34,48 +29,50 @@ th {
   box-sizing: border-box;
   height: var(--space-xl);
   padding: var(--space-xs) var(--space-m);
-  text-align: left; /* LTR */
+  text-align: start;
   color: var(--color-text);
   background: var(--color-gray-050);
   line-height: 1.25rem; /* 20px */
 }
 
-[dir="rtl"] th {
-  text-align: right;
-}
-
-/**
- * Table sort.
- */
-
-/* Table head cell containing sort link. */
+/* The actual sort link. */
 
 .sortable-heading {
   padding: 0 var(--space-m);
 }
 
-/* The actual sort link. */
-
 .sortable-heading > a {
   display: block;
-  padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
+  padding-block: var(--space-xs);
+  padding-inline: 0 1.5rem;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: inherit;
 }
 
-[dir="rtl"] .sortable-heading > a {
-  padding-right: 0;
-  padding-left: 1.5rem;
+.sortable-heading > a:focus,
+.sortable-heading > a:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.sortable-heading > a:focus::before,
+.sortable-heading > a:hover::before {
+  border-color: inherit;
+}
+
+.sortable-heading > a:focus::after,
+.sortable-heading > a:hover::after {
+  opacity: 1;
 }
 
 .sortable-heading > a::before {
   position: absolute;
   z-index: 0;
-  top: 0;
-  right: 1rem;
-  bottom: 0;
-  left: 1rem;
+  inset-block-start: 0;
+  inset-inline-end: 1rem;
+  inset-block-end: 0;
+  inset-inline-start: 1rem;
   display: block;
   content: "";
   border-bottom: 0.125rem solid transparent;
@@ -83,11 +80,11 @@ th {
 
 .sortable-heading > a::after {
   position: absolute;
-  top: 50%;
-  right: 1rem;
+  inset-block-start: 50%;
+  inset-inline-end: 1rem;
   width: 0.875rem;
   height: 1rem;
-  margin-top: -0.5rem;
+  margin-block-start: -0.5rem;
   content: "";
   opacity: 0.5;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
@@ -103,40 +100,17 @@ th {
   }
 }
 
-[dir="rtl"] .sortable-heading > a::after {
-  right: auto;
-  left: 1rem;
+[dir="rtl"] :is(.sortable-heading > a::after) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
 }
 
 @media (forced-colors: active) {
-  [dir="rtl"] .sortable-heading > a::after {
-    background: linktext;
+  [dir="rtl"] :is(.sortable-heading > a::after) {
     -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
     mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat 50% 50%;
   }
 }
 
-/* Sortable cell's link focus/hover state. */
-
-.sortable-heading > a:focus,
-.sortable-heading > a:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.sortable-heading > a:focus::before,
-.sortable-heading > a:hover::before {
-  border-color: inherit;
-}
-
-.sortable-heading > a:focus::after,
-.sortable-heading > a:hover::after {
-  opacity: 1;
-}
-
-/* Sortable cell's active state. */
-
 .sortable-heading.is-active > a {
   color: var(--color-absolutezero);
 }
@@ -153,16 +127,6 @@ tr {
   border-bottom: 0.0625rem solid var(--color-gray-200);
 }
 
-tr,
-.draggable-table.tabledrag-disabled tr {
-  color: var(--color-text);
-  background: var(--color-white);
-}
-
-thead tr {
-  border: 0;
-}
-
 tr:hover,
 tr:focus {
   color: var(--color-text);
@@ -181,27 +145,27 @@ tr.color-error:focus {
   background: #fcf4f2;
 }
 
+tr,
+.draggable-table.tabledrag-disabled tr {
+  color: var(--color-text);
+  background: var(--color-white);
+}
+
+thead tr {
+  border: 0;
+}
+
 td {
   box-sizing: border-box;
   height: 4rem;
   padding: var(--space-xs) var(--space-m);
-  text-align: left; /* LTR */
-}
-
-[dir="rtl"] td {
-  text-align: right;
+  text-align: start;
 }
 
 td .item-list ul {
   margin: 0;
 }
 
-/* This is required to win over specificity of [dir="rtl"] .item-list ul */
-
-[dir="rtl"] td .item-list ul {
-  margin: 0;
-}
-
 td.is-active {
   background: none;
 }
@@ -239,7 +203,7 @@ th.select-all {
  */
 
 .caption {
-  margin-bottom: 1.25rem; /* 20px */
+  margin-block-end: 1.25rem; /* 20px */
 }
 
 tfoot {
@@ -280,11 +244,11 @@ td.priority-medium {
 }
 
 .tabledrag-toggle-weight-wrapper {
-  margin-top: var(--space-l);
+  margin-block-start: var(--space-l);
   line-height: calc(28rem / 16);
 }
 
 .tabledrag-toggle-weight-wrapper + table,
 .tabledrag-toggle-weight-wrapper + .tableresponsive-toggle-columns + table {
-  margin-top: 0;
+  margin-block-start: 0;
 }