@hermes-ui/angular 0.1.4

package/data/datagrid/_datagrid.clarity.scss

@@ -0,0 +1,1871 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '../tables.clarity';
+@use '../mixins.tables' as table-mixins;
+@use '../../image/icons.clarity';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use '../../popover/dropdown/menu-mixins.clarity';
+@use '../../button/variables.buttons' as button-variables;
+@use '../../forms/styles/variables.forms' as forms-variables;
+@use '../../modal/variables.modal' as modal-variables;
+@use '../../popover/dropdown/variables.dropdown' as dropdown-variables;
+@use '../variables.tables' as tables-variables;
+@use 'variables.datagrid' as datagrid-variables;
+@use 'mixins.datagrid' as datagrid-mixins;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../utils/animations/mixins.animations' as animations-mixins;
+
+@include meta.load-css('properties.datagrid');
+@include mixins.exports('datagrid.clarity') {
+  @include table-mixins.basic-table(
+    '.datagrid',
+    '.datagrid-header',
+    '.datagrid-body',
+    '.datagrid-row',
+    '.datagrid-column',
+    '.datagrid-cell'
+  );
+
+  .datagrid-host {
+    display: flex;
+    flex-flow: column nowrap;
+    position: relative;
+
+    &.datagrid-virtual-scroll {
+      .datagrid {
+        display: flex;
+      }
+
+      .datagrid-table-wrapper,
+      .datagrid-table {
+        overflow: auto;
+      }
+
+      .datagrid-header {
+        position: static;
+        display: flex;
+        flex: 0 0 auto;
+        overflow: auto hidden;
+        scrollbar-width: none;
+
+        .datagrid-row {
+          display: flex;
+          flex: 1 1 auto;
+        }
+      }
+
+      .datagrid-content-virtual .datagrid-rows {
+        min-height: 100%;
+
+        &.datagrid-scrollbar-visible .datagrid-placeholder-container {
+          border-top-color: tokens.$hermes-alias-object-opacity-0;
+        }
+      }
+    }
+  }
+
+  .datagrid {
+    // Overrides the table defaults so the new structure has correct corners
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    overflow: auto;
+    flex: 1 1 auto;
+    margin-top: datagrid-variables.$hermes-datagrid-margin-top;
+
+    &.cdk-virtual-scrollable .datagrid-rows {
+      flex-grow: 0;
+    }
+  }
+
+  .datagrid-overflow-ellipsis .datagrid-row {
+    // Pinned cells sit one level deeper, in their own static container, but they have to truncate
+    // the same way as the scrollable ones.
+    .datagrid-scrolling-cells > .datagrid-cell,
+    .datagrid-pinned-cells > .datagrid-cell {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .datagrid-header,
+  .datagrid-body,
+  .datagrid-row,
+  .datagrid-column,
+  .datagrid-cell,
+  .datagrid-fixed-column {
+    display: block;
+  }
+
+  .datagrid-row {
+    border-top: tables-variables.$hermes-table-borderwidth solid tables-variables.$hermes-table-border-color;
+    min-height: tables-variables.$hermes-table-row-height;
+
+    &:first-of-type {
+      border-top: none;
+      min-height: calc(tables-variables.$hermes-table-row-height - tables-variables.$hermes-table-borderwidth);
+    }
+
+    // The two static containers scroll over the cells next to them, so they carry the background of
+    // the row rather than letting it show through.
+    &:hover,
+    &:hover .datagrid-row-sticky,
+    &:hover .datagrid-pinned-cells {
+      background-color: datagrid-variables.$hermes-datagrid-row-hover-color;
+    }
+
+    &.datagrid-selected,
+    &.datagrid-selected .datagrid-row-sticky,
+    &.datagrid-selected .datagrid-pinned-cells {
+      color: datagrid-variables.$hermes-datagrid-row-selected;
+      background-color: datagrid-variables.$hermes-datagrid-row-selected-background-color;
+    }
+
+    &.datagrid-selected {
+      &:hover,
+      &:hover .datagrid-row-sticky,
+      &:hover .datagrid-pinned-cells {
+        background-color: datagrid-variables.$hermes-datagrid-row-selected-hover-background-color;
+      }
+
+      &:active,
+      &:active .datagrid-row-sticky,
+      &:active .datagrid-pinned-cells {
+        background-color: datagrid-variables.$hermes-datagrid-row-selected-active-background-color;
+      }
+    }
+
+    &:active,
+    &:active .datagrid-row-sticky,
+    &:active .datagrid-pinned-cells {
+      background-color: datagrid-variables.$hermes-datagrid-row-active-color;
+    }
+
+    &.datagrid-row-skeleton {
+      background-color: unset;
+
+      .datagrid-row-master {
+        position: relative;
+
+        @include animations-mixins.skeleton-loading();
+
+        &::before {
+          position: absolute;
+          top: tables-variables.$hermes-table-cell-vertical-padding;
+          left: tables-variables.$hermes-table-cell-horizontal-padding;
+          height: calc(100% - (2 * tables-variables.$hermes-table-cell-vertical-padding));
+          width: calc(100% - (2 * tables-variables.$hermes-table-cell-horizontal-padding));
+          z-index: map.get(variables.$hermes-layers, datagrid-row-skeleton);
+        }
+
+        .datagrid-row-sticky,
+        .datagrid-row-scrollable {
+          opacity: 0;
+        }
+      }
+    }
+
+    .datagrid-row-detail-wrapper {
+      flex: 1 1 auto;
+      display: flex;
+    }
+
+    .datagrid-row-detail {
+      border-top: tables-variables.$hermes-table-borderwidth solid tables-variables.$hermes-table-border-color;
+      min-height: tables-variables.$hermes-table-row-height;
+      width: auto;
+
+      .datagrid-cell {
+        border: none;
+
+        &.datagrid-container {
+          @include mixins.generate-typography-token(
+            'BODY-14-RG-STD',
+            (
+              font-size: tables-variables.$hermes-table-fontsize,
+            )
+          );
+        }
+      }
+    }
+
+    .datagrid-select {
+      position: relative;
+
+      input {
+        @include mixins.min-equilateral(density.$hermes-base-icon-size-s);
+
+        padding: 0;
+      }
+
+      .hermes-checkbox-wrapper,
+      .hermes-radio-wrapper {
+        @include mixins.max-equilateral(density.$hermes-base-icon-size-s);
+
+        .hermes-control-label:has(.hermes-sr-only) {
+          padding: 0;
+          min-height: tokens.$hermes-global-space-1;
+          min-width: tokens.$hermes-global-space-1;
+        }
+      }
+
+      &,
+      input {
+        cursor: pointer;
+      }
+
+      &.hermes-form-control-disabled {
+        &,
+        input {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    .datagrid-signpost-trigger .signpost {
+      margin: calc(-1 * density.$hermes-base-vertical-offset-multi-row-inline-m) 0;
+      height: tables-variables.$hermes-table-cell-height;
+
+      .signpost-trigger {
+        height: inherit;
+        line-height: tables-variables.$hermes-table-cell-height;
+      }
+    }
+
+    &.datagrid-row-loading {
+      .datagrid-row-sticky {
+        display: none;
+      }
+
+      .datagrid-cell {
+        display: flex;
+        padding: density.$hermes-base-vertical-offset-2xl density.$hermes-base-horizontal-offset-2xl;
+        align-items: center;
+        gap: density.$hermes-base-gap-m;
+        justify-content: center;
+      }
+    }
+  }
+
+  .datagrid-row-sticky {
+    background-color: tables-variables.$hermes-table-bgcolor;
+    display: flex;
+    flex-wrap: nowrap;
+    position: sticky;
+    left: 0;
+    z-index: map.get(variables.$hermes-layers, datagrid-row-sticky);
+
+    &-scroll {
+      right: 0;
+
+      > div.datagrid-column {
+        min-width: tokens.$hermes-global-space-7;
+        padding: 0;
+
+        @include datagrid-mixins.datagrid-column-separator('left', 'before');
+      }
+    }
+
+    .datagrid-cell:last-child,
+    .datagrid-cell.datagrid-select:not(
+        :has(+ .datagrid-row-actions, + .datagrid-expandable-caret, + .datagrid-detail-caret)
+      ),
+    .datagrid-cell.datagrid-row-actions:not(:has(+ .datagrid-expandable-caret, + .datagrid-detail-caret)),
+    .datagrid-cell.datagrid-expandable-caret,
+    .datagrid-cell.datagrid-detail-caret {
+      @include datagrid-mixins.datagrid-column-separator();
+    }
+  }
+
+  .datagrid-pinned-cells {
+    // The container comes after the row controls, which do not scroll either, so it has to stop
+    // where they end instead of at the edge of the datagrid - the offsets of a sticky element are
+    // always measured from there. Their width is measured and published by the datagrid, see
+    // HermesDatagrid.updateRowControlsWidth.
+    inset-inline-start: var(--hermes-datagrid-row-controls-width, 0);
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    position: sticky;
+    margin-right: density.$hermes-base-gap-xs;
+    background-color: tables-variables.$hermes-table-bgcolor;
+    z-index: map.get(variables.$hermes-layers, datagrid-row-pinned);
+
+    // The pinned columns can never take the whole datagrid, so there is always somewhere to scroll.
+    // The row controls are static as well, so they count against the same budget.
+    max-width: calc(
+      #{datagrid-variables.$hermes-datagrid-pinned-columns-max-width} - var(--hermes-datagrid-row-controls-width, 0px)
+    );
+
+    // The last pinned cell marks the boundary with the scrollable ones. Columns draw their own
+    // separator, cells have nothing to draw it with.
+    @include datagrid-mixins.datagrid-column-separator();
+
+    &::after {
+      top: 0;
+      width: density.$hermes-base-layout-space-2xs;
+      height: 100%;
+      right: calc(-1 * #{density.$hermes-base-gap-xs});
+    }
+
+    // Nothing is pinned, or a row detail is not laid out in columns.
+    &:empty {
+      display: none;
+    }
+
+    .datagrid-column.datagrid-pinned-column:last-child .datagrid-column-separator::after {
+      right: calc(-1 * #{density.$hermes-base-gap-xs});
+    }
+
+    .datagrid-column.datagrid-pinned-column:not(:last-child) .datagrid-column-separator::after {
+      background-color: datagrid-variables.$hermes-datagrid-column-resize-handler-color;
+    }
+  }
+
+  .datagrid-row-scrollable {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+
+    &.is-replaced {
+      flex-direction: row;
+
+      > .datagrid-row-detail {
+        border-top: none;
+      }
+
+      .datagrid-scrolling-cells {
+        flex: 0 0 auto;
+      }
+    }
+
+    // Only the last of the scrollable columns has nothing after it. A pinned column is never the
+    // last one on this side of the row, it lives one level deeper in .datagrid-pinned-cells.
+    > .datagrid-column:last-child .datagrid-column-separator {
+      display: none;
+    }
+  }
+
+  .datagrid-row-flex {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+
+    .datagrid-row-detail {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+  }
+
+  .datagrid-scrolling-cells,
+  .datagrid-scrolling-details {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: row nowrap;
+  }
+
+  .datagrid-action-bar {
+    margin-top: datagrid-variables.$hermes-datagrid-action-bar-offset;
+
+    // This changes the height and position of the datagrid-spinner when there is an action-bar
+    // Allows us to cover the action-bar with the spinner backgdrop and prevent user interactions.
+    & ~ .datagrid-outer-wrapper .datagrid-spinner {
+      height: calc(100% - #{datagrid-variables.$hermes-datagrid-action-bar-offset});
+      top: datagrid-variables.$hermes-datagrid-action-bar-offset; // Account for the margin above the datagrid-action-bar
+    }
+  }
+
+  .datagrid-header {
+    position: sticky;
+    top: 0;
+    // bug(popover): prevents action-overflow from being on top (first row).
+    // Needed to keep select/radio and expand svgs underneath header on scrolling
+    z-index: map.get(variables.$hermes-layers, datagrid-header);
+    width: auto;
+
+    .datagrid-column {
+      border-bottom: none;
+    }
+
+    .datagrid-row {
+      @include datagrid-mixins.hermes-datagrid-header-bg;
+
+      border-top: none;
+      border-bottom: tokens.$hermes-alias-object-border-width-100 solid tables-variables.$hermes-table-border-color;
+
+      .datagrid-row-sticky {
+        @include datagrid-mixins.hermes-datagrid-header-bg;
+
+        z-index: map.get(variables.$hermes-layers, datagrid-header-sticky);
+      }
+
+      .datagrid-pinned-cells {
+        @include datagrid-mixins.hermes-datagrid-header-bg;
+
+        z-index: map.get(variables.$hermes-layers, datagrid-header-pinned);
+      }
+
+      &:hover {
+        @include datagrid-mixins.hermes-datagrid-header-bg;
+
+        .datagrid-row-sticky,
+        .datagrid-pinned-cells {
+          @include datagrid-mixins.hermes-datagrid-header-bg;
+        }
+      }
+    }
+
+    .datagrid-row-scrollable {
+      flex-direction: row;
+    }
+  }
+
+  .datagrid-table-wrapper {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 100%;
+    width: 100%;
+
+    // Anchors the `cqi` unit that caps the pinned columns.
+    container-type: inline-size;
+  }
+
+  .datagrid-table {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+
+    .datagrid-content {
+      display: contents;
+
+      &-virtual {
+        position: relative;
+        display: block;
+        flex: 1 1 100%;
+        overflow: auto scroll;
+        will-change: scroll-position;
+        contain: strict;
+        transform: translateZ(0);
+
+        &-spacer {
+          flex: 0 0 auto;
+          transform-origin: 0 0;
+        }
+
+        .datagrid-rows {
+          position: absolute;
+          top: 0;
+          left: 0;
+          contain: content;
+          min-width: 100%;
+        }
+      }
+    }
+
+    .datagrid-rows {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+    }
+
+    .datagrid-body {
+      width: auto;
+    }
+
+    .datagrid-column {
+      position: relative;
+      text-align: left;
+      min-width: tokens.$hermes-global-space-15;
+      display: flex;
+      flex: 1 1 auto;
+      vertical-align: top;
+      border: none;
+
+      &:focus {
+        outline: tokens.$hermes-alias-object-interaction-outline;
+        outline-color: -webkit-focus-ring-color;
+        outline-offset: datagrid-variables.$hermes-datagrid-cell-outline-offset;
+      }
+
+      hermes-dg-filter,
+      hermes-dg-string-filter,
+      hermes-dg-numeric-filter {
+        display: flex;
+        order: 99;
+        margin-left: auto;
+        align-items: center;
+      }
+
+      .datagrid-numeric-filter-input {
+        width: density.$hermes-base-layout-space-5xl;
+
+        .hermes-form-control {
+          margin-top: 0;
+        }
+      }
+
+      .datagrid-filter-toggle {
+        @include mixins.hermes-no-styles-button();
+
+        cursor: pointer;
+        float: right;
+        vertical-align: middle;
+
+        @include mixins.min-equilateral(datagrid-variables.$hermes-datagrid-filter-toggle-size);
+
+        margin-left: density.$hermes-base-horizontal-offset-s;
+        background-repeat: no-repeat;
+        background-size: contain;
+
+        hermes-icon,
+        hermes-icon {
+          color: tokens.$hermes-alias-object-interaction-color;
+        }
+
+        &:hover {
+          hermes-icon,
+          hermes-icon {
+            color: tokens.$hermes-alias-object-interaction-color-hover;
+          }
+        }
+
+        &.datagrid-filter-open {
+          hermes-icon,
+          hermes-icon {
+            color: tokens.$hermes-alias-object-interaction-color-active;
+          }
+        }
+
+        &.datagrid-filtered {
+          hermes-icon,
+          hermes-icon {
+            color: tokens.$hermes-alias-object-interaction-color-selected;
+          }
+        }
+      }
+
+      &.datagrid-fixed-width {
+        flex: 0 0 auto;
+      }
+
+      .datagrid-column-flex {
+        display: flex;
+        flex: 1 1 auto;
+      }
+
+      // The pin toggle sits at the very left of the header, in front of the title. It has to stay
+      // outside the title button, otherwise clicking it would sort the column as well.
+      //
+      // Disabled for now, along with the hermesDgPinnable input that renders the toggle.
+      //
+      // .datagrid-column-pin {
+      //   @include mixins.hermes-no-styles-button();
+      //   @include mixins.min-equilateral(datagrid-variables.$hermes-datagrid-filter-toggle-size);
+      //
+      //   cursor: pointer;
+      //   align-self: center;
+      //   flex: 0 0 auto;
+      //   display: flex;
+      //   margin-right: density.$hermes-base-horizontal-offset-s;
+      //   padding: density.$hermes-base-vertical-offset-2xs density.$hermes-base-horizontal-offset-2xs;
+      //
+      //   hermes-icon {
+      //     color: tokens.$hermes-alias-object-interaction-color;
+      //   }
+      //
+      //   &:hover hermes-icon {
+      //     color: tokens.$hermes-alias-object-interaction-color-hover;
+      //   }
+      //
+      //   &:active hermes-icon {
+      //     color: tokens.$hermes-alias-object-interaction-color-active;
+      //   }
+      // }
+
+      .datagrid-column-title {
+        @include mixins.hermes-no-styles-button();
+
+        color: tables-variables.$hermes-table-font-color;
+        text-align: left;
+        flex: 1 1 auto;
+        align-items: center;
+        align-self: center;
+        display: flex;
+
+        .signpost .signpost-action.btn {
+          height: inherit;
+          line-height: inherit;
+        }
+
+        // Override checkbox labels only when they are in a column. This allows them to be vertically centered.
+        .hermes-checkbox-wrapper .hermes-control-label {
+          margin-top: calc(-1 * mixins.baselinePx(10));
+        }
+      }
+
+      button.datagrid-column-title {
+        &:hover {
+          cursor: pointer;
+        }
+
+        .sort-icon {
+          color: tokens.$hermes-alias-object-interaction-color;
+          margin-left: auto; // pushes icon to rhs b/c of parents display: flex
+
+          @include mixins.equilateral(datagrid-variables.$hermes-datagrid-icon-size);
+
+          vertical-align: middle;
+
+          &:hover {
+            color: tokens.$hermes-alias-object-interaction-color-hover;
+          }
+
+          &:active {
+            color: tokens.$hermes-alias-object-interaction-color-active;
+          }
+        }
+      }
+
+      .datagrid-column-separator {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        width: tokens.$hermes-alias-object-border-width-100;
+        order: 100;
+        margin-left: auto;
+        height: 100%;
+
+        @include datagrid-mixins.datagrid-column-separator($alignTop: false);
+
+        .datagrid-column-handle {
+          @include mixins.hermes-no-styles-button();
+
+          position: absolute;
+          width: calc(tokens.$hermes-global-space-6 + tokens.$hermes-global-space-1);
+          right: calc(-1 * tokens.$hermes-global-space-4);
+          top: 0;
+          cursor: col-resize;
+          height: 100%;
+          z-index: map.get(variables.$hermes-layers, datagrid-header);
+        }
+
+        .datagrid-column-resize-tracker {
+          position: absolute;
+          top: calc(-1 * tokens.$hermes-global-space-6);
+          display: none;
+          width: tokens.$hermes-global-space-1;
+          height: 0;
+          border-right: tokens.$hermes-alias-object-border-width-100 dotted tokens.$hermes-global-color-blue-300;
+          transform: translateX(0);
+          cursor: col-resize;
+
+          &.on-arrow-key-resize {
+            transition: transform 0.2s ease-out;
+          }
+        }
+
+        .exceeded-max {
+          border-right: tokens.$hermes-alias-object-border-width-100 dotted tokens.$hermes-alias-status-danger-dark;
+        }
+      }
+
+      .datagrid-signpost-trigger .signpost {
+        margin: calc(-1 * tokens.$hermes-global-space-5) 0;
+        height: tables-variables.$hermes-table-cell-height;
+
+        .signpost-trigger {
+          height: inherit;
+          line-height: tables-variables.$hermes-table-cell-height;
+        }
+      }
+
+      &.datagrid-select,
+      &.datagrid-expandable-caret,
+      &.datagrid-row-actions {
+        max-width: datagrid-variables.$hermes-datagrid-fixed-column-size;
+        min-width: datagrid-variables.$hermes-datagrid-fixed-column-size;
+      }
+
+      &.datagrid-select {
+        align-items: center;
+      }
+    }
+
+    .datagrid-cell {
+      flex: 1 1 auto;
+      text-align: left;
+      min-width: tokens.$hermes-global-space-15;
+      border: none;
+
+      &.datagrid-fixed-width {
+        flex: 0 0 auto;
+      }
+
+      &.datagrid-fixed-column {
+        flex: 0 0 datagrid-variables.$hermes-datagrid-fixed-column-size;
+        max-width: datagrid-variables.$hermes-datagrid-fixed-column-size;
+        min-width: datagrid-variables.$hermes-datagrid-fixed-column-size;
+      }
+
+      &.datagrid-row-actions,
+      &.datagrid-expandable-caret,
+      &.datagrid-detail-caret {
+        padding: 0;
+
+        button {
+          outline-offset: datagrid-variables.$hermes-datagrid-cell-outline-offset;
+        }
+      }
+
+      &.datagrid-row-actions {
+        background: none;
+      }
+
+      &.datagrid-expandable-caret {
+        text-align: center;
+      }
+
+      &:focus {
+        outline: tokens.$hermes-alias-object-interaction-outline;
+        outline-color: -webkit-focus-ring-color;
+        outline-offset: calc(-1 * tokens.$hermes-global-space-2);
+      }
+
+      hermes-dg-action-overflow {
+        display: contents;
+      }
+
+      .datagrid-action-toggle {
+        @include mixins.hermes-no-styles-button();
+        @include datagrid-mixins.datagrid-action-button-styles();
+
+        hermes-icon,
+        hermes-icon {
+          color: datagrid-variables.$hermes-datagrid-icon-color;
+        }
+
+        &:active {
+          hermes-icon,
+          hermes-icon {
+            // Fixed active state on this button for Safari.
+            color: datagrid-variables.$hermes-datagrid-action-toggle-color;
+          }
+        }
+      }
+
+      // align toggle input to row hight
+      .hermes-toggle-wrapper {
+        padding: 0;
+        min-height: auto;
+      }
+    }
+
+    // Increase interaction area for action buttons without changing layout
+    .datagrid-detail-caret,
+    .datagrid-row-actions,
+    .datagrid-expandable-caret {
+      position: relative;
+
+      .datagrid-action-toggle,
+      .datagrid-detail-caret-button,
+      .datagrid-expandable-caret-button {
+        &::before {
+          content: '';
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+
+    .datagrid-placeholder-container {
+      flex: 1 1 auto;
+      display: flex;
+      justify-content: center;
+      border-top: tokens.$hermes-alias-object-border-width-100 solid tables-variables.$hermes-table-border-color;
+    }
+
+    .datagrid-placeholder {
+      background: datagrid-variables.$hermes-datagrid-placeholder-background-color;
+      display: none;
+      width: 100%;
+
+      &.datagrid-empty {
+        border-top: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        gap: density.$hermes-base-gap-m;
+        padding: density.$hermes-base-vertical-offset-2xl density.$hermes-base-horizontal-offset-2xl;
+
+        @include mixins.generate-typography-token('BODY-14-SB-STD');
+      }
+
+      .datagrid-placeholder-image {
+        @include mixins.equilateral(density.$hermes-base-layout-space-2xl);
+
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        background-image: icons.generateEmptyDatagridPlaceholder();
+      }
+    }
+
+    .datagrid-hidden-column {
+      &.datagrid-column,
+      &.datagrid-cell {
+        display: none;
+      }
+    }
+
+    // Pinned columns are moved into the static container, which sizes itself to its content.
+    // They keep the width computed for them and never grow, otherwise the pinned header
+    // and the pinned cells drift apart from each other. Scoped to that container so cells of a
+    // pinned column in a row detail that is not laid out in columns keep their own layout.
+    // Shrinking is allowed so that the columns fit inside the max-width cap on the container rather
+    // than spilling out of it.
+    .datagrid-pinned-cells > .datagrid-pinned-column {
+      &.datagrid-column,
+      &.datagrid-cell {
+        flex: 0 1 auto;
+      }
+    }
+
+    .datagrid-row-scrollable .datagrid-column .datagrid-column-separator::after {
+      background-color: datagrid-variables.$hermes-datagrid-column-resize-handler-color;
+    }
+  }
+
+  .datagrid-row-replaced {
+    .datagrid-scrolling-cells {
+      .datagrid-cell {
+        // Keep row action cells so they can be used.
+        &:not(.datagrid-expandable-caret, .datagrid-row-actions, .datagrid-select) {
+          display: none;
+        }
+      }
+
+      // The detail has taken the place of the cells of the row, pinned ones included, so the
+      // container they were static in has nothing left to hold.
+      .datagrid-pinned-cells {
+        display: none;
+      }
+    }
+
+    .datagrid-row-detail {
+      .datagrid-cell {
+        display: block;
+        padding: tables-variables.$hermes-table-cell-padding;
+
+        &.datagrid-hidden-column {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .datagrid-footer {
+    @include mixins.generate-typography-token('CAPTION-LG-11-CPT');
+
+    flex: 0 0 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: stretch;
+    gap: density.$hermes-base-gap-m;
+    min-height: density.$hermes-base-row-height-l;
+    padding: 0 density.$hermes-base-horizontal-offset-xl;
+    // Account for borders
+    background-color: tables-variables.$hermes-thead-bgcolor;
+    border-style: solid;
+    border-color: tables-variables.$hermes-table-footer-border-top-color;
+    border-width: tokens.$hermes-alias-object-border-width-100;
+    border-top: none;
+    border-radius: 0;
+    border-bottom-right-radius: tables-variables.$hermes-table-border-radius;
+    border-bottom-left-radius: tables-variables.$hermes-table-border-radius;
+
+    .pagination {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: datagrid-variables.$hermes-datagrid-footer-pagination-gap;
+
+      &-size {
+        display: block;
+        flex: 1 1 auto;
+        white-space: nowrap;
+        text-align: right;
+
+        hermes-dg-page-size {
+          display: flex;
+          align-items: center;
+          gap: density.$hermes-base-gap-m;
+        }
+
+        .hermes-page-size-select {
+          @include mixins.generate-typography-token('CAPTION-LG-11-CPT');
+
+          height: auto;
+          min-height: density.$hermes-base-row-height-s;
+          vertical-align: middle;
+        }
+      }
+
+      &-description {
+        white-space: nowrap;
+      }
+    }
+
+    .column-switch-wrapper {
+      position: relative;
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+
+      .column-toggle-action {
+        // I'm overriding .btn/.btn-link here but am not confident this is the correct way to do it.
+        min-width: tokens.$hermes-global-space-8;
+        text-transform: capitalize;
+        padding: datagrid-variables.$hermes-datagrid-column-toggle-padding;
+        border-color: datagrid-variables.$hermes-datagrid-column-toggle-border-color;
+        background-color: datagrid-variables.$hermes-datagrid-column-toggle-fill-color;
+        color: datagrid-variables.$hermes-datagrid-column-toggle-text-color;
+        margin: 0;
+
+        &.disabled,
+        &:disabled,
+        &.disabled:hover,
+        &:disabled:hover,
+        &.disabled:active,
+        &:disabled:active {
+          cursor: not-allowed;
+          border-color: datagrid-variables.$hermes-datagrid-column-toggle-disabled-color;
+          color: datagrid-variables.$hermes-datagrid-column-toggle-disabled-color;
+          background-color: datagrid-variables.$hermes-datagrid-column-toggle-fill-color;
+        }
+
+        &:hover {
+          border-color: datagrid-variables.$hermes-datagrid-column-toggle-border-hover-color;
+          background-color: datagrid-variables.$hermes-datagrid-column-toggle-fill-hover-color;
+          color: datagrid-variables.$hermes-datagrid-column-toggle-text-hover-color;
+        }
+
+        &:active,
+        &:focus {
+          box-shadow: none;
+          border-color: datagrid-variables.$hermes-datagrid-column-toggle-border-active-color;
+          background-color: datagrid-variables.$hermes-datagrid-column-toggle-fill-active-color;
+          color: datagrid-variables.$hermes-datagrid-column-toggle-text-active-color;
+        }
+      }
+    }
+
+    .hermes-form-control-disabled {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+  }
+
+  .hermes-form-control-disabled .datagrid-footer-select.hermes-checkbox-wrapper input[type='checkbox']:checked + label {
+    cursor: default;
+
+    &::before {
+      background-color: forms-variables.$hermes-forms-label-disabled-color;
+    }
+  }
+
+  .datagrid-spinner {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    top: datagrid-variables.$hermes-datagrid-margin-top;
+    height: calc(100% - datagrid-variables.$hermes-datagrid-margin-top);
+    background-color: datagrid-variables.$hermes-datagrid-loading-background;
+    z-index: map.get(variables.$hermes-layers, datagrid-host); // Keeps the spinner above the datagrid header.
+  }
+
+  // @deprecated CSS rule `.datagrid-compact { ... }` in favor of compact mode in density theme
+  .datagrid-compact {
+    .datagrid {
+      margin-top: datagrid-variables.$hermes-datagrid-compact-margin-top;
+    }
+
+    .datagrid-spinner {
+      height: calc(100% - #{datagrid-variables.$hermes-datagrid-compact-margin-top});
+      top: datagrid-variables.$hermes-datagrid-compact-margin-top;
+    }
+
+    .datagrid-action-bar {
+      margin-top: datagrid-variables.$hermes-datagrid-compact-action-bar-offset;
+
+      & ~ .datagrid-outer-wrapper .datagrid-spinner {
+        height: calc(100% - #{datagrid-variables.$hermes-datagrid-compact-action-bar-offset});
+        top: datagrid-variables.$hermes-datagrid-compact-action-bar-offset;
+      }
+    }
+
+    .datagrid-detail-pane {
+      margin-top: datagrid-variables.$hermes-datagrid-compact-margin-top;
+
+      &-content {
+        padding: tokens.$hermes-global-space-6;
+
+        .datagrid-detail-header {
+          gap: mixins.baselinePx(10);
+          font-size: tokens.$hermes-global-space-7;
+          line-height: mixins.baselinePx(20);
+
+          .datagrid-detail-pane-close {
+            flex-basis: mixins.baselinePx(20);
+
+            button {
+              hermes-icon,
+              hermes-icon {
+                &:not([size]) {
+                  @include mixins.min-equilateral(mixins.baselinePx(20));
+                }
+              }
+            }
+          }
+        }
+
+        .datagrid-detail-body {
+          padding: tokens.$hermes-global-space-6 0;
+        }
+      }
+    }
+
+    .datagrid-column {
+      &.datagrid-select,
+      &.datagrid-expandable-caret,
+      &.datagrid-row-actions {
+        max-width: datagrid-variables.$hermes-datagrid-compact-fixed-column-size;
+        min-width: datagrid-variables.$hermes-datagrid-compact-fixed-column-size;
+      }
+    }
+
+    .datagrid-cell.datagrid-fixed-column {
+      flex: 0 0 datagrid-variables.$hermes-datagrid-compact-fixed-column-size;
+      max-width: datagrid-variables.$hermes-datagrid-compact-fixed-column-size;
+      min-width: datagrid-variables.$hermes-datagrid-compact-fixed-column-size;
+    }
+
+    .datagrid-row {
+      min-height: tables-variables.$hermes-table-compact-row-height;
+
+      &:first-of-type {
+        min-height: calc(tables-variables.$hermes-table-compact-row-height - tables-variables.$hermes-table-borderwidth);
+      }
+
+      .datagrid-row-detail .datagrid-cell.datagrid-container {
+        font-size: mixins.baselinePx(13);
+        line-height: tokens.$hermes-global-space-8;
+      }
+
+      &.datagrid-row-skeleton {
+        .datagrid-row-master {
+          &::before {
+            top: tables-variables.$hermes-table-compact-vertical-padding;
+            left: tables-variables.$hermes-table-compact-horizontal-padding;
+            height: calc(100% - (2 * tables-variables.$hermes-table-compact-vertical-padding));
+            width: calc(100% - (2 * tables-variables.$hermes-table-compact-horizontal-padding));
+          }
+        }
+      }
+    }
+
+    .datagrid-row-replaced .datagrid-row-detail .datagrid-cell {
+      padding: tables-variables.$hermes-table-cell-compact-padding;
+    }
+
+    .datagrid-column .datagrid-column-separator {
+      &::after {
+        height: calc(100% - (0.5 * #{datagrid-variables.$hermes-datagrid-column-separator-expandby}));
+      }
+    }
+
+    .datagrid-detail-caret {
+      .datagrid-detail-caret-button {
+        @include datagrid-mixins.datagrid-action-button-styles(
+          tables-variables.$hermes-table-compact-cell-height,
+          datagrid-variables.$hermes-datagrid-compact-fixed-column-size,
+          tokens.$hermes-global-space-7
+        );
+      }
+
+      .spinner {
+        margin-top: datagrid-variables.$hermes-datagrid-compact-expandable-row-spinner-margin;
+      }
+    }
+
+    .datagrid-cell:not(.datagrid-detail-caret, .datagrid-expandable-caret, .datagrid-row-actions) {
+      @include mixins.cell-children-aligment();
+    }
+
+    .datagrid-expandable-caret {
+      text-align: center;
+
+      .spinner {
+        margin-top: datagrid-variables.$hermes-datagrid-compact-expandable-row-spinner-margin;
+      }
+
+      .datagrid-expandable-caret-button {
+        @include datagrid-mixins.datagrid-action-button-styles(
+          tables-variables.$hermes-table-compact-cell-height,
+          datagrid-variables.$hermes-datagrid-compact-fixed-column-size,
+          tokens.$hermes-global-space-7
+        );
+      }
+
+      .datagrid-expandable-caret-icon {
+        margin: 0;
+      }
+
+      &.datagrid-column {
+        padding-top: tables-variables.$hermes-table-compact-vertical-padding;
+        padding-bottom: tables-variables.$hermes-table-compact-vertical-padding;
+      }
+    }
+
+    .datagrid-row-actions {
+      .datagrid-action-toggle {
+        @include datagrid-mixins.datagrid-action-button-styles(
+          tables-variables.$hermes-table-compact-cell-height,
+          datagrid-variables.$hermes-datagrid-compact-fixed-column-size,
+          tokens.$hermes-global-space-7
+        );
+      }
+    }
+
+    .datagrid-signpost-trigger .signpost .signpost-trigger {
+      hermes-icon:not(
+        [size],
+        [shape='info-circle'],
+        [shape='exclamation-triangle'],
+        [shape='exclamation-circle'],
+        [shape='check-circle'],
+        [shape='info'],
+        [shape='error']
+      ),
+      hermes-icon:not(
+        [size],
+        [shape='info-circle'],
+        [shape='exclamation-triangle'],
+        [shape='exclamation-circle'],
+        [shape='check-circle'],
+        [shape='info'],
+        [shape='error']
+      ) {
+        @include mixins.equilateral(tables-variables.$hermes-table-compact-cell-height);
+      }
+    }
+
+    .datagrid-footer {
+      min-height: mixins.baselinePx(28);
+      line-height: tokens.$hermes-global-space-7;
+      padding: 0 tokens.$hermes-global-space-6;
+
+      .pagination {
+        &,
+        hermes-dg-page-size {
+          gap: mixins.baselinePx(10);
+        }
+
+        .hermes-native-select-wrapper {
+          max-height: mixins.baselinePx(20);
+
+          &::after {
+            --hermes-forms-native-select-caret-size: #{tokens.$hermes-global-space-6};
+
+            right: tokens.$hermes-global-space-2;
+          }
+
+          .hermes-page-size-select {
+            min-height: mixins.baselinePx(20);
+            padding: 0 mixins.baselinePx(20) 0 tokens.$hermes-global-space-2;
+          }
+        }
+      }
+
+      .hermes-form-control-disabled .datagrid-footer-select.hermes-checkbox-wrapper input[type='checkbox']:checked + label {
+        top: 0;
+      }
+
+      .column-switch-wrapper .column-toggle-action {
+        border-radius: tokens.$hermes-global-space-2;
+        padding: 0 tokens.$hermes-global-space-4;
+        height: mixins.baselinePx(20);
+      }
+    }
+
+    .pagination-list {
+      gap: tokens.$hermes-global-space-4;
+
+      .pagination-current {
+        // @include mixins.generate-typography-token('CAPTION-LG-11');
+        padding: tokens.$hermes-global-space-2 0;
+      }
+
+      .pagination-pages {
+        gap: tokens.$hermes-global-space-2;
+      }
+
+      .pagination-current,
+      button {
+        border-radius: tokens.$hermes-global-space-2;
+
+        @include mixins.min-equilateral(mixins.baselinePx(20));
+      }
+    }
+
+    .datagrid-action-overflow .action-item {
+      font-size: tokens.$hermes-global-space-6;
+      line-height: mixins.baselinePx(20);
+      gap: tokens.$hermes-global-space-2;
+      height: mixins.baselinePx(20);
+      padding: 0 mixins.baselinePx(20) 0 tokens.$hermes-global-space-5;
+    }
+
+    .datagrid-placeholder.datagrid-empty {
+      font-size: mixins.baselinePx(13);
+      line-height: tokens.$hermes-global-space-8;
+      padding: mixins.baselinePx(20);
+      gap: mixins.baselinePx(10);
+
+      .datagrid-placeholder-image {
+        @include mixins.equilateral(tokens.$hermes-global-space-10);
+      }
+    }
+  }
+
+  .datagrid-footer-description {
+    flex: 1 1 auto;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    display: block;
+    text-align: right;
+    margin: auto 0;
+  }
+
+  // Yes, this is not .datagrid-pagination on purpose.
+  // I've been told to consider a potential separate pagination component.
+  .pagination-list {
+    list-style: none;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: density.$hermes-base-gap-s;
+
+    .pagination-current {
+      @include mixins.generate-typography-token('CAPTION-LG-11-CPT');
+
+      background: none;
+      background-color: forms-variables.$hermes-forms-textarea-background-color;
+      border-color: datagrid-variables.$hermes-datagrid-pagination-input-border-color;
+      border-width: tokens.$hermes-alias-object-border-width-100;
+      border-style: solid;
+      border-radius: density.$hermes-base-border-radius-s;
+
+      @include mixins.min-equilateral(density.$hermes-base-layout-space-l);
+
+      text-align: center;
+      transition: none !important;
+      padding: density.$hermes-base-vertical-offset-xs 0;
+
+      &:focus,
+      &.hermes-focus {
+        background: none;
+        border: tokens.$hermes-alias-object-border-width-100 solid
+          datagrid-variables.$hermes-datagrid-pagination-input-border-focus-color;
+      }
+    }
+
+    .pagination-pages {
+      display: flex;
+      align-items: center;
+      gap: density.$hermes-base-gap-xs;
+    }
+
+    .pagination-first,
+    .pagination-last,
+    .pagination-previous,
+    .pagination-next {
+      display: flex;
+      align-items: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    .pagination-first:disabled,
+    .pagination-last:disabled,
+    .pagination-previous:disabled,
+    .pagination-next:disabled {
+      color: tokens.$hermes-alias-status-disabled;
+      cursor: not-allowed;
+      opacity: datagrid-variables.$hermes-datagrid-pagination-btn-disabled-opacity;
+    }
+
+    button {
+      @include mixins.hermes-no-styles-button();
+      @include mixins.min-equilateral(density.$hermes-base-icon-size-l);
+
+      justify-content: center;
+      color: datagrid-variables.$hermes-datagrid-pagination-btn-color;
+      // FIXME: this should be in the general reboot
+      cursor: pointer;
+    }
+  }
+
+  /*
+        The following classes are used by the renderer when performing internal operations.
+        Using the browser calculations improves rendering performance.
+    */
+  // This class is used by the dom-renderer.ts when testing cell for a user defined width.
+  .datagrid-cell-width-zero {
+    // Much zero. Such !important. Wow.
+    border: 0 !important;
+    padding: 0 !important;
+    width: 0;
+    flex: 0 0 auto !important;
+    min-width: 0 !important;
+    display: block !important;
+    visibility: hidden !important;
+    position: absolute !important;
+    top: 0;
+    left: 0;
+  }
+
+  /**
+   * Detail pane
+   */
+  .datagrid-outer-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  .datagrid-inner-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: auto;
+    min-width: mixins.baselinePx(240);
+  }
+
+  .datagrid-detail-open {
+    &:has(.datagrid-detail-pane.datagrid-detail-custom-width) .datagrid-inner-wrapper {
+      min-width: initial;
+      width: initial;
+
+      .datagrid-rows {
+        overflow-x: initial;
+      }
+    }
+
+    .datagrid-detail-pane.datagrid-detail-custom-width {
+      flex-grow: 0;
+    }
+
+    & > .datagrid-outer-wrapper > .datagrid-inner-wrapper {
+      div.datagrid-table {
+        /**
+         * So the content with no spaces in the cell doesn't get cut when and the row selected indicator is not hidden
+         * e.g. Helloworldthisisaveryveryveryveryverylongcontent
+         */
+        max-width: 100%;
+      }
+
+      .datagrid-rows {
+        /**
+         * To get rid of detail-pane overlapping the content inside the rows
+         */
+        overflow-x: hidden;
+      }
+
+      & > .cdk-virtual-scrollable div.datagrid-table {
+        overflow: unset;
+      }
+
+      hermes-dg-cell {
+        /**
+         * Since we use inline width of each column in order to maintain manual resizing,
+         * we need to use !important to override the inline width.
+         */
+        width: 100% !important;
+      }
+
+      /**
+       * Needed to prevent hidding the sorting and filtering icons
+       */
+      hermes-dg-column:first-child {
+        /**
+          * Since we use inline width of each column in order to maintain manual resizing,
+          * we need to use !important to override the inline width.
+          */
+        width: auto !important;
+      }
+    }
+
+    .datagrid {
+      border-top-right-radius: 0;
+      border-right: none;
+    }
+
+    .datagrid-inner-wrapper {
+      width: 34%;
+    }
+
+    .datagrid-placeholder-container,
+    .datagrid-row {
+      border-right: tokens.$hermes-alias-object-border-width-100 solid tables-variables.$hermes-table-border-color;
+    }
+
+    .datagrid-footer {
+      border-bottom-right-radius: 0;
+    }
+
+    .pagination {
+      width: 100%;
+    }
+
+    .pagination-description-compact {
+      text-align: left;
+      flex: 1;
+    }
+
+    .datagrid-footer .pagination-list {
+      margin-right: 0;
+    }
+  }
+
+  .datagrid-row-detail-open {
+    position: relative;
+
+    &:not(:hover) {
+      background-color: datagrid-variables.$hermes-datagrid-detail-pane-open-row-bg-color;
+
+      .datagrid-row-sticky,
+      .datagrid-pinned-cells {
+        background-color: datagrid-variables.$hermes-datagrid-detail-pane-open-row-bg-color;
+      }
+    }
+  }
+
+  .datagrid-detail-pane {
+    margin-top: datagrid-variables.$hermes-datagrid-margin-top;
+    border-width: tokens.$hermes-alias-object-border-width-100;
+    border-style: solid;
+    border-color: datagrid-variables.$hermes-datagrid-detail-pane-border-color;
+    border-left: none;
+    border-top-right-radius: density.$hermes-base-border-radius-s;
+    border-bottom-right-radius: density.$hermes-base-border-radius-s;
+    background: datagrid-variables.$hermes-datagrid-detail-pane-bg-color;
+    overflow: hidden;
+    display: block;
+    flex-grow: 2;
+  }
+
+  .datagrid-detail-pane-content {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    height: 100%;
+    padding: datagrid-variables.$hermes-datagrid-detail-pane-content-padding;
+  }
+
+  .datagrid-detail-body {
+    flex: 1 1 auto;
+    padding: density.$hermes-base-vertical-offset-xl 0;
+    color: datagrid-variables.$hermes-datagrid-detail-body-text-color;
+  }
+
+  .datagrid-detail-header {
+    flex: 0 0 auto;
+    @include mixins.generate-typography-token('SECTION-20-STD');
+
+    margin-top: 0;
+    display: flex;
+    flex-direction: row;
+    gap: density.$hermes-base-gap-m;
+
+    .datagrid-detail-header-title {
+      flex: 1 1 auto;
+      color: datagrid-variables.$hermes-datagrid-detail-header-title-color;
+      overflow-wrap: anywhere;
+      padding: #{tokens.$hermes-global-space-1} 0; // outline header needs this to keep the shape correct
+    }
+
+    .datagrid-detail-pane-close {
+      flex: 1 1 datagrid-variables.$hermes-datagrid-detail-pane-close-icon-size;
+      display: flex;
+      justify-content: flex-end;
+
+      .btn.btn-link {
+        align-items: start;
+        min-width: auto;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        border: 0;
+
+        hermes-icon,
+        hermes-icon {
+          @include mixins.min-equilateral(datagrid-variables.$hermes-datagrid-detail-pane-close-icon-size);
+
+          color: modal-variables.$hermes-modal-close-color;
+        }
+      }
+    }
+  }
+
+  .datagrid-expandable-caret {
+    display: flex;
+    justify-content: center;
+
+    .datagrid-expandable-caret-button {
+      @include mixins.hermes-no-styles-button();
+      @include datagrid-mixins.datagrid-action-button-styles();
+    }
+
+    .datagrid-expandable-caret-icon {
+      color: datagrid-variables.$hermes-datagrid-icon-color;
+
+      svg {
+        transition: transform 0.2s ease-in-out;
+      }
+    }
+
+    .spinner {
+      margin-top: datagrid-variables.$hermes-datagrid-expandable-row-spinner-margin;
+    }
+  }
+
+  .datagrid-detail-caret {
+    display: flex;
+    justify-content: center;
+
+    .datagrid-detail-caret-button {
+      @include mixins.hermes-no-styles-button();
+      @include datagrid-mixins.datagrid-action-button-styles();
+
+      &:disabled {
+        hermes-icon,
+        hermes-icon {
+          &.datagrid-detail-caret-icon {
+            --color: #{tokens.$hermes-alias-object-interaction-color-disabled};
+          }
+        }
+      }
+
+      &.is-open .datagrid-detail-caret-icon {
+        border-radius: density.$hermes-base-border-radius-s;
+        background-color: datagrid-variables.$hermes-datagrid-detail-caret-icon-open-bg-color;
+        color: datagrid-variables.$hermes-datagrid-detail-caret-icon-open-icon-color;
+      }
+    }
+
+    .datagrid-detail-caret-icon {
+      color: datagrid-variables.$hermes-datagrid-icon-color;
+    }
+
+    .spinner {
+      margin-top: datagrid-variables.$hermes-datagrid-expandable-row-spinner-margin;
+    }
+  }
+
+  // Small screens should only display the detail pane when opened, or optionally forced by a class
+  .datagrid-detail-overlay {
+    // too specific query needed to avoid issues with nested datagrids
+    &.datagrid-detail-open > .datagrid-outer-wrapper > .datagrid-inner-wrapper {
+      width: 0;
+      min-width: unset;
+    }
+
+    .datagrid-detail-pane {
+      border-left: tokens.$hermes-alias-object-border-width-100 solid;
+      border-color: datagrid-variables.$hermes-datagrid-detail-pane-border-color;
+      border-radius: density.$hermes-base-border-radius-s;
+      width: 100%;
+    }
+  }
+
+  @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, sm)) {
+    // too specific query needed to avoid issues with nested datagrids
+    .datagrid-detail-open > .datagrid-outer-wrapper > .datagrid-inner-wrapper {
+      display: none;
+    }
+
+    .datagrid-detail-pane {
+      border-left: tokens.$hermes-alias-object-border-width-100 solid;
+      border-color: datagrid-variables.$hermes-datagrid-detail-pane-border-color;
+      border-radius: density.$hermes-base-border-radius-s;
+      width: 100% !important;
+    }
+  }
+
+  /**
+   * Smart popover contents
+   */
+  .column-switch {
+    border-radius: density.$hermes-base-border-radius-s;
+    background-color: datagrid-variables.$hermes-datagrid-popover-bg-color;
+    border-width: tokens.$hermes-alias-object-border-width-100;
+    border-style: solid;
+    border-color: datagrid-variables.$hermes-datagrid-popover-border-color;
+
+    @include datagrid-mixins.hermes-datagrid-popover-shadows();
+
+    width: mixins.baselinePx(250);
+    display: flex;
+    flex-direction: column;
+    z-index: map.get(variables.$hermes-layers, column-switch); // Keeps the popup above the datagrid header.
+
+    .switch-header {
+      display: flex;
+      justify-content: space-between;
+
+      @include mixins.generate-typography-token('SUBSECTION-16-EXP');
+
+      padding: density.$hermes-base-vertical-offset-xl density.$hermes-base-horizontal-offset-xl 0
+        density.$hermes-base-horizontal-offset-xl;
+
+      // From accessibility perspective we let use of header tags inside the switch header,
+      // but want not to be affected from the global header styles so this is a workaround.
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: variables.$hermes-p1-color;
+
+        @include mixins.generate-typography-token('SUBSECTION-16-EXP');
+
+        margin: 0;
+      }
+
+      button {
+        min-width: density.$hermes-base-icon-size-s;
+        margin: 0;
+        padding: 0;
+
+        hermes-icon,
+        hermes-icon {
+          color: datagrid-variables.$hermes-datagrid-column-switch-header-font-color;
+
+          &:hover {
+            color: datagrid-variables.$hermes-datagrid-column-switch-header-font-hover-color;
+          }
+
+          &:active {
+            color: datagrid-variables.$hermes-datagrid-column-switch-header-font-active-color;
+          }
+        }
+      }
+    }
+
+    ul.switch-content {
+      display: flex;
+      flex-direction: column;
+      gap: density.$hermes-base-gap-xs;
+      max-height: mixins.baselinePx(300);
+      overflow-y: auto;
+      min-height: tables-variables.$hermes-table-row-height;
+
+      // Increase specificity
+      &.list-unstyled {
+        padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-xl;
+      }
+
+      li {
+        line-height: unset;
+        padding-left: density.$hermes-base-horizontal-offset-xs;
+      }
+    }
+
+    .switch-footer {
+      padding: 0 density.$hermes-base-horizontal-offset-xl density.$hermes-base-vertical-offset-xl
+        density.$hermes-base-horizontal-offset-xl;
+
+      .btn {
+        margin: 0;
+        padding: 0;
+      }
+
+      .action-right {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  .datagrid-filter {
+    margin-top: tokens.$hermes-global-space-3;
+    background: datagrid-variables.$hermes-datagrid-popover-bg-color;
+    border-width: tokens.$hermes-alias-object-border-width-100;
+    border-style: solid;
+    border-color: datagrid-variables.$hermes-datagrid-popover-border-color;
+    padding: density.$hermes-base-vertical-offset-xl;
+
+    @include datagrid-mixins.hermes-datagrid-popover-shadows;
+
+    border-radius: density.$hermes-base-border-radius-s;
+    font-weight: normal;
+
+    .datagrid-filter-close-wrapper {
+      text-align: right;
+
+      .close {
+        float: none;
+        font-size: unset;
+      }
+    }
+
+    // FIXME: remove
+    .datagrid-filter-apply {
+      margin-bottom: 0;
+    }
+
+    .datagrid-numeric-filter-form {
+      display: flex;
+      gap: density.$hermes-base-gap-m;
+
+      input.datagrid-numeric-filter-input {
+        width: density.$hermes-base-layout-space-5xl;
+      }
+    }
+
+    .hermes-form-control {
+      margin-top: 0;
+    }
+  }
+
+  .datagrid-action-overflow {
+    @include datagrid-mixins.datagrid-action-overflow-appearance();
+  }
+
+  .right-bottom .datagrid-action-overflow {
+    &::before {
+      top: auto;
+      bottom: tokens.$hermes-global-space-4;
+    }
+
+    &::after {
+      top: auto;
+      bottom: calc(tokens.$hermes-global-space-4 + tokens.$hermes-global-space-1);
+    }
+  }
+
+  .right-top .datagrid-action-overflow {
+    &::before {
+      top: tokens.$hermes-global-space-6;
+    }
+
+    &::after {
+      top: tokens.$hermes-global-space-6;
+    }
+  }
+
+  /* END Datagrid Smart Popover Content Styles
+
+  /**
+   * These classes are used in table-renderer.ts when it puts the datagrid into in tableMode and computes column
+   * widths. NOTE: they are only applied during calculation and then removed.
+   */
+
+  /**
+   * When in calculate mode
+   * - Hide the display elements for datagrid
+   * - Switch display mode for elements with projected content to calcualte sizes.
+   */
+  .datagrid-host.datagrid-calculate-mode {
+    display: block;
+    overflow-y: auto;
+
+    // Hide parts of the display table not used for calculation.
+    .datagrid,
+    .datagrid-footer,
+    .datagrid-row-master,
+    .datagrid-row-clickable {
+      display: none;
+    }
+
+    .datagrid-calculation-table {
+      display: table;
+      table-layout: auto;
+
+      .datagrid-calculation-header {
+        display: table-header-group;
+
+        .datagrid-column {
+          display: table-cell;
+          min-width: tokens.$hermes-global-space-15;
+        }
+
+        .datagrid-column {
+          // This is a hack b/c styles were not applied out of the box when moving columns into the
+          // calculation container element
+          border-color: tables-variables.$hermes-tablerow-bordercolor;
+          border-width: tables-variables.$hermes-table-borderwidth;
+          border-style: solid;
+          padding: tables-variables.$hermes-table-cell-padding;
+          vertical-align: top;
+
+          @include mixins.generate-typography-token('CAPTION-LG-11-STD');
+        }
+      }
+
+      .datagrid-row {
+        display: table-row;
+
+        .datagrid-cell {
+          // This is a hack b/c styles were not applied out of the box when moving columns into the
+          // calculation container element
+          display: table-cell;
+          min-width: tokens.$hermes-global-space-15;
+
+          @include mixins.generate-typography-token('BODY-14-RG-CPT');
+
+          padding: tables-variables.$hermes-table-cell-padding;
+          vertical-align: top;
+        }
+      }
+    }
+
+    // Hide other elements that come along for the ride
+    .datagrid-column-separator {
+      display: none;
+    }
+
+    .datagrid-placeholder-container {
+      display: none;
+    }
+
+    .datagrid-fixed-column {
+      display: none;
+    }
+  }
+
+  // END Calculation classes.
+}