cx 26.4.0 → 26.4.1

package/src/widgets/grid/Grid.scss

@@ -1,657 +1,657 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/deep-merge.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-
-@mixin cx-grid(
-   $name: "grid",
-   $header-state-style-map: $cx-grid-header-state-style-map,
-   $data-state-style-map: $cx-grid-data-state-style-map,
-   $cell-cursor-style: $cx-grid-cell-cursor-style,
-   $icon-size: $cx-default-icon-size,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      box-sizing: border-box;
-      position: relative;
-      font-size: $cx-default-grid-font-size;
-      box-shadow: $cx-default-grid-box-shadow;
-      border-radius: $cx-default-grid-border-radius;
-
-      @include cx-add-state-rules($cx-list, default);
-
-      &:focus {
-         @include cx-add-state-rules($cx-list, focus);
-      }
-
-      table {
-         border-spacing: 0;
-         border-collapse: collapse;
-         width: 100%;
-         position: relative;
-         font-size: inherit;
-      }
-
-      .#{$state}aligned-left {
-         text-align: left;
-      }
-
-      .#{$state}aligned-right {
-         text-align: right;
-      }
-
-      .#{$state}aligned-center {
-         text-align: center;
-      }
-
-      &.#{$state}scrollable {
-         overflow: hidden;
-         display: flex;
-         flex-direction: row;
-         align-items: stretch;
-
-         &.#{$state}border {
-            border: 1px solid $cx-default-grid-border-color;
-            background: $cx-default-grid-background;
-
-            table {
-               border: none;
-            }
-
-            .#{$element}#{$name}-header:first-child {
-               th {
-                  border-top: none;
-               }
-            }
-
-            th {
-               border-left: none;
-            }
-
-            th:last-child {
-               border-right: none;
-            }
-         }
-
-         & > .#{$element}#{$name}-scroll-area {
-            overflow-y: auto;
-            flex: 1 1 0%;
-            -webkit-overflow-scrolling: touch;
-
-            &.#{$state}fixed-header
-               > .#{$element}#{$name}-table-wrapper
-               > table
-               > .#{$element}#{$name}-header:first-child {
-               visibility: hidden;
-            }
-
-            //used to cut off the negative margin
-            & > .#{$element}#{$name}-table-wrapper {
-               overflow: hidden;
-               display: inline-block; //preserve content width
-               vertical-align: top;
-               min-width: 100%;
-               min-height: 100%;
-               padding-top: $cx-default-grid-scroll-wrapper-padding-top;
-            }
-         }
-      }
-
-      &.#{$state}resizable {
-         .#{$element}#{$name}-data td,
-         .#{$element}#{$name}-group-footer td,
-         .#{$element}#{$name}-group-header td {
-            box-sizing: border-box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-         }
-
-         .cxe-grid-fixed-header .cxe-grid-col-header:last-child {
-            max-width: 100%;
-            width: 100%;
-         }
-      }
-
-      &.#{$state}border {
-         background: $cx-default-grid-background;
-
-         table {
-            border: 1px solid $cx-default-grid-border-color;
-         }
-      }
-
-      &.#{$state}vlines {
-         td:not(:last-child),
-         th:not(:last-child) {
-            border-right-width: 1px;
-            border-right-style: solid;
-            border-right-color: $cx-default-grid-border-color;
-         }
-      }
-
-      &.#{$mod}responsive {
-         width: 100%;
-
-         & > .#{$element}#{$name}-scroll-area {
-            overflow-x: auto;
-         }
-      }
-
-      &.#{$mod}fixed-layout {
-         table {
-            table-layout: fixed;
-            width: auto;
-         }
-      }
-
-      &.#{$mod}contain {
-         table {
-            contain: layout paint;
-         }
-      }
-
-      &.#{$mod}nowrap {
-         .cxe-grid-data td,
-         .cxe-grid-fixed-footer td,
-         .cxe-grid-fixed-fixed-footer td {
-            white-space: nowrap;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-table-wrapper {
-      overflow-anchor: none;
-   }
-
-   .#{$element}#{$name}-cell-clip {
-      overflow: hidden;
-      text-overflow: ellipsis;
-   }
-
-   .#{$element}#{$name}-row-number::after {
-      counter-increment: cx-row-number;
-      content: counter(cx-row-number);
-   }
-
-   .#{$element}#{$name}-fixed-header {
-      overflow: hidden;
-      position: absolute;
-      display: none;
-      left: 0;
-      top: 0;
-      right: 0;
-
-      & > table {
-         width: auto;
-         table-layout: fixed;
-      }
-   }
-
-   .#{$element}#{$name}-fixed-fixed-header {
-      overflow: hidden;
-      position: absolute;
-      display: none;
-      left: 0;
-      top: 0;
-      box-sizing: border-box;
-      border-right: 1px solid $cx-default-grid-border-color;
-
-      & > table {
-         width: auto;
-         table-layout: fixed;
-      }
-   }
-
-   .#{$element}#{$name}-fixed-footer {
-      overflow: hidden;
-      position: absolute;
-      display: none;
-      left: 0;
-      bottom: 0;
-      right: 0;
-
-      & > table {
-         width: auto;
-         table-layout: fixed;
-      }
-   }
-
-   .#{$element}#{$name}-fixed-fixed-footer {
-      overflow: hidden;
-      position: absolute;
-      display: none;
-      left: 0;
-      bottom: 0;
-      border-right: 1px solid $cx-default-grid-border-color;
-      box-sizing: border-box;
-
-      & > table {
-         width: auto;
-         table-layout: fixed;
-      }
-   }
-
-   .#{$element}#{$name}-fixed-footer-corner {
-      width: 100%;
-   }
-
-   .#{$element}#{$name}-empty-text td {
-      color: #aaa;
-      padding: 2rem;
-   }
-
-   .#{$element}#{$name}-col-header {
-      text-align: left;
-      padding: cx-get-state-rule($data-state-style-map, default, padding);
-      box-sizing: border-box;
-      position: relative;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      -webkit-user-select: none;
-
-      @include cx-add-state-rules($header-state-style-map, default);
-
-      .#{$state}header-default & {
-         border-width: 1px;
-         border-style: solid;
-         position: relative;
-      }
-
-      .#{$state}header-plain & {
-         background-color: transparent;
-      }
-
-      &.#{$state}sortable {
-         cursor: pointer;
-         user-select: none;
-
-         &.#{$state}sorted-asc,
-         &.#{$state}sorted-desc {
-            @include cx-add-state-rules($header-state-style-map, sorted);
-
-            &:hover {
-               @include cx-add-state-rules($header-state-style-map, sorted-hover);
-            }
-         }
-
-         &:hover,
-         .#{$element}#{$name}-fixed-header &:hover {
-            @include cx-add-state-rules($header-state-style-map, hover);
-         }
-
-         .#{$element}#{$name}-fixed-header & {
-            &.#{$state}sorted-asc,
-            &.#{$state}sorted-desc {
-               &:hover {
-                  @include cx-add-state-rules($header-state-style-map, sorted-hover);
-               }
-            }
-         }
-      }
-
-      &.#{$state}tool {
-         transition: padding-left 0.2s;
-         padding-right: cx-calc(15px, $icon-size);
-      }
-
-      &.#{$state}sortable:not(.#{$state}aligned-right) {
-         padding-right: cx-calc(5px, $icon-size);
-
-         .#{$element}#{$name}-column-sort-icon {
-            right: 2px;
-         }
-
-         &.#{$state}tool.#{$state}sorted-asc,
-         &.#{$state}tool.#{$state}sorted-desc {
-            padding-left: cx-calc(5px, $icon-size);
-
-            .#{$element}#{$name}-column-sort-icon {
-               left: 2px;
-            }
-         }
-      }
-
-      &.#{$state}sortable.#{$state}aligned-center {
-         padding-left: cx-calc(5px, $icon-size);
-      }
-
-      &.#{$state}sortable.#{$state}aligned-right {
-         padding-left: cx-calc(5px, $icon-size);
-
-         .#{$element}#{$name}-column-sort-icon {
-            left: 2px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-column-sort-icon {
-      width: $icon-size;
-      height: $icon-size;
-      top: 50%;
-      margin-top: cx-multiply($icon-size, -0.5);
-      position: absolute;
-      transition: transform 0.1s linear;
-
-      .#{$state}sorted-desc > & {
-         transform: rotate(180deg);
-      }
-   }
-
-   .#{$element}#{$name}-data {
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      background-color: cx-get-state-rule($data-state-style-map, default, background-color);
-
-      &.#{$state}alternate {
-         @include cx-add-state-rules($data-state-style-map, alternate);
-      }
-
-      td {
-         padding: 0;
-         border-top: 1px solid cx-get-state-rule($data-state-style-map, default, border-color);
-         line-height: cx-get-state-rule($data-state-style-map, default, line-height);
-         font-weight: cx-get-state-rule($data-state-style-map, default, font-weight);
-         font-size: cx-get-state-rule($data-state-style-map, default, font-size);
-
-         &:empty::before {
-            content: "-";
-            visibility: hidden;
-         }
-      }
-
-      td.#{$state}pad {
-         padding: cx-get-state-rule($data-state-style-map, default, padding);
-      }
-
-      .#{$state}selectable & {
-         &:hover,
-         &.#{$state}hover {
-            @include cx-add-state-rules($data-state-style-map, hover);
-         }
-
-         &.#{$state}cursor {
-            @include cx-add-state-rules($data-state-style-map, hover);
-         }
-
-         &.#{$state}selected {
-            @include cx-add-state-rules($data-state-style-map, selected);
-
-            &.#{$state}cursor {
-               @include cx-add-state-rules($data-state-style-map, selected-cursor);
-            }
-         }
-      }
-
-      .#{$state}focused &,
-      :focus & {
-         &.#{$state}cursor {
-            @include cx-add-state-rules($data-state-style-map, cursor);
-         }
-
-         &.#{$state}selected {
-            &.#{$state}cursor {
-               @include cx-add-state-rules($data-state-style-map, selected-cursor);
-            }
-         }
-
-         &:active {
-            @include cx-add-state-rules($data-state-style-map, active);
-         }
-      }
-
-      .#{$state}drag-move &.#{$state}dragged {
-         display: none;
-      }
-
-      .#{$state}drag-copy &.#{$state}dragged {
-         opacity: 0.5;
-      }
-
-      &.#{$state}draggable {
-         touch-action: none;
-      }
-
-      &.#{$state}dummy {
-         td {
-            box-sizing: border-box;
-         }
-      }
-
-      &.#{$state}over {
-         background: orange !important;
-      }
-   }
-
-   .#{$element}#{$name}-dropzone {
-      position: relative;
-      padding: 0;
-
-      .#{$state}drop-preview & {
-         border-top: 1px solid $cx-default-grid-border-color;
-
-         &:after {
-            position: absolute;
-            left: 3px;
-            right: 3px;
-            top: 3px;
-            bottom: 3px;
-            border: 1px dotted gray;
-            content: " ";
-         }
-      }
-
-      .#{$state}drop-insertion & {
-         height: 0;
-
-         &:after {
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            border-top: 1px solid black;
-            content: " ";
-            box-shadow: 0 0 2px black;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-group-caption {
-      font-weight: bold;
-
-      td {
-         padding: cx-get-state-rule($data-state-style-map, default, padding);
-      }
-
-      &:not(:first-child) {
-         td {
-            padding-top: $cx-default-grid-caption-gap;
-         }
-      }
-   }
-
-   @for $i from 1 through 4 {
-      .#{$element}#{$name}-group-caption.#{$state}level-#{$i} td {
-         @include cx-add-state-rules($cx-grid-group-caption-level-style-map, level-#{$i});
-      }
-   }
-
-   .#{$element}#{$name}-group-footer {
-      td {
-         box-sizing: border-box;
-         &.#{$state}pad {
-            padding: cx-get-state-rule($data-state-style-map, default, padding);
-         }
-      }
-   }
-
-   @for $i from 1 through 4 {
-      .#{$element}#{$name}-group-footer.#{$state}level-#{$i} td {
-         @include cx-add-state-rules($cx-grid-group-footer-level-style-map, level-#{$i});
-      }
-   }
-
-   .#{$block}#{$name}.#{$state}cell-editable {
-      .#{$element}#{$name}-data td {
-         &:hover {
-            background: rgba(gray, 0.05);
-         }
-
-         &.#{$state}cellected {
-            position: relative;
-            user-select: none;
-            overflow: visible;
-
-            &:after {
-               position: absolute;
-               pointer-events: none;
-               content: " ";
-               @include cx-add-rules($cell-cursor-style);
-            }
-
-            &:last-child::after {
-               //prevent horizontal scroll for fixed columns
-               right: 0;
-            }
-         }
-
-         &.#{$element}#{$name}-cell-editor {
-            position: relative;
-            user-select: none;
-            overflow: visible;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-cell-editor-wrap {
-      position: absolute;
-      top: -1px;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: calc(100% + 2px);
-
-      & > *:only-child {
-         width: 100%;
-         height: 100%;
-         top: 0;
-         left: 0;
-      }
-   }
-
-   .#{$block}#{$name}.#{$state}buffered,
-   .#{$block}#{$name}.#{$state}fixed-columns {
-      .#{$element}#{$name}-data {
-         white-space: nowrap;
-      }
-   }
-
-   .#{$block}#{$name}.#{$state}fixed-columns {
-      > .#{$element}#{$name}-scroll-area {
-         overflow-x: scroll;
-      }
-   }
-
-   .#{$element}#{$name}-scroll-area {
-      &.#{$state}fixed-footer
-         > .#{$element}#{$name}-table-wrapper
-         > table
-         > .#{$element}#{$name}-group-footer:last-child {
-         visibility: hidden;
-
-         td {
-            border: none;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-fixed-scroll-area {
-      overflow-x: scroll;
-      overflow-y: hidden;
-      border-color: $cx-default-grid-border-color;
-      border-right-style: solid;
-      border-right-width: 1px;
-
-      & > .#{$element}#{$name}-fixed-table-wrapper {
-         padding-top: $cx-default-grid-scroll-wrapper-padding-top;
-      }
-
-      &.#{$state}fixed-footer
-         > .#{$element}#{$name}-fixed-table-wrapper
-         > table
-         > .#{$element}#{$name}-group-footer:last-child {
-         visibility: hidden;
-
-         td {
-            border: none;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-col-header-tool {
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
-   }
-
-   .#{$element}#{$name}-col-resizer {
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 5px;
-      cursor: col-resize;
-   }
-
-   .#{$element}#{$name}-col-resizer-prev-col {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 5px;
-      cursor: col-resize;
-   }
-
-   .#{$element}#{$name}-resize-overlay {
-      position: absolute;
-      display: block;
-      pointer-events: none;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      border-right: 3px solid $cx-default-grid-border-color;
-      background: color-mix(in srgb, $cx-default-grid-border-color 15%, transparent);
-      box-sizing: border-box;
-   }
-
-   .#{$element}#{$name}-col-header-drag-clone {
-      border: 1px solid $cx-default-grid-border-color;
-      padding: cx-get-state-rule($data-state-style-map, default, padding);
-      @include cx-add-state-rules($header-state-style-map, default);
-      box-sizing: border-box;
-      font-size: $cx-default-grid-font-size;
-   }
-
-   .#{$element}#{$name}-col-insertion-marker {
-      border: 1px solid black;
-      position: absolute;
-      top: 0;
-      height: calc(100% - 1px);
-   }
-}
-
-@if (cx-should-include("cx/widgets/Grid")) {
-   @include cx-grid();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+
+@mixin cx-grid(
+   $name: "grid",
+   $header-state-style-map: $cx-grid-header-state-style-map,
+   $data-state-style-map: $cx-grid-data-state-style-map,
+   $cell-cursor-style: $cx-grid-cell-cursor-style,
+   $icon-size: $cx-default-icon-size,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      box-sizing: border-box;
+      position: relative;
+      font-size: $cx-default-grid-font-size;
+      box-shadow: $cx-default-grid-box-shadow;
+      border-radius: $cx-default-grid-border-radius;
+
+      @include cx-add-state-rules($cx-list, default);
+
+      &:focus {
+         @include cx-add-state-rules($cx-list, focus);
+      }
+
+      table {
+         border-spacing: 0;
+         border-collapse: collapse;
+         width: 100%;
+         position: relative;
+         font-size: inherit;
+      }
+
+      .#{$state}aligned-left {
+         text-align: left;
+      }
+
+      .#{$state}aligned-right {
+         text-align: right;
+      }
+
+      .#{$state}aligned-center {
+         text-align: center;
+      }
+
+      &.#{$state}scrollable {
+         overflow: hidden;
+         display: flex;
+         flex-direction: row;
+         align-items: stretch;
+
+         &.#{$state}border {
+            border: 1px solid $cx-default-grid-border-color;
+            background: $cx-default-grid-background;
+
+            table {
+               border: none;
+            }
+
+            .#{$element}#{$name}-header:first-child {
+               th {
+                  border-top: none;
+               }
+            }
+
+            th {
+               border-left: none;
+            }
+
+            th:last-child {
+               border-right: none;
+            }
+         }
+
+         & > .#{$element}#{$name}-scroll-area {
+            overflow-y: auto;
+            flex: 1 1 0%;
+            -webkit-overflow-scrolling: touch;
+
+            &.#{$state}fixed-header
+               > .#{$element}#{$name}-table-wrapper
+               > table
+               > .#{$element}#{$name}-header:first-child {
+               visibility: hidden;
+            }
+
+            //used to cut off the negative margin
+            & > .#{$element}#{$name}-table-wrapper {
+               overflow: hidden;
+               display: inline-block; //preserve content width
+               vertical-align: top;
+               min-width: 100%;
+               min-height: 100%;
+               padding-top: $cx-default-grid-scroll-wrapper-padding-top;
+            }
+         }
+      }
+
+      &.#{$state}resizable {
+         .#{$element}#{$name}-data td,
+         .#{$element}#{$name}-group-footer td,
+         .#{$element}#{$name}-group-header td {
+            box-sizing: border-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+         }
+
+         .cxe-grid-fixed-header .cxe-grid-col-header:last-child {
+            max-width: 100%;
+            width: 100%;
+         }
+      }
+
+      &.#{$state}border {
+         background: $cx-default-grid-background;
+
+         table {
+            border: 1px solid $cx-default-grid-border-color;
+         }
+      }
+
+      &.#{$state}vlines {
+         td:not(:last-child),
+         th:not(:last-child) {
+            border-right-width: 1px;
+            border-right-style: solid;
+            border-right-color: $cx-default-grid-border-color;
+         }
+      }
+
+      &.#{$mod}responsive {
+         width: 100%;
+
+         & > .#{$element}#{$name}-scroll-area {
+            overflow-x: auto;
+         }
+      }
+
+      &.#{$mod}fixed-layout {
+         table {
+            table-layout: fixed;
+            width: auto;
+         }
+      }
+
+      &.#{$mod}contain {
+         table {
+            contain: layout paint;
+         }
+      }
+
+      &.#{$mod}nowrap {
+         .cxe-grid-data td,
+         .cxe-grid-fixed-footer td,
+         .cxe-grid-fixed-fixed-footer td {
+            white-space: nowrap;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-table-wrapper {
+      overflow-anchor: none;
+   }
+
+   .#{$element}#{$name}-cell-clip {
+      overflow: hidden;
+      text-overflow: ellipsis;
+   }
+
+   .#{$element}#{$name}-row-number::after {
+      counter-increment: cx-row-number;
+      content: counter(cx-row-number);
+   }
+
+   .#{$element}#{$name}-fixed-header {
+      overflow: hidden;
+      position: absolute;
+      display: none;
+      left: 0;
+      top: 0;
+      right: 0;
+
+      & > table {
+         width: auto;
+         table-layout: fixed;
+      }
+   }
+
+   .#{$element}#{$name}-fixed-fixed-header {
+      overflow: hidden;
+      position: absolute;
+      display: none;
+      left: 0;
+      top: 0;
+      box-sizing: border-box;
+      border-right: 1px solid $cx-default-grid-border-color;
+
+      & > table {
+         width: auto;
+         table-layout: fixed;
+      }
+   }
+
+   .#{$element}#{$name}-fixed-footer {
+      overflow: hidden;
+      position: absolute;
+      display: none;
+      left: 0;
+      bottom: 0;
+      right: 0;
+
+      & > table {
+         width: auto;
+         table-layout: fixed;
+      }
+   }
+
+   .#{$element}#{$name}-fixed-fixed-footer {
+      overflow: hidden;
+      position: absolute;
+      display: none;
+      left: 0;
+      bottom: 0;
+      border-right: 1px solid $cx-default-grid-border-color;
+      box-sizing: border-box;
+
+      & > table {
+         width: auto;
+         table-layout: fixed;
+      }
+   }
+
+   .#{$element}#{$name}-fixed-footer-corner {
+      width: 100%;
+   }
+
+   .#{$element}#{$name}-empty-text td {
+      color: #aaa;
+      padding: 2rem;
+   }
+
+   .#{$element}#{$name}-col-header {
+      text-align: left;
+      padding: cx-get-state-rule($data-state-style-map, default, padding);
+      box-sizing: border-box;
+      position: relative;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-user-select: none;
+
+      @include cx-add-state-rules($header-state-style-map, default);
+
+      .#{$state}header-default & {
+         border-width: 1px;
+         border-style: solid;
+         position: relative;
+      }
+
+      .#{$state}header-plain & {
+         background-color: transparent;
+      }
+
+      &.#{$state}sortable {
+         cursor: pointer;
+         user-select: none;
+
+         &.#{$state}sorted-asc,
+         &.#{$state}sorted-desc {
+            @include cx-add-state-rules($header-state-style-map, sorted);
+
+            &:hover {
+               @include cx-add-state-rules($header-state-style-map, sorted-hover);
+            }
+         }
+
+         &:hover,
+         .#{$element}#{$name}-fixed-header &:hover {
+            @include cx-add-state-rules($header-state-style-map, hover);
+         }
+
+         .#{$element}#{$name}-fixed-header & {
+            &.#{$state}sorted-asc,
+            &.#{$state}sorted-desc {
+               &:hover {
+                  @include cx-add-state-rules($header-state-style-map, sorted-hover);
+               }
+            }
+         }
+      }
+
+      &.#{$state}tool {
+         transition: padding-left 0.2s;
+         padding-right: cx-calc(15px, $icon-size);
+      }
+
+      &.#{$state}sortable:not(.#{$state}aligned-right) {
+         padding-right: cx-calc(5px, $icon-size);
+
+         .#{$element}#{$name}-column-sort-icon {
+            right: 2px;
+         }
+
+         &.#{$state}tool.#{$state}sorted-asc,
+         &.#{$state}tool.#{$state}sorted-desc {
+            padding-left: cx-calc(5px, $icon-size);
+
+            .#{$element}#{$name}-column-sort-icon {
+               left: 2px;
+            }
+         }
+      }
+
+      &.#{$state}sortable.#{$state}aligned-center {
+         padding-left: cx-calc(5px, $icon-size);
+      }
+
+      &.#{$state}sortable.#{$state}aligned-right {
+         padding-left: cx-calc(5px, $icon-size);
+
+         .#{$element}#{$name}-column-sort-icon {
+            left: 2px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-column-sort-icon {
+      width: $icon-size;
+      height: $icon-size;
+      top: 50%;
+      margin-top: cx-multiply($icon-size, -0.5);
+      position: absolute;
+      transition: transform 0.1s linear;
+
+      .#{$state}sorted-desc > & {
+         transform: rotate(180deg);
+      }
+   }
+
+   .#{$element}#{$name}-data {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      background-color: cx-get-state-rule($data-state-style-map, default, background-color);
+
+      &.#{$state}alternate {
+         @include cx-add-state-rules($data-state-style-map, alternate);
+      }
+
+      td {
+         padding: 0;
+         border-top: 1px solid cx-get-state-rule($data-state-style-map, default, border-color);
+         line-height: cx-get-state-rule($data-state-style-map, default, line-height);
+         font-weight: cx-get-state-rule($data-state-style-map, default, font-weight);
+         font-size: cx-get-state-rule($data-state-style-map, default, font-size);
+
+         &:empty::before {
+            content: "-";
+            visibility: hidden;
+         }
+      }
+
+      td.#{$state}pad {
+         padding: cx-get-state-rule($data-state-style-map, default, padding);
+      }
+
+      .#{$state}selectable & {
+         &:hover,
+         &.#{$state}hover {
+            @include cx-add-state-rules($data-state-style-map, hover);
+         }
+
+         &.#{$state}cursor {
+            @include cx-add-state-rules($data-state-style-map, hover);
+         }
+
+         &.#{$state}selected {
+            @include cx-add-state-rules($data-state-style-map, selected);
+
+            &.#{$state}cursor {
+               @include cx-add-state-rules($data-state-style-map, selected-cursor);
+            }
+         }
+      }
+
+      .#{$state}focused &,
+      :focus & {
+         &.#{$state}cursor {
+            @include cx-add-state-rules($data-state-style-map, cursor);
+         }
+
+         &.#{$state}selected {
+            &.#{$state}cursor {
+               @include cx-add-state-rules($data-state-style-map, selected-cursor);
+            }
+         }
+
+         &:active {
+            @include cx-add-state-rules($data-state-style-map, active);
+         }
+      }
+
+      .#{$state}drag-move &.#{$state}dragged {
+         display: none;
+      }
+
+      .#{$state}drag-copy &.#{$state}dragged {
+         opacity: 0.5;
+      }
+
+      &.#{$state}draggable {
+         touch-action: none;
+      }
+
+      &.#{$state}dummy {
+         td {
+            box-sizing: border-box;
+         }
+      }
+
+      &.#{$state}over {
+         background: orange !important;
+      }
+   }
+
+   .#{$element}#{$name}-dropzone {
+      position: relative;
+      padding: 0;
+
+      .#{$state}drop-preview & {
+         border-top: 1px solid $cx-default-grid-border-color;
+
+         &:after {
+            position: absolute;
+            left: 3px;
+            right: 3px;
+            top: 3px;
+            bottom: 3px;
+            border: 1px dotted gray;
+            content: " ";
+         }
+      }
+
+      .#{$state}drop-insertion & {
+         height: 0;
+
+         &:after {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            border-top: 1px solid black;
+            content: " ";
+            box-shadow: 0 0 2px black;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-group-caption {
+      font-weight: bold;
+
+      td {
+         padding: cx-get-state-rule($data-state-style-map, default, padding);
+      }
+
+      &:not(:first-child) {
+         td {
+            padding-top: $cx-default-grid-caption-gap;
+         }
+      }
+   }
+
+   @for $i from 1 through 4 {
+      .#{$element}#{$name}-group-caption.#{$state}level-#{$i} td {
+         @include cx-add-state-rules($cx-grid-group-caption-level-style-map, level-#{$i});
+      }
+   }
+
+   .#{$element}#{$name}-group-footer {
+      td {
+         box-sizing: border-box;
+         &.#{$state}pad {
+            padding: cx-get-state-rule($data-state-style-map, default, padding);
+         }
+      }
+   }
+
+   @for $i from 1 through 4 {
+      .#{$element}#{$name}-group-footer.#{$state}level-#{$i} td {
+         @include cx-add-state-rules($cx-grid-group-footer-level-style-map, level-#{$i});
+      }
+   }
+
+   .#{$block}#{$name}.#{$state}cell-editable {
+      .#{$element}#{$name}-data td {
+         &:hover {
+            background: rgba(gray, 0.05);
+         }
+
+         &.#{$state}cellected {
+            position: relative;
+            user-select: none;
+            overflow: visible;
+
+            &:after {
+               position: absolute;
+               pointer-events: none;
+               content: " ";
+               @include cx-add-rules($cell-cursor-style);
+            }
+
+            &:last-child::after {
+               //prevent horizontal scroll for fixed columns
+               right: 0;
+            }
+         }
+
+         &.#{$element}#{$name}-cell-editor {
+            position: relative;
+            user-select: none;
+            overflow: visible;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-cell-editor-wrap {
+      position: absolute;
+      top: -1px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(100% + 2px);
+
+      & > *:only-child {
+         width: 100%;
+         height: 100%;
+         top: 0;
+         left: 0;
+      }
+   }
+
+   .#{$block}#{$name}.#{$state}buffered,
+   .#{$block}#{$name}.#{$state}fixed-columns {
+      .#{$element}#{$name}-data {
+         white-space: nowrap;
+      }
+   }
+
+   .#{$block}#{$name}.#{$state}fixed-columns {
+      > .#{$element}#{$name}-scroll-area {
+         overflow-x: scroll;
+      }
+   }
+
+   .#{$element}#{$name}-scroll-area {
+      &.#{$state}fixed-footer
+         > .#{$element}#{$name}-table-wrapper
+         > table
+         > .#{$element}#{$name}-group-footer:last-child {
+         visibility: hidden;
+
+         td {
+            border: none;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-fixed-scroll-area {
+      overflow-x: scroll;
+      overflow-y: hidden;
+      border-color: $cx-default-grid-border-color;
+      border-right-style: solid;
+      border-right-width: 1px;
+
+      & > .#{$element}#{$name}-fixed-table-wrapper {
+         padding-top: $cx-default-grid-scroll-wrapper-padding-top;
+      }
+
+      &.#{$state}fixed-footer
+         > .#{$element}#{$name}-fixed-table-wrapper
+         > table
+         > .#{$element}#{$name}-group-footer:last-child {
+         visibility: hidden;
+
+         td {
+            border: none;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-col-header-tool {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+   }
+
+   .#{$element}#{$name}-col-resizer {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 5px;
+      cursor: col-resize;
+   }
+
+   .#{$element}#{$name}-col-resizer-prev-col {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 5px;
+      cursor: col-resize;
+   }
+
+   .#{$element}#{$name}-resize-overlay {
+      position: absolute;
+      display: block;
+      pointer-events: none;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      border-right: 3px solid $cx-default-grid-border-color;
+      background: color-mix(in srgb, $cx-default-grid-border-color 15%, transparent);
+      box-sizing: border-box;
+   }
+
+   .#{$element}#{$name}-col-header-drag-clone {
+      border: 1px solid $cx-default-grid-border-color;
+      padding: cx-get-state-rule($data-state-style-map, default, padding);
+      @include cx-add-state-rules($header-state-style-map, default);
+      box-sizing: border-box;
+      font-size: $cx-default-grid-font-size;
+   }
+
+   .#{$element}#{$name}-col-insertion-marker {
+      border: 1px solid black;
+      position: absolute;
+      top: 0;
+      height: calc(100% - 1px);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Grid")) {
+   @include cx-grid();
+}