@use './variables' as v;
@use './svg-utilities' as svg;

// ----------------------------------------------
// Slick Grid default theme
// ----------------------------------------------

@keyframes fade {
  0%,
  100% {
    background: none;
  }
  50% {
    background: var(--slick-row-highlight-background-color, v.$slick-row-highlight-background-color);
  }
}

@keyframes slickgrid-invalid-highlight {
  from {
    box-shadow: 0 0 6px red;
  }
  to {
    box-shadow: none;
  }
}

.full-height {
  height: 100%;
}
.grid-pane {
  width: 100%;
}
.pointer {
  cursor: pointer;
}

// default buttons used by SlickGrid and also when appended to body (e.g. LongText Editor)
.btn-default {
  color: var(--slick-btn-default-text-color, v.$slick-btn-default-text-color);
  border: var(--slick-btn-default-border, v.$slick-btn-default-border);
  &:hover {
    border-color: var(--slick-btn-default-border-hover-color, v.$slick-btn-default-border-hover-color);
  }
}
.slick-dark-mode {
  .btn-default {
    color: var(--slick-btn-default-text-color, v.$slick-btn-default-text-color);
    border: var(--slick-btn-default-border, v.$slick-btn-default-border);
    &:hover {
      border-color: var(--slick-btn-default-border-hover-color, v.$slick-btn-default-border-hover-color);
    }
  }
}

/* slickgrid internal icons (used for grouping, tree data, pagination, etc..) */
.sgi {
  display: inline-flex;
  align-items: center;
  background-color: currentColor;
  font-size: var(--slick-icon-font-size, v.$slick-icon-font-size);
  width: 1em;
  height: 1em;
}

.slickgrid-container {
  outline: 0;
  position: relative;
  box-sizing: content-box;
  overflow: hidden;
  width: 100%;
  border-top: var(--slick-container-border-top, v.$slick-container-border-top);
  border-bottom: var(--slick-container-border-bottom, v.$slick-container-border-bottom);
  border-left: var(--slick-container-border-left, v.$slick-container-border-left);
  border-right: var(--slick-container-border-right, v.$slick-container-border-right);
  font-family: var(--slick-font-family, v.$slick-font-family);

  // Reset the margin of the checkboxes. The grid
  // needs a selection checbox column. Bootstrap gives
  // these elements a 4px top margin, which we have to reset
  // by aligning to baseline.
  input[type='checkbox'] {
    vertical-align: baseline;
    margin: 0;
  }

  .slick-group-header-column,
  .slick-header-columns,
  .slick-header-column {
    box-sizing: content-box !important; /* this here only for Firefox! */
  }
  .slick-header-column:hover {
    background: var(--slick-header-column-background-hover, v.$slick-header-column-background-hover);
  }

  .slick-header-column:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--slick-focus-outline-color, v.$slick-focus-outline-color);
  }

  .slick-header-column-active {
    background-color: var(--slick-header-column-background-active, v.$slick-header-column-background-active) !important;
  }

  .slick-headerrow {
    background: var(--slick-grid-header-background, v.$slick-grid-header-background);
  }
  .grid-canvas {
    background: var(--slick-canvas-bg-color, v.$slick-canvas-bg-color);
  }

  .slick-group {
    border-bottom: var(--slick-group-border-bottom, v.$slick-group-border-bottom);
  }

  .slick-sortable-placeholder {
    background: var(--slick-header-column-sortable-background-hover, v.$slick-header-column-sortable-background-hover);
  }

  .slick-row {
    position: absolute;
    width: 100%;
    border: 0;
    line-height: 20px;
    color: var(--slick-cell-text-color, v.$slick-cell-text-color);
    font-family: var(--slick-cell-font-family, v.$slick-cell-font-family);
    font-weight: var(--slick-cell-font-weight, v.$slick-cell-font-weight);

    &:hover {
      background-color: var(--slick-row-mouse-hover-color, v.$slick-row-mouse-hover-color);
      box-shadow: var(--slick-row-mouse-hover-box-shadow, v.$slick-row-mouse-hover-box-shadow);
      z-index: var(--slick-row-mouse-hover-z-index, v.$slick-row-mouse-hover-z-index);
    }
    &.active {
      padding: var(--slick-cell-padding, v.$slick-cell-padding);
    }
    &.highlighter {
      background: orange !important;
      transition-property: background;
      transition-duration: 3s;
      transition-timing-function: ease-in;
    }
    &.copied {
      background: var(--slick-copied-cell-bg-color-transition, v.$slick-copied-cell-bg-color-transition);
      transition: var(--slick-copied-cell-transition, v.$slick-copied-cell-transition);
    }
    &.odd {
      background-color: var(--slick-cell-odd-background-color, v.$slick-cell-odd-background-color);
      &:hover {
        background-color: var(--slick-row-mouse-hover-color, v.$slick-row-mouse-hover-color);
      }
    }
    &.odd .slick-cell {
      background: inherit;
      &.copied {
        background: var(--slick-copied-cell-bg-color-transition, v.$slick-copied-cell-bg-color-transition);
        transition: var(--slick-copied-cell-transition, v.$slick-copied-cell-transition);
      }
    }
    &.highlight {
      background: var(--slick-row-highlight-background-color, v.$slick-row-highlight-background-color);
    }
    &.highlight-animate {
      background: var(--slick-row-highlight-background-color, v.$slick-row-highlight-background-color) !important;
      animation: fade var(--slick-row-highlight-fade-animation, v.$slick-row-highlight-fade-animation);
    }
    &.slick-group-totals {
      color: var(--slick-group-totals-formatter-color, v.$slick-group-totals-formatter-color);
      background: var(--slick-group-totals-formatter-bgcolor, v.$slick-group-totals-formatter-bgcolor);
      .slick-cell {
        font-size: var(--slick-group-totals-formatter-font-size, v.$slick-group-totals-formatter-font-size);
        font-weight: var(--slick-group-totals-formatter-font-weight, v.$slick-group-totals-formatter-font-weight);
      }
    }

    &.slick-rbe-editmode.active .slick-cell,
    &.slick-rbe-editmode .slick-cell {
      background-color: var(--slick-row-based-edit-editmode-bgcolor, v.$slick-row-based-edit-editmode-bgcolor);

      &:hover {
        background-color: var(--slick-row-based-edit-editmode-hover-bgcolor, v.$slick-row-based-edit-editmode-hover-bgcolor);

        .active {
          background-color: var(
            --slick-row-based-edit-editmode-active-hover-bgcolor,
            v.$slick-row-based-edit-editmode-active-hover-bgcolor
          ) !important;
        }
      }

      .active {
        background-color: var(--slick-row-based-edit-editmode-active-bgcolor, v.$slick-row-based-edit-editmode-active-bgcolor);

        &:hover {
          background-color: var(
            --slick-row-based-edit-editmode-active-hover-bgcolor,
            v.$slick-row-based-edit-editmode-active-hover-bgcolor
          );
        }
      }
    }

    .slick-cell {
      &.invalid {
        border-color: red;
        animation-duration: 0.2s;
        animation-name: slickgrid-invalid-highlight;
      }

      &.active {
        box-shadow: var(--slick-cell-active-box-shadow, v.$slick-cell-active-box-shadow);
        z-index: var(--slick-cell-active-z-index, v.$slick-cell-active-z-index);

        // We compensate for the all-around border (now 1px at top and left too!)
        padding: var(--slick-cell-padding, v.$slick-cell-padding);

        input.dual-editor-text {
          width: calc(50% + 1px - 5px); // 1px (is 2px / 2) and 5px (is space between the 2 inputs)
          height: 100%;
          outline: 0;
          transform: translate(0, -2px);
        }
      }

      &.slick-rbe-unsaved-cell {
        background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, v.$slick-row-based-edit-unsaved-cell-bgcolor) !important;
      }
    }

    &.active-row .slick-cell {
      background-color: rgb(226, 255, 253);
    }

    &.active-row.odd .slick-cell {
      background-color: v.$slick-cell-odd-active-background-color;
    }

    &.slick-rbe-editmode .slick-cell {
      background-color: var(--slick-row-based-edit-editmode-bgcolor, v.$slick-row-based-edit-editmode-bgcolor);

      &:hover {
        background-color: var(--slick-row-based-edit-editmode-hover-bgcolor, v.$slick-row-based-edit-editmode-hover-bgcolor);

        .active {
          background-color: var(
            --slick-row-based-edit-editmode-active-hover-bgcolor,
            v.$slick-row-based-edit-editmode-active-hover-bgcolor
          ) !important;
        }
      }

      .active {
        background-color: var(--slick-row-based-edit-editmode-active-bgcolor, v.$slick-row-based-edit-editmode-active-bgcolor);

        &:hover {
          background-color: var(
            --slick-row-based-edit-editmode-active-hover-bgcolor,
            v.$slick-row-based-edit-editmode-active-hover-bgcolor
          );
        }
      }
    }
  }

  .slick-group-header-columns {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
  }

  .slick-group-header {
    width: 100%;
    overflow: hidden;
    border-left: 0px;
  }

  .slick-group-header-column.slick-state-default {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 16px;
    line-height: 16px;
    margin: 0;
    padding: 4px;
  }

  .slick-viewport,
  .slick-top-panel-scroller,
  .slick-header,
  .slick-headerrow,
  .slick-footerrow {
    position: relative;
    width: 100%;
    border: 1px solid v.$slick-grid-border-color;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-right-width: 0;
    border-bottom-width: 0;
    margin: 0;
    outline: 0;
    scrollbar-color: var(--slick-scrollbar-color, v.$slick-scrollbar-color);
  }

  .slick-top-panel-scroller {
    overflow: hidden;
  }

  .slick-pane {
    position: absolute;
    outline: 0;
    overflow: hidden;
    width: 100%;
  }

  .slick-pane-header {
    display: block;
    background-color: var(--slick-header-background-color, v.$slick-header-background-color);
    border-bottom: var(--slick-header-border-bottom, v.$slick-header-border-bottom);
  }

  .slick-preheader-container,
  .slick-header-container {
    display: flex;
  }

  .slick-pane-top {
    box-sizing: border-box;
    border-top: var(--slick-pane-top-border-top, v.$slick-pane-top-border-top);
  }

  .slick-viewport {
    height: 100%;
    overflow: auto;
    border-top: var(--slick-viewport-border-top, v.$slick-viewport-border-top);
    border-bottom: var(--slick-viewport-border-bottom, v.$slick-viewport-border-bottom);
    border-left: var(--slick-viewport-border-left, v.$slick-viewport-border-left);
    border-right: var(--slick-viewport-border-right, v.$slick-viewport-border-right);
    ::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      border: 2px solid white; /* should match background, can't be transparent */
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  .slick-header,
  .slick-headerrow,
  .slick-footerrow {
    overflow: hidden;
  }
  .slick-headerrow {
    border-top-color: transparent;
    border-top-width: 0;
  }

  .slick-top-panel,
  .slick-header-columns,
  .slick-headerrow-columns,
  .slick-footerrow-columns {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
  }

  .slick-cell,
  .slick-header-column,
  .slick-headerrow-column,
  .slick-footerrow-column {
    position: absolute;
    top: 0;
    bottom: 0;

    border-top-color: transparent;
    border-left-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
    margin: 0;
    padding: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    z-index: 1;
    white-space: nowrap;

    // do not include a bottom border for the bottom-most = leaf header cells:
    // that border will be provided by the rows container.
    &.slick-header-is-leaf {
      border-bottom-color: transparent;
      border-bottom-width: 0;
    }
  }

  .slick-header-column.slick-state-default {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 16px;
    line-height: 16px;
    margin: 0;
    padding: 4px;
    border-right: 1px solid var(--slick-grid-border-color, v.$slick-grid-border-color);
    border-left: 0px !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
    float: left;
  }

  .slick-header-column {
    padding: var(--slick-header-padding, v.$slick-header-padding);
  }

  .grid-canvas {
    position: relative;
    outline: 0;
  }

  .slick-header.slick-state-default {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .slick-column-name {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--slick-header-row-count, v.$slick-header-row-count);
  }

  .slick-cell {
    background: inherit;
    border: 1px transparent;
    box-sizing: border-box;
    border-style: var(--slick-grid-border-style, v.$slick-grid-border-style);
    display: var(--slick-cell-display, v.$slick-cell-display);
    padding: 1px 2px;
    align-items: center;
  }

  .slick-cell {
    &.highlighted {
      background: lightskyblue;
      background: rgba(0, 0, 255, 0.2);
      transition: all 0.5s;
    }

    &.flashing {
      border: 1px solid red !important;
    }

    &.editable {
      z-index: 11;
      overflow: visible;
      background: var(--slick-editor-bg-color, v.$slick-editor-bg-color);
      border-color: black;
      border-style: solid;
    }

    &:focus {
      outline: none;
    }
  }

  .slick-reorder-proxy {
    cursor: move;
    display: inline-block;
    background: var(--slick-row-move-plugin-proxy-bg-color, v.$slick-row-move-plugin-proxy-bg-color);
    opacity: var(--row-move-plugin-proxy-opacity, v.$slick-row-move-plugin-proxy-opacity);
  }

  .slick-reorder-guide {
    display: inline-block;
    height: var(--slick-row-move-plugin-guide-height, v.$slick-row-move-plugin-guide-height);
    background: var(--slick-row-move-plugin-guide-bg-color, v.$slick-row-move-plugin-guide-bg-color);
    opacity: var(--slick-row-move-plugin-guide-opacity, v.$slick-row-move-plugin-guide-opacity);
  }

  .slick-reorder-shadow-row {
    position: absolute;
    z-index: 999999;
    box-shadow: var(--slick-row-move-plugin-shadow-row-box-shadow, v.$slick-row-move-plugin-shadow-row-box-shadow);
  }
}

.scrollbar-fix {
  &::-webkit-scrollbar {
    -webkit-appearance: none;
  }
}

.slickgrid-container {
  @mixin resetSlickCell() {
    padding: var(--slick-cell-padding, v.$slick-cell-padding);
    font-size: var(--slick-font-size-base, v.$slick-font-size-base);
    td {
      font-size: var(--slick-font-size-base, v.$slick-font-size-base);
    }
    body & {
      line-height: 20px;
    }
  }

  .grid-canvas {
    .slick-cell,
    .slick-headerrow-column {
      border-top: var(--slick-cell-border-top, v.$slick-cell-border-top);
      border-bottom: var(--slick-cell-border-bottom, v.$slick-cell-border-bottom);
      border-left: var(--slick-cell-border-left, v.$slick-cell-border-left);
      border-right: var(--slick-cell-border-right, v.$slick-cell-border-right);
      box-shadow: var(--slick-cell-box-shadow, v.$slick-cell-box-shadow);
    }

    .slick-cell {
      @include resetSlickCell();

      &.even {
        background-color: var(--slick-cell-even-background-color, v.$slick-cell-even-background-color);
      }
      &.slick-rbe-unsaved-cell {
        background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, v.$slick-row-based-edit-unsaved-cell-bgcolor) !important;
      }

      a,
      a:visited,
      .slick-widget-content a,
      .slick-widget-content a:visited {
        color: var(--slick-link-color, v.$slick-link-color);
      }
      a:hover,
      .slick-widget-content a:hover {
        color: var(--slick-link-color-hover, v.$slick-link-color-hover);
        border-bottom: none;
      }
      table {
        height: 100%;
        padding: 0;
        background: none;
      }
      td {
        padding: 0;
        vertical-align: middle;
        text-align: left;
      }
      &.selected {
        background-color: var(--slick-cell-selected-color, v.$slick-cell-selected-color);
        &.editable {
          background-color: var(--slick-cell-selected-editable-color, v.$slick-cell-selected-editable-color);
        }
      }
      &.copied {
        background: var(--slick-copied-cell-bg-color-transition, v.$slick-copied-cell-bg-color-transition);
        transition: var(--slick-copied-cell-transition, v.$slick-copied-cell-transition);
      }
      select:not([multiple]).form-control {
        height: 100%;
        padding: 0;
      }
      .slick-group-title {
        display: (var(--slick-draggable-group-title-display, v.$slick-draggable-group-title-display));
        align-items: (var(--slick-draggable-group-title-align-items, v.$slick-draggable-group-title-align-items));
        gap: (var(--slick-draggable-group-title-gap, v.$slick-draggable-group-title-gap));
        height: var(--slick-draggable-group-title-height, v.$slick-draggable-group-title-height);
        line-height: var(--slick-draggable-group-title-line-height, v.$slick-draggable-group-title-line-height);
        vertical-align: var(--slick-draggable-group-title-vertical-align, v.$slick-draggable-group-title-vertical-align);
      }
      .slick-group-toggle,
      .slick-tree-load-fail {
        cursor: pointer;
        display: inline-block;
        width: 1em;
        height: 1em;
      }
      .slick-group-toggle {
        color: var(--slick-icon-group-color, v.$slick-icon-group-color);
        font-size: var(--slick-icon-group-font-size, v.$slick-icon-group-font-size);
        margin-right: var(--slick-icon-group-margin-right, v.$slick-icon-group-margin-right);

        &.expanded {
          @include svg.generateSvgStyle('slick-icon-group-expanded-svg', v.$slick-icon-group-expanded-svg-path);
        }
        &.collapsed {
          @include svg.generateSvgStyle('slick-icon-group-collapsed-svg', v.$slick-icon-group-collapsed-svg-path);
        }
        &.loading {
          @include svg.generateSvgStyle('slick-icon-loading-svg', v.$slick-icon-tree-loading-svg-path);
          animation: sg-spin var(--slick-icon-tree-loading-animation, v.$slick-icon-tree-loading-animation);
        }
        &.load-fail {
          @include svg.generateSvgStyle('slick-icon-load-fail-svg', v.$slick-icon-tree-load-fail-svg-path);
          color: var(--slick-icon-tree-load-fail-color, v.$slick-icon-tree-load-fail-color);
        }
        &.loading,
        &.load-fail,
        &.expanded,
        &.collapsed {
          background-color: currentColor;
        }
      }
      .slick-tree-load-fail {
        background-color: currentColor;
        position: absolute;
        top: var(--slick-icon-tree-load-fail-sup-top, v.$slick-icon-tree-load-fail-sup-top);
        left: var(--slick-icon-tree-load-fail-sup-left, v.$slick-icon-tree-load-fail-sup-left);
        font-size: var(--slick-icon-tree-load-fail-sup-font-size, v.$slick-icon-tree-load-fail-sup-font-size);
        right: var(--slick-icon-tree-load-fail-sup-right, v.$slick-icon-tree-load-fail-sup-right);
        color: var(--slick-icon-tree-load-fail-sup-color, v.$slick-icon-tree-load-fail-sup-color);
        @include svg.generateSvgStyle('slick-icon-load-fail-sup-svg', v.$slick-icon-tree-load-fail-sup-svg-path);
      }
      // fix alignment when slick-cell includes slickgrid icons (align bottom will in fact center the icon & text), for example Tree Data/Grouping
      .slick-group-toggle,
      .mdi,
      .sgi {
        vertical-align: var(--slick-icon-with-text-valign, v.$slick-icon-with-text-valign);
      }
    }
  }

  .slick-header {
    border-top: var(--slick-header-border-top, v.$slick-header-border-top);
    border-right: var(--slick-header-border-right, v.$slick-header-border-right);
    border-bottom: var(--slick-header-border-bottom, v.$slick-header-border-bottom);
    border-left: var(--slick-header-border-left, v.$slick-header-border-left);
    width: 100%;
    box-shadow: none !important;
  }

  .slick-headerrow {
    border-bottom: var(--slick-header-filter-row-border-bottom, v.$slick-header-filter-row-border-bottom);
    border-top: var(--slick-header-filter-row-border-top, v.$slick-header-filter-row-border-top);
    border-left: var(--slick-header-filter-row-border-left, v.$slick-header-filter-row-border-left);
    border-right: var(--slick-header-filter-row-border-right, v.$slick-header-filter-row-border-right);

    .slick-headerrow-columns {
      .slick-headerrow-column {
        border: none;
        display: inline-flex;
        align-items: center;
        padding: var(--slick-header-row-filter-padding, v.$slick-header-row-filter-padding);
        background: var(--slick-header-row-background-color, v.$slick-header-row-background-color);
        > div,
        .slick-filter {
          width: 100%;
        }
      }
      .slick-headerrow-column input,
      .slick-headerrow-column select,
      .slick-headerrow-column textarea {
        margin-right: 0;
        padding: var(--slick-header-input-padding, v.$slick-header-input-padding);
        height: var(--slick-header-input-height, v.$slick-header-input-height);
        box-sizing: border-box;
      }
    }
  }

  .slick-footerrow {
    border-top: var(--slick-grid-footer-border-top, v.$slick-grid-footer-border-top);
    background-color: var(--slick-grid-footer-bg-color, v.$slick-grid-footer-bg-color);
    .slick-footerrow-columns {
      .slick-footerrow-column {
        display: var(--slick-grid-footer-display, v.$slick-grid-footer-display);
        align-items: var(--slick-grid-footer-align-items, v.$slick-grid-footer-align-items);
        justify-content: var(--slick-grid-footer-justify-content, v.$slick-grid-footer-justify-content);
        font-size: var(--slick-grid-footer-font-size, v.$slick-grid-footer-font-size);
        font-style: var(--slick-grid-footer-font-style, v.$slick-grid-footer-font-style);
        font-weight: var(--slick-grid-footer-font-weight, v.$slick-grid-footer-font-weight);
        padding: var(--slick-grid-footer-cell-padding, v.$slick-grid-footer-cell-padding);
        border-left: var(--slick-grid-footer-cell-border-left, v.$slick-grid-footer-cell-border-left);
      }
    }
  }
  .slick-header-columns {
    background: var(--slick-grid-header-background, v.$slick-grid-header-background);
    background-color: var(--slick-header-background-color, v.$slick-header-background-color);

    [id$='checkbox_selector'] {
      justify-content: center;
      display: flex;
    }

    .slick-header-sortable .slick-column-name {
      margin-left: 0;
    }

    .slick-header-column {
      height: var(--slick-header-column-height, v.$slick-header-column-height);
      line-height: var(--slick-font-size-base, v.$slick-font-size-base);
      margin: 0;
      border-top: var(--slick-header-column-border-top, v.$slick-header-column-border-top);
      border-right: var(--slick-header-column-border-right, v.$slick-header-column-border-right);
      border-bottom: var(--slick-header-column-border-bottom, v.$slick-header-column-border-bottom);
      border-left: var(--slick-header-column-border-left, v.$slick-header-column-border-left);
      white-space: normal;
      &.slick-state-default {
        @include resetSlickCell();
      }
      .slick-column-name {
        margin-right: var(--slick-header-column-name-margin-right, v.$slick-header-column-name-margin-right);
      }

      @mixin ResetColumns() {
        /* like TH  */
        & {
          background: var(--slick-header-background-color, v.$slick-header-background-color);
          color: var(--slick-header-text-color, v.$slick-header-text-color);
          font-family: var(--slick-font-family, v.$slick-font-family);
          font-size: var(--slick-header-font-size, v.$slick-header-font-size);
          font-weight: var(--slick-header-font-weight, v.$slick-header-font-weight);
        }
        a,
        a:visited {
          color: var(--slick-text-color, v.$slick-text-color);
        }
        a:hover {
          color: var(--slick-hover-header-color, v.$slick-hover-header-color);
        }
      }

      @include ResetColumns();
      &.slick-state-default {
        @include ResetColumns();
      }

      &.slick-header-column-sorted {
        font-style: normal;
        color: var(--slick-sorting-header-color, v.$slick-sorting-header-color);
      }
      &:hover {
        color: var(--slick-hover-header-color, v.$slick-hover-header-color);
      }

      .slick-sort-indicator,
      .slick-sort-indicator-numbered {
        display: inline-block;
        position: absolute;
        color: var(--slick-icon-sort-color, v.$slick-icon-sort-color);
      }

      .slick-sort-indicator {
        height: 1em;
        width: 1em;
        left: auto;
        font-size: var(--slick-icon-sort-font-size, v.$slick-icon-sort-font-size);
        right: var(--slick-icon-sort-position-right, v.$slick-icon-sort-position-right);
        top: var(--slick-icon-sort-position-top, v.$slick-icon-sort-position-top);
      }
      .slick-sort-indicator-numbered {
        font-family: var(--slick-font-family, v.$slick-font-family);
        font-size: var(--slick-sort-indicator-number-font-size, v.$slick-sort-indicator-number-font-size);
        width: var(--slick-sort-indicator-number-width, v.$slick-sort-indicator-number-width);
        left: var(--slick-sort-indicator-number-left, v.$slick-sort-indicator-number-left);
        right: var(--slick-sort-indicator-number-right, v.$slick-sort-indicator-number-right);
        top: var(--slick-sort-indicator-number-top, v.$slick-sort-indicator-number-top);
      }

      // when sorting is possible and there's not yet a sort applied on the column
      // we could display the sort ascending icon (with an opacity) as a hint */
      &.slick-header-sortable.slick-state-hover:not(.slick-header-column-sorted) {
        .slick-sort-indicator {
          opacity: var(--slick-sort-indicator-hint-opacity, v.$slick-sort-indicator-hint-opacity);
          @include svg.generateSvgStyle('slick-icon-sort-asc-icon-svg', v.$slick-icon-sort-asc-icon-svg-path);
        }
      }
      .slick-sort-indicator-asc {
        @include svg.generateSvgStyle('slick-icon-sort-asc-icon-svg', v.$slick-icon-sort-asc-icon-svg-path);
      }
      .slick-sort-indicator-desc {
        @include svg.generateSvgStyle('slick-icon-sort-desc-icon-svg', v.$slick-icon-sort-desc-icon-svg-path);
      }
      .slick-sort-indicator-asc,
      .slick-sort-indicator-desc {
        opacity: 1;
        background-color: currentColor;
      }

      .slick-resizable-handle {
        position: absolute;
        font-size: 0.1px;
        display: block;
        top: 0;
        height: 100%;
        width: 6px;
        right: 0;
        z-index: 4;

        &:hover {
          cursor: var(--slick-header-resizable-cursor, v.$slick-header-resizable-cursor);
          border-bottom: var(--slick-header-resizable-hover-border-bottom, v.$slick-header-resizable-hover-border-bottom);
          border-left: var(--slick-header-resizable-hover-border-left, v.$slick-header-resizable-hover-border-left);
          border-right: var(--slick-header-resizable-hover-border-right, v.$slick-header-resizable-hover-border-right);
          border-top: var(--slick-header-resizable-hover-border-top, v.$slick-header-resizable-hover-border-top);
          border-radius: var(--slick-header-resizable-hover-border-radius, v.$slick-header-resizable-hover-border-radius);
          width: var(--slick-header-resizable-hover-width, v.$slick-header-resizable-hover-width);
          right: var(--slick-header-resizable-hover-right, v.$slick-header-resizable-hover-right);
          height: var(--slick-header-resizable-hover-height, v.$slick-header-resizable-hover-height);
          top: var(--slick-header-resizable-hover-top, v.$slick-header-resizable-hover-top);
          opacity: var(--slick-header-resizable-hover-opacity, v.$slick-header-resizable-hover-opacity);
        }
      }
      &.unorderable {
        background-color: var(--slick-grid-header-unorderable-bg-color, v.$slick-grid-header-unorderable-bg-color);
      }
    }
  }

  /** Header Grouping **/
  .slick-preheader-panel.slick-state-default,
  .slick-topheader-panel.slick-state-default {
    border-bottom: var(--slick-preheader-border-bottom, v.$slick-preheader-border-bottom);

    .slick-header-columns {
      border-top: var(--slick-preheader-border-top, v.$slick-preheader-border-top);

      .slick-header-column {
        height: var(--slick-preheader-height, v.$slick-preheader-height);
        border-left: var(--slick-preheader-border-left, v.$slick-preheader-border-left);
        border-right: var(--slick-preheader-border-right, v.$slick-preheader-border-right);
        font-size: var(--slick-preheader-font-size, v.$slick-preheader-font-size);
        justify-content: var(--slick-preheader-grouped-title-justify, v.$slick-preheader-grouped-title-justify);
        display: var(--slick-preheader-grouped-title-display, v.$slick-preheader-grouped-title-display);
      }
      .slick-header-column:first-child {
        border-left: var(--slick-preheader-border-left-first-element, v.$slick-preheader-border-left-first-element);
      }
      .slick-header-column:last-child {
        border-right: var(--slick-preheader-border-right-last-element, v.$slick-preheader-border-right-last-element);
      }
    }
  }

  /** Frozen/Pinned styling */
  .slick-pane-left.frozen {
    border-right: var(--slick-frozen-border-right, v.$slick-frozen-border-right);
  }

  .slick-pane-bottom {
    border-top: var(--slick-frozen-border-bottom, v.$slick-frozen-border-bottom);
  }
  .slick-viewport-bottom.slick-viewport-right {
    overflow-y: var(--slick-frozen-overflow-right, v.$slick-frozen-overflow-right) !important;
  }
  .input-group {
    display: flex;

    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
      margin-left: 0;
      &.slick-slider-horizontal {
        margin-left: 10px;
      }
    }

    .input-group-append,
    .input-group-prepend {
      display: inline-flex;
      width: auto;
    }

    .input-group-addon {
      input {
        flex: 1 1 auto;
        width: 1%;
      }
      .input-group-text {
        height: 100%;
      }
      &.input-group-append {
        .input-group-text {
          margin-left: -1px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      &.input-group-prepend {
        .input-group-text {
          margin-right: -1px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }
}