// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the
//          version in your base theme's directory,
//          for example alta/widgets/_oj.alta.table.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@import "../../utilities/oj.utilities";
@import "oj.common.formcontrol.mixins";

@if $includeTableClasses != false  {
  @include module-include-once("common.table") {

    /* table */
    /* --------------------------------------------------------------- */

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-table:not(.oj-complete) {
        visibility: hidden;
      }
    }

    /* Styling for the root component element. */
    .oj-table {
       position: relative;
       line-height: normal;
       font-size: inherit;
       min-width: 240px;

       // min-height is 2 rows (1 row for the header + 1 row for the body)
       // to leave space for the No Data message.
       min-height: calc(2 * #{$collectionRowHeight});

       @include oj-user-select-property (none);
       // prevent graying on iOS safari
       -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    /* Grid display styling for the root component element. */
    .oj-table.oj-table-grid-display {

       border: 1px solid $collectionBorderColor;
       background-color: $collectionBgColor;

    }

    /* Styling for the root component element with warning. */
    .oj-table.oj-warning {

       border: 1px solid $borderColorWarning;

    }

    /* Styling for the component div container element. */
    .oj-table-container {
       display: inline-block;
       vertical-align:top;
       clear: both;
       box-sizing: border-box;
       overflow: hidden;
    }

    .oj-table-scroller {
      background-color: inherit;
      overflow: auto;
      // enable momentum based scrolling for touch devices
      -webkit-overflow-scrolling: touch;
    }

    .oj-table-external-scroll.oj-table-container,
    .oj-table-external-scroll .oj-table-scroller {
      overflow: visible;
    }
  
    .oj-table-stretch .oj-table-scroller {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .oj-table-scroll-vertical.oj-table-hide-vertical-scrollbar .oj-table-scroller,
    .oj-table-hide-vertical-scrollbar .oj-table-scroller {
      overflow-y: hidden;
    }

    .oj-table-width-container {
      position: absolute;
      top: -1000px;
      left: -1000px;
      visibility: hidden;
    }

    /* Styling for HTML table element. */
    table.oj-table-element {
       box-sizing: border-box;
       width: 100%;
       outline: none;
       border-collapse: collapse;
       border-spacing: 0;
       font-size: inherit;
    }

    .oj-table-sticky table.oj-table-element {
      border-collapse: separate;
    }

    /* Styling for HTML table element when column resizing. */
    table.oj-table-element.oj-table-column-header-resizing {
       user-select: none;
       -moz-user-select: none;
       -webkit-user-select: none;
       -ms-user-select: none;
    }

    /* Styling for the header element. */
    .oj-table-header {

        height: $tableRowHeight;
        color: $collectionHeaderTextColor;
        border-bottom: 1px solid $tableHeaderBorderColor;

      font-size: inherit;
      overflow: hidden;
    }

    /* Styling for the header element when table has vertical or horizontal scrollbars. */
    .oj-table-legacy-scroll .oj-table-header {
      display: block;
      position: relative;
      height: calc(#{$tableRowHeight} - 1px);
    }

    /* Grid display styling for the header element. */
    .oj-table-grid-display .oj-table-header {

        height: $collectionRowHeight;
        background-color: $collectionHeaderBgColor;
        border-bottom: 1px solid $collectionHeaderBorderColor;

    }

    /* Styling for the header element when table has vertical or horizontal scrollbars. */
    .oj-table-grid-display .oj-table-legacy-scroll .oj-table-header {
      height: calc(#{$collectionRowHeight} - 1px);
    }

    .oj-table-sticky .oj-table-header,
    .oj-table-grid-display .oj-table-sticky .oj-table-header {
      border-bottom: none;
    }

    /* Styling for the header row element. */
    .oj-table-header-row {

        height: calc(#{$tableRowHeight} - 1px);

      font-size: inherit;
      vertical-align: middle;
    }

    /* Grid display table styling for the header row element. */
    .oj-table-grid-display .oj-table-header-row {

        height: calc(#{$collectionRowHeight} - 1px);

    }

    /* Styling for the header row element when table is scrollable. */
    .oj-table-legacy-scroll .oj-table-header-row {
      min-height: calc(#{$tableRowHeight} - 1px);
      height: auto;
      display: block;
      position: relative;
    }

    /* Grid display table styling for the header row element when table is scrollable. */
    .oj-table-legacy-scroll.oj-table-grid-display .oj-table-header-row {
      min-height: calc(#{$collectionRowHeight} - 1px);
    }

    /* Styling for the column header elements. */
    .oj-table-column-header-cell {
       font-size: inherit;

       font-weight: $collectionHeaderFontWeight;
       padding-left: $tableHeaderPadding;
       padding-right: $tableHeaderPadding;
       padding-top: $collectionCellPadding;
       padding-bottom: $collectionCellPadding;
       height: calc(#{$tableRowHeight} - 1px);

       float: none;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       @include oj-ltr() {
         text-align: left;
       }
       @include oj-rtl() {
         text-align: right;
       }
       box-sizing: border-box;
    }

    .oj-table-sticky .oj-table-column-header-cell:not(.oj-helper-hidden-accessible),
    .oj-table-sticky .oj-table-column-header-selector-cell:not(.oj-helper-hidden-accessible) {
      position: sticky;
      top: 0;
      z-index: 1;
      border-bottom: 1px solid $collectionBorderColor;
    }

    /* Grid display table styling for the column header elements. */
    .oj-table-grid-display .oj-table-column-header-cell {

       height: calc(#{$collectionRowHeight} - 1px);
       padding-left: $collectionCellPadding;
       padding-right: $collectionCellPadding;

    }

    /* Editable display table styling for the column header elements. */
    .oj-table-editable .oj-table-column-header-cell {

       padding-left: $collectionCellPadding;
       padding-right: $collectionCellPadding;

    }

    /* Styling to remove the right border of the last column header. */
    .oj-table-column-header-cell:last-child {
       @include oj-ltr() {
         border-right: 0;
       }
       @include oj-rtl() {
         border-left: 0;
       }
    }

    /* Styling for the vertical grid lines for header cells. */
    .oj-table-column-header-cell.oj-table-vgrid-lines {
       @include oj-ltr() {
         border-right: 1px solid transparent;
       }
       @include oj-rtl() {
         border-left: 1px solid transparent;
       }
    }

    /* Styling for the column header elements in selected state when table focused. */
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected,
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-cell.oj-selected {

        background-image: linear-gradient($collectionHeaderBgColorSelected, $collectionHeaderBgColorSelected);

    }

    /* Styling for the column header elements in selected state when table not focused. */
    .oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected,
    .oj-table:not(.oj-focus) .oj-table-footer-cell.oj-selected {

      background-image: linear-gradient($collectionHeaderBgColorSelectedInactive, $collectionHeaderBgColorSelectedInactive);

    }

    /* Styling for the column header element in hover state. */
    .oj-table-column-header-cell.oj-hover {

      background-image: linear-gradient($collectionHeaderBgColorHover, $collectionHeaderBgColorHover);

    }

    /* Styling for the column header element in focused state. */
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-focus-highlight,
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-cell.oj-focus-highlight,
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-footer-selector-cell.oj-focus-highligh {
       outline-offset: -1px;

         @include oj-browser-focus-outline-approximation($primaryTextColor);

    }

    /* Styling for the dragged column header element. */
    .oj-table-column-header-cell.oj-drag {

        background-color: $collectionHeaderBgColorDrag;
        color: $textColorDisabled;

    }

    /* Styling for the column header drag image. */
    .oj-table-column-header-cell-drag-image {

        border: 1px solid $collectionHeaderDragImageBorderColor;
        background-color: $collectionHeaderBgColorSelected;

    }

    /* Styling for the column header drag indicator after a column. */
    .oj-table-column-header-cell.oj-table-column-header-drag-indicator-after {

       @include oj-ltr() {
         border-right: 6px solid $dropTarget2Color;
       }
       @include oj-rtl() {
         border-left: 6px solid $dropTarget2Color;
       }

    }


    /* Styling for the column header drag indicator before a column. */
    .oj-table-column-header-cell.oj-table-column-header-drag-indicator-before {

       @include oj-ltr() {
         border-left: 6px solid $dropTarget2Color;
       }
       @include oj-rtl() {
         border-right: 6px solid $dropTarget2Color;
       }

    }

    /* Styling for the column header element. */
    .oj-table-column-header {
      display: flex;
      position: relative;
      float: none;
      text-overflow: inherit;
      overflow: inherit;
    }

    /* Styling for the column header text. */
    .oj-table-column-header-text {
      display: inline-block;
      height: inherit;
      overflow: inherit;
      text-overflow: inherit;
      vertical-align: top;
      width: 100%;
    }

    .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
      @include oj-ltr() {
       padding-right: 26px;
      }
      @include oj-rtl() {
       padding-left: 26px;
      }
    }

    .oj-table-editable .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
      @include oj-ltr() {
       padding-right: calc(16px + #{$collectionCellPadding});
      }
      @include oj-rtl() {
       padding-left: calc(16px + #{$collectionCellPadding});
      }
    }

    .oj-table-grid-display .oj-table-column-header-cell.oj-table-sort .oj-table-column-header-text {
      @include oj-ltr() {
       padding-right: calc(16px + #{$collectionCellPadding});
      }
      @include oj-rtl() {
       padding-left: calc(16px + #{$collectionCellPadding});
      }
    }

    /* Styling for the sort area around the icon */
    .oj-table-sort-icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      height: 100%;

      padding-top: $collectionCellPadding;
      padding-bottom: $collectionCellPadding;

      position: absolute;
      top: 0;
      -webkit-user-select: none;
      @include oj-ltr() {
        right: 0;
        padding-left: $collectionCellPadding;
      }

      @include oj-rtl() {
        left: 0;
        padding-right: $collectionCellPadding;
      }
    }

     /* Styling for the gradient for sort icons in the header */
    .oj-table-sort-icon-container.oj-enabled {
      background-image: linear-gradient(to right, rgba(white, 0), white 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba(white, 0), white 40%);
      }
    }

    /* Grid display styling for the gradient for sort icons in the header */
    .oj-table-grid-display .oj-table-sort-icon-container.oj-enabled {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColor, 0), $collectionHeaderBgColor 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColor, 0), $collectionHeaderBgColor 40%);
      }
    }

    /* Styling for the gradient for sort icons on hover in the header */
    .oj-table-column-header-cell.oj-hover .oj-table-sort-icon-container {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColorHover, 0), $collectionHeaderBgColorHover 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColorHover, 0), $collectionHeaderBgColorHover 40%);
      }
    }

    /* Styling for the gradient for sort icons on hover in the selected header column */
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected.oj-hover .oj-table-sort-icon-container {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColorSelected, 0), $collectionHeaderBgColorSelected 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColorSelected, 0), $collectionHeaderBgColorSelected 40%);
      }
    }

     /* Styling for the gradient for sort icons in the selected header column */
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-column-header-cell.oj-selected .oj-table-sort-icon-container.oj-enabled {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColorSelected, 0), $collectionHeaderBgColorSelected 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColorSelected, 0), $collectionHeaderBgColorSelected 40%);
      }
    }

     /* Styling for the gradient for sort icons on hover in selected in-active header column */
    .oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected.oj-hover .oj-table-sort-icon-container {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColorSelectedInactive, 0), $collectionHeaderBgColorSelectedInactive 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColorSelectedInactive, 0), $collectionHeaderBgColorSelectedInactive 40%);
      }
    }

    /* Styling for the gradient for sort icons in selected in-active header column */
    .oj-table:not(.oj-focus) .oj-table-column-header-cell.oj-selected .oj-table-sort-icon-container.oj-enabled {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColorSelectedInactive, 0), $collectionHeaderBgColorSelectedInactive 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColorSelectedInactive, 0), $collectionHeaderBgColorSelectedInactive 40%);
      }
    }

    /* Styling for the gradient for sort icon in the dragged column header element. */
    .oj-table-column-header-cell.oj-drag .oj-table-sort-icon-container {
      background-image: linear-gradient(to right, rgba($collectionHeaderBgColorDrag, 0), $collectionHeaderBgColorDrag 40%);
      @include oj-rtl() {
        background-image: linear-gradient(to left, rgba($collectionHeaderBgColorDrag, 0), $collectionHeaderBgColorDrag 40%);
      }
  }

  /* Styling for the gradient for sort icons in column header drag image. */
  .oj-table-column-header-cell-drag-image .oj-table-sort-icon-container {
    background-image: linear-gradient(to right, rgba($collectionHeaderBgColorSelected, 0), $collectionHeaderBgColorSelected 40%);
    @include oj-rtl() {
      background-image: linear-gradient(to left, rgba($collectionHeaderBgColorSelected, 0), $collectionHeaderBgColorSelected 40%);
    }
  }

    /* Styling for both the sort icons and click area */
    .oj-table-column-header-asc-icon,
    .oj-table-column-header-dsc-icon,
    .oj-table-column-header-default-sort-icon {
      flex: 0 1 auto;
    }

    /* Styling for disabled sort icons */
    .oj-table-column-header-default-sort-icon.oj-disabled {
      display: none;
    }
    
    /* Styling for the column header resize indicator. */
    .oj-table-column-header-resize-indicator {
      position: absolute;
      top: 0;
      width: 0;
      border-top-width: 0;
      border-bottom-width: 0;
      border-style: solid;

        border-color: $collectionHeaderBgColorSelected;

      pointer-events: none;
    }

    .oj-table-sticky .oj-table-column-header-resize-indicator {
      z-index: 1;
    }

    /* Styling for the data body element. */
    .oj-table-body {
      color: $collectionCellTextColor;
      font-size: inherit;
      overflow: hidden;
    }

    /* Styling for the table body element when table is scrollable. */
    .oj-table-legacy-scroll .oj-table-body {
      display: block;
      position: relative;
      // enable momentum based scrolling for touch devices
      -webkit-overflow-scrolling: touch;
    }

    /* Styling for the table body element when table has vertical scrollbars. */
    /* Firefox does not work correctly with overflow:auto, so we need to set scroll explicitly */
    .oj-table-scroll-vertical:not(.oj-table-sticky) .oj-table-body,
    .oj-table-scroll-vertical .oj-table-scroller {
      overflow-y: scroll;
    }

    /* Styling for the table body element when table has horizontal scrollbars. */
    /* Firefox does not work correctly with overflow:auto, so we need to set scroll explicitly */
    .oj-table-scroll-horizontal:not(.oj-table-sticky) .oj-table-body,
    .oj-table-scroll-horizontal .oj-table-scroller {
      overflow-x: scroll;
    }

    /* Grid display styling for the data body element. */
    .oj-table-grid-display .oj-table-body {
      background-color: $collectionCellBgColor;
    }

    /* Styling for the data row elements. */
    .oj-table-body-row {

        height: $tableRowHeight;

      font-size: inherit;
    }

    .oj-table-body-scroll-buffer {
      height: 0px;
    }

    .oj-table-legacy-width-buffer {
      visibility: collapse;
      height: 0px;
    }

    .oj-table-legacy-width-buffer-cell {
      height: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
    }

    .oj-table-legacy-sizer {
      visibility: hidden;
      position: relative;
      top: 0px;
      left: 0px;
      height: 0px;
      width: 0px;
    }

    .oj-table-horizontal-grid:not(.oj-table-sticky) .oj-table-body-row,
    .oj-table-sticky.oj-table-horizontal-grid .oj-table-data-cell,
    .oj-table-sticky.oj-table-horizontal-grid .oj-table-selector-cell {
      border-bottom: 1px solid $collectionCellBorderColor;
    }

    .oj-table-horizontal-grid.oj-table-scroll-vertical:not(.oj-table-sticky) .oj-table-body-row:last-child,
    .oj-table-sticky.oj-table-horizontal-grid.oj-table-scroll-vertical .oj-table-body-row:last-child .oj-table-data-cell,
    .oj-table-sticky.oj-table-horizontal-grid.oj-table-scroll-vertical .oj-table-body-row:last-child .oj-table-selector-cell {
      border-bottom: none;
    }

    /* Grid display table styling for the data row elements. */
    .oj-table-grid-display .oj-table-body-row {

        height: $collectionRowHeight;

    }

    /* Styling for the data row elements in focus state. */
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-row.oj-focus-highlight:not(.oj-table-body-row-edit),
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-body-message-row.oj-focus-highlight,
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-no-data-row.oj-focus-highlight {
       outline-offset: -1px;

         @include oj-browser-focus-outline-approximation($primaryTextColor);

    }

    /* Styling for drag image of row. */
    .oj-table-body-row-drag-image {
      opacity: 0.95;
      background-color: $collectionCellBgColor;
      border: 1px solid $collectionCellDragImageBorderColor;
    }

    /* Styling for drag source when dnd with other component */
    .oj-table-row-drag-source-opaque {
      opacity: 0.3;
    }

    /* Styling for drag source when dnd within component */
    .oj-table-row-drag-source-hide {
      display: none;
    }

    /* Styling for drop target when target table is empty. */
    .oj-table-drop-target-empty .oj-table-body-row-drag-indicator {
      background-color: $dropTarget1Color;
    }

    /* Styling for the data row drag indicator. */
    .oj-table-body-row-drag-indicator {

        height: $collectionRowHeight;
        background-color: $dropTarget2Color;

    }

    /* Styling for drop target when dnd with other component */
    .oj-table-body-row-drop-target {
      width: 100%;
      height: 2px;
      background-color: $dropTargetLineColor;
    }

    .oj-table-touch-affordance-glass-pane {
      position: absolute;
      width: 100%;
      pointer-events: none;
      overflow: hidden;
    }

    /* Styling for the selection affordance icon on touch devices*/
    .oj-table-body-row-touch-selection-affordance-top-icon,
    .oj-table-body-row-touch-selection-affordance-bottom-icon {

        @include oj-border-radius(50%);
        border: 2px solid $collectionSelectionAffordanceBorderColor;
        background-color: $iconColorHover;

      box-sizing: border-box;
      position: absolute;
      width: 11px;
      height: 11px;
      z-index: 1;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    /* Styling for the selection affordance touchable area on touch devices*/
    .oj-table-body-row-touch-selection-affordance-touch-area {
       width: 24px;
       height: 24px;
       position: absolute;
       pointer-events: auto;
    }

    /* Styling for the data cell elements. */
    .oj-table-data-cell {
       font-size: inherit;
       font-weight: normal;

         min-width: $fontSize;
         min-height: $fontSize;
         padding-top: calc(#{$collectionCellPadding} + 1px);
         padding-bottom: $collectionCellPadding;
         padding-left: $tableCellPadding;
         padding-right: $tableCellPadding;
         height: $tableRowHeight;

       float: none;
       @include oj-ltr() {
         text-align: left;
       }
       @include oj-rtl() {
         text-align: right;
       }
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       box-sizing: border-box;
    }

    /* Grid display table styling for the data cell elements. */
    .oj-table-grid-display .oj-table-data-cell {

        padding-left: $collectionCellPadding;
        padding-right: $collectionCellPadding;
        height: $collectionRowHeight;

    }
    
    /* Editable table styling for the data cell elements. */
    .oj-table-editable .oj-table-data-cell {

        padding-left: $collectionCellPadding;
        padding-right: $collectionCellPadding;

    }

    /* Edit row styling for data cell elements. */
    .oj-table-body-row-edit .oj-table-data-cell:not(.oj-read-only) {
       padding: 0;
    }

    /* Edit row styling for data cell elements. */
    .oj-table-data-cell.oj-table-data-cell-edit {

        outline: 1px solid $collectionEditableCellBorderColorFocus;
        outline-offset: -1px;

    }

    /* Styling on read only table cells, oj-readOnly must be applied by the application */
    .oj-table-data-cell.oj-read-only {

      background-image: linear-gradient($collectionEditableCellBgColorReadOnly, $collectionEditableCellBgColorReadOnly);

    }

    /* A helper class oj-table-data-cell-no-padding should have padding 0*/
    .oj-table-data-cell.oj-table-data-cell-no-padding {
       padding: 0;
    }

    /* A helper class oj-table-data-cell-padding should be applied to editable components that should maintain padding in edit mode*/
    .oj-table-body-row-edit .oj-table-data-cell.oj-table-data-cell-padding {

        padding: $collectionCellPadding;

    }

    /* Styling for the dragged data cell elements. */
    .oj-table-data-cell.oj-drag {

        background-color: $collectionCellBgColorDrag;
        color: $textColorDisabled;

    }

    /* Styling for the data cell elements in selected state when table focused. */
    .oj-table-element:not(.oj-table-column-header-resizing) .oj-table-data-cell.oj-selected {

      background-image: linear-gradient($collectionCellBgColorSelected, $collectionCellBgColorSelected);

    }

    /* Styling for the data cell elements in selected state when table in high contrast mode. */
    .oj-hicontrast .oj-table-data-cell.oj-selected {
       border: 3px double;
    }

    /* Styling for the data cell elements in selected state when table not focused. */
    .oj-table:not(.oj-focus) .oj-table-data-cell.oj-selected {

      background-image: linear-gradient($collectionCellBgColorSelectedInactive, $collectionCellBgColorSelectedInactive);

    }

    /* Styling for the data cell elements in hover state. */
    .oj-table-data-cell.oj-hover {

      background-image: linear-gradient($collectionCellBgColorHover, $collectionCellBgColorHover);

    }

    /* Styling on form controls stamped inside a table */
    .oj-table-data-cell.oj-form-control-inherit:not(.oj-form-control-default) {
      @include oj-form-control-padding-override(
        $padding: "0 #{$collectionCellPadding}");

    }

    .oj-table-data-cell .oj-checkboxset .oj-checkbox-label {
      justify-content: flex-end;
    }

    /* Styling for the footer. */
    .oj-table-footer {
       font-size: inherit;
       overflow: hidden;
    }

    /* Styling for the footer when table has vertical or horizontal scrollbars. */
    .oj-table-legacy-scroll .oj-table-footer {
      display: block;
      position: relative;
    }

    /* Grid display styling for the footer. */
    .oj-table-grid-display .oj-table-footer {
      background-color: $collectionHeaderBgColor;
      border-top: 1px solid $collectionBorderColor;
    }

    /* Styling for the footer row. */
    .oj-table-footer-row {

        height: $tableRowHeight;

       font-size: inherit;
    }

    /* Grid display table styling for the footer row. */
    .oj-table-grid-display .oj-table-footer-row {

        height: $collectionRowHeight;

    }

    /* Styling for the footer row when table is scrollable. */
    .oj-table-legacy-scroll .oj-table-footer-row {
      min-height: $tableRowHeight;
      height: auto;
      display: block;
      position: relative;
    }

    /* Grid display table styling for the footer row when table is scrollable. */
    .oj-table-legacy-scroll.oj-table-grid-display .oj-table-footer-row {
      min-height: $collectionRowHeight;
    }

    /* Styling for the footer cells. */
    .oj-table-footer-cell,
    .oj-table-footer-selector-cell {
       float: none;
       height: $tableRowHeight;

       padding-top: $collectionCellPadding;
       padding-bottom: $collectionCellPadding;
       padding-left: $tableHeaderPadding;
       padding-right: $tableHeaderPadding;

       font-size: inherit;
       box-sizing: border-box;
    }

    .oj-table-sticky .oj-table-footer-cell,
    .oj-table-sticky .oj-table-footer-selector-cell {
      position: sticky;
      bottom: 0;
      z-index: 1;
    }

    /* Grid display table styling for the footer cells. */
    .oj-table-grid-display .oj-table-footer-cell,
    .oj-table-grid-display .oj-table-footer-selector-cell {

        height: $collectionRowHeight;
        padding-left: $collectionCellPadding;
        padding-right: $collectionCellPadding;

    }

    /* Styling for the vertical grid lines for data cells. */
    .oj-table-data-cell.oj-table-vgrid-lines {

        @include oj-ltr() {
          border-right: 1px solid $collectionCellBorderColor;
        }
        @include oj-rtl() {
          border-left: 1px solid $collectionCellBorderColor;
        }

    }


    /* Grid display styling for the vertical grid lines. */
    .oj-table-grid-display .oj-table-vgrid-lines,
    .oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines {

        @include oj-ltr() {
          border-right: 1px solid $collectionCellBorderColor;
        }
        @include oj-rtl() {
          border-left: 1px solid $collectionCellBorderColor;
        }  

    }
    
    /* Styling to remove the right border of the last vertical grid line. */
    .oj-table-vgrid-lines:last-child,
    .oj-table-grid-display .oj-table-vgrid-lines:last-child,
    .oj-table-grid-display .oj-table-column-header-cell.oj-table-vgrid-lines:last-child {
       @include oj-ltr() {
         border-right: 0;
       }
       @include oj-rtl() {
         border-left: 0;
       }
    }

    /* Styling for the status message. */
    .oj-table-status-message {
      position: absolute;
    }

    /* Styling for the status message text. */
    // InfoBackground & InfoText are CSS2 system colors
    .oj-table-status-message-text {
      background-color: InfoBackground;
      color: InfoText;

        border: 1px $collectionCellBorderColor solid;
        padding: $collectionCellPadding;

      display: inline-block;
    }

    /* Styling for the activity indicator. */
    .oj-table-loading-icon {
      position: relative;
      display: block;
      width: 40px;
      height: 40px;
      margin: auto;
      @include oj-icon-content(
        $icon: oj-image-url("spinner_full.gif"),
        $lowResProportion: 0.25
      );
    }

    /* Styling for the body message. */
    .oj-table-body-message {

        color: $textColor;
        padding: $collectionCellPadding;

    }

    .oj-table-body-message-row,
    .oj-table-no-data-row {
      position: relative;
    }

    /* Styling for a panel that can attach to the bottom of the table
       and match the table colors. An app developer can put a paging control
       in a div with this class, for example. */
    .oj-table-panel-bottom {
    }

    /* Styling for a panel that can attach to the bottom of the table
       and match the table colors when table is in grid display. An app developer
       can put a paging control in a div with this class, for example. */
    .oj-table-panel-bottom-grid-display {
       border-style: solid;

         border-color: $collectionBorderColor;
         background-color: $collectionBgColor;
       
       border-width: 0 1px 1px;
    }
  }
}