@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/table/table.css

@@ -54,53 +54,55 @@
   border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
   background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
   forced-color-adjust: none;
-}
-
-._5a2Axa_react-spectrum-Table-row-dragPreview:after {
-  box-shadow: none;
-}
 
-._5a2Axa_react-spectrum-Table-row-dragPreview ._5a2Axa_react-spectrum-Table-cell {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+  &:after {
+    box-shadow: none;
+  }
 
-._5a2Axa_react-spectrum-Table-row-dragPreview._5a2Axa_react-spectrum-Table-row-dragPreview--multiple {
-  position: relative;
-}
+  & ._5a2Axa_react-spectrum-Table-cell {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
-._5a2Axa_react-spectrum-Table-row-dragPreview._5a2Axa_react-spectrum-Table-row-dragPreview--multiple:after {
-  content: "";
-  z-index: -1;
-  border: 1px solid var(--spectrum-dropzone-border-color-selected-hover, var(--spectrum-global-color-blue-400));
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
-  forced-color-adjust: none;
-  top: 4px;
-  width: 100%;
-  height: 100%;
-  display: block;
-  position: absolute;
-  inset-inline-start: 4px;
-}
+  &._5a2Axa_react-spectrum-Table-row-dragPreview--multiple {
+    position: relative;
+
+    &:after {
+      content: "";
+      z-index: -1;
+      border: 1px solid var(--spectrum-dropzone-border-color-selected-hover, var(--spectrum-global-color-blue-400));
+      border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+      background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+      forced-color-adjust: none;
+      top: 4px;
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      inset-inline-start: 4px;
+    }
+  }
 
-._5a2Axa_react-spectrum-Table-row-dragPreview ._5a2Axa_react-spectrum-Table-row-badge {
-  color: var(--spectrum-table-row-badge-text-color);
-  background: var(--spectrum-table-row-badge-background-color);
-  padding: 0 var(--spectrum-global-dimension-size-100);
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  margin-inline-end: var(--spectrum-global-dimension-size-100);
-  height: fit-content;
-  margin-top: auto;
-  margin-bottom: auto;
+  & ._5a2Axa_react-spectrum-Table-row-badge {
+    color: var(--spectrum-table-row-badge-text-color);
+    background: var(--spectrum-table-row-badge-background-color);
+    padding: 0 var(--spectrum-global-dimension-size-100);
+    border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+    margin-inline-end: var(--spectrum-global-dimension-size-100);
+    height: fit-content;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 }
 
-._5a2Axa_react-spectrum-Table-body._5a2Axa_react-spectrum-Table-body--dropTarget {
-  border-color: var(--spectrum-table-dropindicator-border-color);
-  background-color: var(--spectrum-alias-highlight-selected);
-  box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  forced-color-adjust: none;
+._5a2Axa_react-spectrum-Table-body {
+  &._5a2Axa_react-spectrum-Table-body--dropTarget {
+    border-color: var(--spectrum-table-dropindicator-border-color);
+    background-color: var(--spectrum-alias-highlight-selected);
+    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    forced-color-adjust: none;
+  }
 }
 
 ._5a2Axa_react-spectrum-Table-InsertionIndicator {
@@ -109,75 +111,81 @@
   outline: none;
   position: absolute;
   inset-inline-start: var(--spectrum-table-dropindicator-circle-size);
-}
 
-._5a2Axa_react-spectrum-Table-InsertionIndicator._5a2Axa_react-spectrum-Table-InsertionIndicator--dropTarget {
-  background: var(--spectrum-table-dropindicator-border-color);
-  border-bottom: 2px solid var(--spectrum-table-dropindicator-border-color);
-  forced-color-adjust: none;
-}
+  &._5a2Axa_react-spectrum-Table-InsertionIndicator--dropTarget {
+    background: var(--spectrum-table-dropindicator-border-color);
+    border-bottom: 2px solid var(--spectrum-table-dropindicator-border-color);
+    forced-color-adjust: none;
 
-._5a2Axa_react-spectrum-Table-InsertionIndicator._5a2Axa_react-spectrum-Table-InsertionIndicator--dropTarget:before {
-  left: calc(var(--spectrum-table-dropindicator-circle-size) * -1);
-}
+    &:before {
+      left: calc(var(--spectrum-table-dropindicator-circle-size) * -1);
+    }
 
-._5a2Axa_react-spectrum-Table-InsertionIndicator._5a2Axa_react-spectrum-Table-InsertionIndicator--dropTarget:after {
-  right: calc(var(--spectrum-table-dropindicator-circle-size) * -1);
-}
+    &:after {
+      right: calc(var(--spectrum-table-dropindicator-circle-size) * -1);
+    }
 
-._5a2Axa_react-spectrum-Table-InsertionIndicator._5a2Axa_react-spectrum-Table-InsertionIndicator--dropTarget:before, ._5a2Axa_react-spectrum-Table-InsertionIndicator._5a2Axa_react-spectrum-Table-InsertionIndicator--dropTarget:after {
-  content: "";
-  top: calc(var(--spectrum-table-dropindicator-circle-size) * -1 / 2 +
+    &:before, &:after {
+      content: "";
+      top: calc(var(--spectrum-table-dropindicator-circle-size) * -1 / 2 +
           var(--spectrum-table-dropindicator-border-size) / 2);
-  width: var(--spectrum-table-dropindicator-circle-size);
-  height: var(--spectrum-table-dropindicator-circle-size);
-  border: var(--spectrum-table-dropindicator-border-size) solid;
-  box-sizing: border-box;
-  border-color: var(--spectrum-table-dropindicator-circle-border-color);
-  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
-  z-index: 5;
-  forced-color-adjust: none;
-  border-radius: 50%;
-  position: absolute;
-}
-
-._5a2Axa_react-spectrum-Table-headCell._5a2Axa_react-spectrum-Table-dragButtonHeadCell {
-  height: inherit;
-  padding: 0;
-}
-
-._5a2Axa_react-spectrum-Table-cell._5a2Axa_react-spectrum-Table-dragButtonCell {
-  padding: var(--spectrum-global-dimension-size-40);
-}
-
-._5a2Axa_react-spectrum-Table-cell._5a2Axa_react-spectrum-Table-dragButtonCell ._5a2Axa_react-spectrum-Table-dragButton {
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  padding: var(--spectrum-global-dimension-size-10);
+      width: var(--spectrum-table-dropindicator-circle-size);
+      height: var(--spectrum-table-dropindicator-circle-size);
+      border: var(--spectrum-table-dropindicator-border-size) solid;
+      box-sizing: border-box;
+      border-color: var(--spectrum-table-dropindicator-circle-border-color);
+      background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+      z-index: 5;
+      forced-color-adjust: none;
+      border-radius: 50%;
+      position: absolute;
+    }
+  }
 }
 
-._5a2Axa_react-spectrum-Table-cell._5a2Axa_react-spectrum-Table-dragButtonCell ._5a2Axa_react-spectrum-Table-dragButton._5a2Axa_focus-ring {
-  box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  forced-color-adjust: none;
-  outline: none;
+._5a2Axa_react-spectrum-Table-headCell {
+  &._5a2Axa_react-spectrum-Table-dragButtonHeadCell {
+    height: inherit;
+    padding: 0;
+  }
 }
 
-._5a2Axa_react-spectrum-Table-cell._5a2Axa_react-spectrum-Table-dragButtonCell ._5a2Axa_react-spectrum-Table-dragButton svg {
-  padding: var(--spectrum-global-dimension-size-40);
-  margin: auto 0;
-  display: block;
+._5a2Axa_react-spectrum-Table-cell {
+  &._5a2Axa_react-spectrum-Table-dragButtonCell {
+    padding: var(--spectrum-global-dimension-size-40);
+
+    & ._5a2Axa_react-spectrum-Table-dragButton {
+      border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+      padding: var(--spectrum-global-dimension-size-10);
+
+      &._5a2Axa_focus-ring {
+        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        forced-color-adjust: none;
+        outline: none;
+      }
+
+      & svg {
+        padding: var(--spectrum-global-dimension-size-40);
+        margin: auto 0;
+        display: block;
+      }
+    }
+  }
 }
 
-._5a2Axa_react-spectrum-Table-row._5a2Axa_react-spectrum-Table-row--dropTarget {
-  border: 1px var(--spectrum-table-dropindicator-border-color);
-  box-shadow: inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
+._5a2Axa_react-spectrum-Table-row {
+  &._5a2Axa_react-spectrum-Table-row--dropTarget {
+    border: 1px var(--spectrum-table-dropindicator-border-color);
+    box-shadow: inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
       inset -2px 0 0 0 var(--spectrum-table-dropindicator-border-color),
       inset 0 -3px 0 0 var(--spectrum-table-dropindicator-border-color),
       inset 0 2px 0 0 var(--spectrum-table-dropindicator-border-color);
-  forced-color-adjust: none;
-}
+    forced-color-adjust: none;
+  }
 
-._5a2Axa_react-spectrum-Table-row ._5a2Axa_react-spectrum-Table-cellWrapper._5a2Axa_react-spectrum-Table-cellWrapper--dropTarget {
-  background-color: var(--spectrum-table-droptarget-background-color);
+  & ._5a2Axa_react-spectrum-Table-cellWrapper._5a2Axa_react-spectrum-Table-cellWrapper--dropTarget {
+    background-color: var(--spectrum-table-droptarget-background-color);
+  }
 }
 
 @media (forced-colors: active) {

package/dist/private/table/table.css.map

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;;;;AAuBA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;;;;AAQA;;;;;;;;;;AAYE;;;;AAIA;;;;;;AAMA;;;;AAGE;;;;;;;;;;;;;;;AAkBF;;;;;;;;;;;AAaA;;;;;;;AAUF;;;;;;;;AAOE;;;;;;AAQE;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEJ","sources":["packages/@adobe/react-spectrum/src/table/table.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-Table {\n  --spectrum-table-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n  --spectrum-table-dropindicator-border-color: var(--spectrum-dropzone-border-color-selected-hover);\n  --spectrum-table-dropindicator-circle-border-color: var(\n    --spectrum-dropindicator-circle-border-color\n  );\n\n  --spectrum-table-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n  --spectrum-table-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n  --spectrum-table-dropzone-border-color-selected-hover: var(\n    --spectrum-dropzone-border-color-selected-hover\n  );\n\n  --spectrum-table-item-draghandle-border-color-key-focus: var(\n    --spectrum-table-item-border-color-key-focus\n  );\n}\n\n.react-spectrum-Table {\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n}\n\n.react-spectrum-Table-cell {\n  display: flex;\n  align-items: center;\n}\n\n.react-spectrum-Table-cellWrapper > .react-spectrum-Table-cell {\n  height: 100%;\n}\n\n.react-spectrum-Table-cell--alignStart {\n  text-align: start;\n  justify-content: flex-start;\n}\n\n.react-spectrum-Table-cell--alignCenter {\n  text-align: center;\n  justify-content: center;\n}\n\n.react-spectrum-Table-cell--alignEnd {\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.react-spectrum-Table-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.react-spectrum-Table-row-dragPreview {\n  --spectrum-table-row-badge-text-color: var(--spectrum-global-color-static-white);\n  --spectrum-table-row-badge-background-color: var(--spectrum-global-color-blue-400);\n\n  width: var(--spectrum-global-dimension-size-2400);\n  border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);\n  border-radius: var(--spectrum-alias-border-radius-regular);\n  background-color: var(--spectrum-table-background-color);\n\n  /* forced-color-adjust: none, so that background-color style will render */\n  forced-color-adjust: none;\n\n  &::after {\n    box-shadow: none;\n  }\n\n  .react-spectrum-Table-cell {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &.react-spectrum-Table-row-dragPreview--multiple {\n    position: relative;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      z-index: -1;\n      top: 4px;\n      inset-inline-start: 4px;\n      width: 100%;\n      height: 100%;\n      border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);\n      border-radius: var(--spectrum-alias-border-radius-regular);\n      background-color: var(--spectrum-table-background-color);\n\n      /* forced-color-adjust: none, so that box-shadow style will render */\n      forced-color-adjust: none;\n    }\n  }\n\n  .react-spectrum-Table-row-badge {\n    color: var(--spectrum-table-row-badge-text-color);\n    background: var(--spectrum-table-row-badge-background-color);\n    padding: 0 var(--spectrum-global-dimension-size-100);\n    border-radius: var(--spectrum-alias-border-radius-regular);\n    margin-inline-end: var(--spectrum-global-dimension-size-100);\n    margin-top: auto;\n    margin-bottom: auto;\n    height: fit-content;\n  }\n}\n\n.react-spectrum-Table-body {\n  &.react-spectrum-Table-body--dropTarget {\n    border-color: var(--spectrum-table-dropindicator-border-color);\n    background-color: var(--spectrum-alias-highlight-selected);\n    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);\n\n    /* forced-color-adjust: none, so that box-shadow style will render */\n    forced-color-adjust: none;\n  }\n}\n\n.react-spectrum-Table-InsertionIndicator {\n  z-index: 3;\n  width: calc(100% - (2 * var(--spectrum-table-dropindicator-circle-size)));\n  inset-inline-start: var(--spectrum-table-dropindicator-circle-size);\n  position: absolute;\n  outline: none;\n\n  &.react-spectrum-Table-InsertionIndicator--dropTarget {\n    background: var(--spectrum-table-dropindicator-border-color);\n    border-bottom: 2px solid var(--spectrum-table-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that background color\n    will render border for insertion indicator. */\n    forced-color-adjust: none;\n\n    &:before {\n      left: calc(var(--spectrum-table-dropindicator-circle-size) * -1);\n    }\n\n    &:after {\n      right: calc(var(--spectrum-table-dropindicator-circle-size) * -1);\n    }\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      top: calc(\n        var(--spectrum-table-dropindicator-circle-size) * -1 / 2 +\n          var(--spectrum-table-dropindicator-border-size) / 2\n      );\n      width: var(--spectrum-table-dropindicator-circle-size);\n      height: var(--spectrum-table-dropindicator-circle-size);\n      border-radius: 50%;\n      border: var(--spectrum-table-dropindicator-border-size) solid;\n      box-sizing: border-box;\n      border-color: var(--spectrum-table-dropindicator-circle-border-color);\n      background-color: var(--spectrum-table-background-color);\n      z-index: 5;\n\n      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-Table-headCell {\n  &.react-spectrum-Table-dragButtonHeadCell {\n    padding: 0;\n    height: inherit;\n  }\n}\n\n.react-spectrum-Table-cell {\n  &.react-spectrum-Table-dragButtonCell {\n    padding: var(--spectrum-global-dimension-size-40);\n\n    .react-spectrum-Table-dragButton {\n      border-radius: var(--spectrum-alias-border-radius-regular);\n      padding: var(--spectrum-global-dimension-size-10);\n\n      &:focus-visible {\n        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);\n        outline: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n\n      svg {\n        margin: auto 0;\n        display: block;\n        padding: var(--spectrum-global-dimension-size-40);\n      }\n    }\n  }\n}\n\n.react-spectrum-Table-row {\n  &.react-spectrum-Table-row--dropTarget {\n    border: 1px var(--spectrum-table-dropindicator-border-color);\n    box-shadow:\n      inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),\n      inset -2px 0 0 0 var(--spectrum-table-dropindicator-border-color),\n      inset 0 -3px 0 0 var(--spectrum-table-dropindicator-border-color),\n      inset 0 2px 0 0 var(--spectrum-table-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that box-shadow style will render */\n    forced-color-adjust: none;\n  }\n\n  .react-spectrum-Table-cellWrapper.react-spectrum-Table-cellWrapper--dropTarget {\n    background-color: var(--spectrum-table-droptarget-background-color);\n  }\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-Table,\n  .react-spectrum-Table-row {\n    --spectrum-table-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n    --spectrum-table-dropindicator-border-color: Highlight;\n    --spectrum-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-table-dropindicator-circle-border-color: Highlight;\n    --spectrum-table-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-table-row-badge-text-color: HighlightText;\n    --spectrum-table-row-badge-background-color: Highlight;\n  }\n}\n"],"names":[],"version":3,"file":"table.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;;;;AAuBA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;;;;AAQA;;;;;;;;;EAYE;;;;EAIA;;;;;;EAMA;;;IAGE;;;;;;;;;;;;;;;;EAkBF;;;;;;;;;;;;AAYF;EACE;;;;;;;;AAUF;;;;;;;EAOE;;;;;IAQE;;;;IAIA;;;;IAIA;;;;;;;;;;;;;;;;;AAwBF;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;AAyBA","sources":["packages/@adobe/react-spectrum/src/table/table.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-Table {\n  --spectrum-table-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n  --spectrum-table-dropindicator-border-color: var(--spectrum-dropzone-border-color-selected-hover);\n  --spectrum-table-dropindicator-circle-border-color: var(\n    --spectrum-dropindicator-circle-border-color\n  );\n\n  --spectrum-table-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n  --spectrum-table-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n  --spectrum-table-dropzone-border-color-selected-hover: var(\n    --spectrum-dropzone-border-color-selected-hover\n  );\n\n  --spectrum-table-item-draghandle-border-color-key-focus: var(\n    --spectrum-table-item-border-color-key-focus\n  );\n}\n\n.react-spectrum-Table {\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n}\n\n.react-spectrum-Table-cell {\n  display: flex;\n  align-items: center;\n}\n\n.react-spectrum-Table-cellWrapper > .react-spectrum-Table-cell {\n  height: 100%;\n}\n\n.react-spectrum-Table-cell--alignStart {\n  text-align: start;\n  justify-content: flex-start;\n}\n\n.react-spectrum-Table-cell--alignCenter {\n  text-align: center;\n  justify-content: center;\n}\n\n.react-spectrum-Table-cell--alignEnd {\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.react-spectrum-Table-centeredWrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.react-spectrum-Table-row-dragPreview {\n  --spectrum-table-row-badge-text-color: var(--spectrum-global-color-static-white);\n  --spectrum-table-row-badge-background-color: var(--spectrum-global-color-blue-400);\n\n  width: var(--spectrum-global-dimension-size-2400);\n  border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);\n  border-radius: var(--spectrum-alias-border-radius-regular);\n  background-color: var(--spectrum-table-background-color);\n\n  /* forced-color-adjust: none, so that background-color style will render */\n  forced-color-adjust: none;\n\n  &::after {\n    box-shadow: none;\n  }\n\n  .react-spectrum-Table-cell {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &.react-spectrum-Table-row-dragPreview--multiple {\n    position: relative;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      z-index: -1;\n      top: 4px;\n      inset-inline-start: 4px;\n      width: 100%;\n      height: 100%;\n      border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);\n      border-radius: var(--spectrum-alias-border-radius-regular);\n      background-color: var(--spectrum-table-background-color);\n\n      /* forced-color-adjust: none, so that box-shadow style will render */\n      forced-color-adjust: none;\n    }\n  }\n\n  .react-spectrum-Table-row-badge {\n    color: var(--spectrum-table-row-badge-text-color);\n    background: var(--spectrum-table-row-badge-background-color);\n    padding: 0 var(--spectrum-global-dimension-size-100);\n    border-radius: var(--spectrum-alias-border-radius-regular);\n    margin-inline-end: var(--spectrum-global-dimension-size-100);\n    margin-top: auto;\n    margin-bottom: auto;\n    height: fit-content;\n  }\n}\n\n.react-spectrum-Table-body {\n  &.react-spectrum-Table-body--dropTarget {\n    border-color: var(--spectrum-table-dropindicator-border-color);\n    background-color: var(--spectrum-alias-highlight-selected);\n    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);\n\n    /* forced-color-adjust: none, so that box-shadow style will render */\n    forced-color-adjust: none;\n  }\n}\n\n.react-spectrum-Table-InsertionIndicator {\n  z-index: 3;\n  width: calc(100% - (2 * var(--spectrum-table-dropindicator-circle-size)));\n  inset-inline-start: var(--spectrum-table-dropindicator-circle-size);\n  position: absolute;\n  outline: none;\n\n  &.react-spectrum-Table-InsertionIndicator--dropTarget {\n    background: var(--spectrum-table-dropindicator-border-color);\n    border-bottom: 2px solid var(--spectrum-table-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that background color\n    will render border for insertion indicator. */\n    forced-color-adjust: none;\n\n    &:before {\n      left: calc(var(--spectrum-table-dropindicator-circle-size) * -1);\n    }\n\n    &:after {\n      right: calc(var(--spectrum-table-dropindicator-circle-size) * -1);\n    }\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      top: calc(\n        var(--spectrum-table-dropindicator-circle-size) * -1 / 2 +\n          var(--spectrum-table-dropindicator-border-size) / 2\n      );\n      width: var(--spectrum-table-dropindicator-circle-size);\n      height: var(--spectrum-table-dropindicator-circle-size);\n      border-radius: 50%;\n      border: var(--spectrum-table-dropindicator-border-size) solid;\n      box-sizing: border-box;\n      border-color: var(--spectrum-table-dropindicator-circle-border-color);\n      background-color: var(--spectrum-table-background-color);\n      z-index: 5;\n\n      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n      forced-color-adjust: none;\n    }\n  }\n}\n\n.react-spectrum-Table-headCell {\n  &.react-spectrum-Table-dragButtonHeadCell {\n    padding: 0;\n    height: inherit;\n  }\n}\n\n.react-spectrum-Table-cell {\n  &.react-spectrum-Table-dragButtonCell {\n    padding: var(--spectrum-global-dimension-size-40);\n\n    .react-spectrum-Table-dragButton {\n      border-radius: var(--spectrum-alias-border-radius-regular);\n      padding: var(--spectrum-global-dimension-size-10);\n\n      &:focus-visible {\n        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);\n        outline: none;\n\n        /* forced-color-adjust: none, so that box-shadow style will render */\n        forced-color-adjust: none;\n      }\n\n      svg {\n        margin: auto 0;\n        display: block;\n        padding: var(--spectrum-global-dimension-size-40);\n      }\n    }\n  }\n}\n\n.react-spectrum-Table-row {\n  &.react-spectrum-Table-row--dropTarget {\n    border: 1px var(--spectrum-table-dropindicator-border-color);\n    box-shadow:\n      inset 2px 0 0 0 var(--spectrum-table-dropindicator-border-color),\n      inset -2px 0 0 0 var(--spectrum-table-dropindicator-border-color),\n      inset 0 -3px 0 0 var(--spectrum-table-dropindicator-border-color),\n      inset 0 2px 0 0 var(--spectrum-table-dropindicator-border-color);\n\n    /* forced-color-adjust: none, so that box-shadow style will render */\n    forced-color-adjust: none;\n  }\n\n  .react-spectrum-Table-cellWrapper.react-spectrum-Table-cellWrapper--dropTarget {\n    background-color: var(--spectrum-table-droptarget-background-color);\n  }\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-Table,\n  .react-spectrum-Table-row {\n    --spectrum-table-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n    --spectrum-table-dropindicator-border-color: Highlight;\n    --spectrum-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-table-dropindicator-circle-border-color: Highlight;\n    --spectrum-table-dropzone-border-color-selected-hover: Highlight;\n    --spectrum-table-row-badge-text-color: HighlightText;\n    --spectrum-table-row-badge-background-color: Highlight;\n  }\n}\n"],"names":[],"version":3,"file":"table.css.map"}