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

// ----------------------------------------------
// Column Picker & Grid Menu Controls
// ----------------------------------------------

/** make sure the hidden class exist, it was removed in BS4 */
li.hidden {
  display: none !important;
}

.slick-grid-menu,
.slick-column-picker {
  li {
    list-style: none;
    background: none;
  }
}

.slick-column-picker {
  cursor: default;
  list-style-type: none;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  resize: both;
  font-family: var(--slick-font-family, v.$slick-font-family);
  background-color: var(--slick-column-picker-background-color, v.$slick-column-picker-background-color);
  border: var(--slick-column-picker-border, v.$slick-column-picker-border);
  border-radius: var(--slick-column-picker-border-radius, v.$slick-column-picker-border-radius);
  min-width: var(--slick-column-picker-min-width, v.$slick-column-picker-min-width);
  padding: var(--slick-column-picker-padding, v.$slick-column-picker-padding);
  scrollbar-color: var(--slick-scrollbar-color, v.$slick-scrollbar-color);
  box-shadow: var(--slick-column-picker-box-shadow, v.$slick-column-picker-box-shadow);
  z-index: var(--slick-column-picker-z-index, v.$slick-column-picker-z-index);
  @-moz-document url-prefix() {
    /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
    padding: var(--slick-column-picker-padding-firefox, v.$slick-column-picker-padding-firefox);
  }

  .close {
    float: right;
    position: absolute;
    color: var(--slick-column-picker-close-btn-color, v.$slick-column-picker-close-btn-color);
    cursor: var(--slick-column-picker-close-btn-cursor, v.$slick-column-picker-close-btn-cursor);
    width: var(--slick-column-picker-close-btn-width, v.$slick-column-picker-close-btn-width);
    height: var(--slick-column-picker-close-btn-height, v.$slick-column-picker-close-btn-height);
    margin: var(--slick-column-picker-close-btn-margin, v.$slick-column-picker-close-btn-margin);
    opacity: var(--slick-column-picker-close-btn-opacity, v.$slick-column-picker-close-btn-opacity);
    padding: var(--slick-column-picker-close-btn-padding, v.$slick-column-picker-close-btn-padding);
    font-family: var(--slick-column-picker-close-btn-font-family, v.$slick-column-picker-close-btn-font-family);
    font-size: var(--slick-column-picker-close-btn-font-size, v.$slick-column-picker-close-btn-font-size);
    background-color: var(--slick-column-picker-close-btn-bg-color, v.$slick-column-picker-close-btn-bg-color);
    border: var(--slick-column-picker-close-btn-border, v.$slick-column-picker-close-btn-border);
    right: var(--slick-column-picker-close-btn-position-right, v.$slick-column-picker-close-btn-position-right);
    top: var(--slick-column-picker-close-btn-position-top, v.$slick-column-picker-close-btn-position-top);

    &:hover {
      opacity: var(--slick-column-picker-close-btn-opacity-hover, v.$slick-column-picker-close-btn-opacity-hover);
    }
  }

  li {
    a {
      display: block;
      padding: 4px;
      font-weight: bold;
      &:hover {
        background-color: var(--slick-column-picker-link-background-color, v.$slick-column-picker-link-background-color);
      }
    }
    label {
      font-weight: var(--slick-column-picker-label-font-weight, v.$slick-column-picker-label-font-weight);
      input {
        margin: var(--slick-column-picker-label-margin, v.$slick-column-picker-label-margin);
      }
    }
  }
  div.title {
    font-size: var(--slick-column-picker-title-font-size, v.$slick-column-picker-title-font-size);
    font-weight: var(--slick-column-picker-title-font-weight, v.$slick-column-picker-title-font-weight);
    width: var(--slick-column-picker-title-width, v.$slick-column-picker-title-width);
    border-bottom: var(--slick-column-picker-title-border-bottom, v.$slick-column-picker-title-border-bottom);
    margin-bottom: var(--slick-column-picker-title-margin-bottom, v.$slick-column-picker-title-margin-bottom);
  }
}
.slick-column-picker,
.slick-grid-menu {
  scrollbar-color: var(--slick-scrollbar-color, v.$slick-scrollbar-color);
  .slick-menu-title {
    color: var(--slick-menu-title-color, v.$slick-menu-title-color);
    font-size: var(--slick-menu-title-font-size, v.$slick-menu-title-font-size);
    font-weight: var(--slick-menu-title-font-weight, v.$slick-menu-title-font-weight);
    border-bottom: var(--slick-column-picker-title-border-bottom, v.$slick-column-picker-title-border-bottom);
    margin-bottom: var(--slick-menu-title-margin-bottom, v.$slick-menu-title-margin-bottom);
  }
}

.slick-column-picker-list,
.slick-grid-menu-list {
  white-space: nowrap;
  @-moz-document url-prefix() {
    /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
    width: var(--slick-column-picker-list-width-firefox, v.$slick-column-picker-list-width-firefox);
  }

  li {
    display: flex;
    align-items: center;
    outline: none;
    width: 100%;
    color: var(--slick-menu-color, v.$slick-menu-color);
    border: var(--slick-column-picker-item-border, v.$slick-column-picker-item-border);
    border-radius: var(--slick-column-picker-item-border-radius, v.$slick-column-picker-item-border-radius);
    font-size: var(--slick-column-picker-item-font-size, v.$slick-column-picker-item-font-size);
    height: var(--slick-column-picker-item-height, v.$slick-column-picker-item-height);
    line-height: var(--slick-column-picker-item-line-height, v.$slick-column-picker-item-line-height);
    list-style: none outside none;
    margin: 0;
    padding: var(--slick-column-picker-item-padding, v.$slick-column-picker-item-padding);
    &:hover,
    &:focus {
      border: var(--slick-column-picker-item-hover-border, v.$slick-column-picker-item-hover-border);
    }
    &:hover {
      background-color: var(--slick-column-picker-item-hover-color, v.$slick-column-picker-item-hover-color);
    }
    label {
      cursor: pointer;
      height: 100%;
      width: 100%;
      margin-bottom: 0px;
    }
  }

  hr {
    margin: 6px 0;
    border: 0;
    background-color: var(--slick-column-picker-hr-bg-color, v.$slick-column-picker-hr-bg-color);
    border-top: var(--slick-column-picker-hr-divider-border, v.$slick-column-picker-hr-divider-border);
    width: var(--slick-column-picker-divider-width, v.$slick-column-picker-divider-width);
    margin-left: auto;
    margin-right: auto;
    width: auto;
  }

  label {
    line-height: var(--slick-column-picker-icon-container-line-height, v.$slick-column-picker-icon-container-line-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &.disabled {
    cursor: default;
  }
  input[type='checkbox'] {
    // hide original input checkbox since we use an SVG on top of it
    opacity: 0;
    width: 0;
    margin-left: 0;
  }

  .icon-checkbox-container {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--slick-column-picker-icon-container-bg-color, v.$slick-column-picker-icon-container-bg-color);
    height: var(--slick-column-picker-icon-container-size, v.$slick-column-picker-icon-container-size);
    width: var(--slick-column-picker-icon-container-size, v.$slick-column-picker-icon-container-size);
    border: var(--slick-column-picker-icon-border, v.$slick-column-picker-icon-border);
    border-radius: var(--slick-column-picker-icon-border-radius, v.$slick-column-picker-icon-border-radius);

    div.sgi {
      opacity: 1;
      font-size: var(--slick-column-picker-icon-font-size, v.$slick-column-picker-icon-font-size);
      color: var(--slick-column-picker-icon-color, v.$slick-column-picker-icon-color);

      &.sgi-icon-picker-check {
        @include svg.generateSvgStyle('slick-column-picker-icon-checked-svg', v.$slick-column-picker-icon-checked-svg-path);
      }
      &.sgi-icon-picker-uncheck {
        @include svg.generateSvgStyle('slick-column-picker-icon-unchecked-svg', v.$slick-column-picker-icon-unchecked-svg-path);
        opacity: var(--slick-column-picker-unchecked-opacity, v.$slick-column-picker-unchecked-opacity); /* unchecked icon */

        // since we use the div container with a border, we don't actually need an icon for unchecked
        // BUT since we want to keep the same size, we can simply hide the mask to keep the same size
        visibility: var(--slick-column-picker-icon-unchecked-color-visibility, v.$slick-column-picker-icon-unchecked-color-visibility);
        &:hover {
          opacity: var(--slick-column-picker-opacity-hover, v.$slick-column-picker-opacity-hover);
        }
      }
    }
    & + span.checkbox-label {
      display: inline-flex;
      align-items: center;
      flex-grow: 1;
      padding-left: var(--slick-column-picker-label-text-padding-left, v.$slick-column-picker-label-text-padding-left);
    }
  }
}

.slick-grid-menu {
  .slick-menu-command-list {
    margin-bottom: var(--slick-column-picker-list-margin-bottom, v.$slick-column-picker-list-margin-bottom);
    @-moz-document url-prefix() {
      /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
      width: var(--slick-column-picker-list-width-firefox, v.$slick-column-picker-list-width-firefox);
    }
  }

  li {
    overflow: hidden;
    text-overflow: ellipsis;
    @-moz-document url-prefix() {
      margin-right: var(--slick-grid-menu-item-margin-right, v.$slick-grid-menu-item-margin-right);
      width: 100%;
    }

    a {
      display: block;
      padding: 4px;
      font-weight: bold;
      &:hover {
        background-color: var(--slick-grid-menu-link-background-color, v.$slick-grid-menu-link-background-color);
      }
    }
    label {
      font-weight: var(--slick-grid-menu-label-font-weight, v.$slick-grid-menu-label-font-weight);
      input {
        margin: var(--slick-grid-menu-label-margin, v.$slick-grid-menu-label-margin);
      }
    }
  }
  input {
    margin: 4px;
  }
}

.slick-grid-menu-button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  z-index: 2;
  color: var(--slick-grid-menu-icon-btn-color, v.$slick-grid-menu-icon-btn-color);
  padding: var(--slick-grid-menu-button-padding, v.$slick-grid-menu-button-padding);
  margin-top: var(--slick-grid-menu-icon-top-margin, v.$slick-grid-menu-icon-top-margin);

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

.slick-grid-menu-list {
  li {
    width: auto;
  }

  hr {
    width: var(--slick-grid-menu-divider-width, v.$slick-grid-menu-divider-width);
  }
}

// ----------------------------------------------
// Menu Plugins
// ----------------------------------------------

.slick-cell-menu,
.slick-context-menu,
.slick-grid-menu,
.slick-header-menu {
  box-shadow: var(--slick-menu-box-shadow, v.$slick-menu-box-shadow);
  &.slick-submenu {
    box-shadow: var(--slick-submenu-box-shadow, v.$slick-submenu-box-shadow);
    min-width: var(--slick-submenu-min-width, v.$slick-submenu-min-width);
  }

  .slick-menu-option-list,
  .slick-menu-command-list {
    .slick-command-header,
    .slick-option-header {
      display: var(--slick-menu-title-container-display, v.$slick-menu-title-container-display);
      align-items: var(--slick-menu-title-container-align-items, v.$slick-menu-title-container-align-items);
      justify-content: var(--slick-menu-title-container-justify-content, v.$slick-menu-title-container-justify-content);
    }

    .slick-command-header.with-title,
    .slick-option-header.with-title {
      border-bottom: var(--slick-menu-title-border-bottom, v.$slick-menu-title-border-bottom);
      margin-bottom: var(--slick-menu-title-margin-bottom, v.$slick-menu-title-margin-bottom);
      .slick-menu-title {
        border-bottom: 0;
        margin-bottom: 0;
      }
    }
    .slick-command-header.with-close.no-title {
      margin: var(--slick-menu-close-btn-margin-without-title, v.$slick-menu-close-btn-margin-without-title);
    }

    .close {
      cursor: pointer;
      float: right;
      background-color: var(--slick-menu-close-btn-bg-color, v.$slick-menu-close-btn-bg-color);
      border: var(--slick-menu-close-btn-border, v.$slick-menu-close-btn-border);
      color: var(--slick-menu-close-btn-color, v.$slick-menu-close-btn-color);
      font-family: var(--slick-menu-close-btn-font-family, v.$slick-menu-close-btn-font-family);
      font-size: var(--slick-menu-close-btn-font-size, v.$slick-menu-close-btn-font-size);
      height: var(--slick-menu-close-btn-height, v.$slick-menu-close-btn-height);
      line-height: var(--slick-menu-close-btn-line-height, v.$slick-menu-close-btn-line-height);
      margin: var(--slick-menu-close-btn-margin, v.$slick-menu-close-btn-margin);
      padding: var(--slick-menu-close-btn-padding, v.$slick-menu-close-btn-padding);
      width: var(--slick-menu-close-btn-width, v.$slick-menu-close-btn-width);
      opacity: var(--slick-menu-close-btn-opacity, v.$slick-menu-close-btn-opacity);
      &:hover {
        opacity: var(--slick-menu-close-btn-opacity-hover, v.$slick-menu-close-btn-opacity-hover);
      }
    }
  }

  .slick-menu-title {
    font-size: var(--slick-menu-title-font-size, v.$slick-menu-title-font-size);
    font-weight: var(--slick-menu-title-font-weight, v.$slick-menu-title-font-weight);
    margin-right: var(--cell-menu-title-margin-right, v.$slick-menu-title-margin-right);
    width: var(--slick-menu-title-width, v.$slick-menu-title-width);
  }

  .slick-menu-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
    outline: none;
    border: var(--slick-menu-item-border, v.$slick-menu-item-border);
    border-radius: var(--slick-menu-item-border-radius, v.$slick-menu-item-border-radius);
    font-size: var(--slick-menu-item-font-size, v.$slick-menu-item-font-size);
    height: var(--slick-menu-item-height, v.$slick-menu-item-height);
    line-height: var(--slick-menu-line-height, v.$slick-menu-line-height);
    list-style: none outside none;
    padding: var(--slick-menu-item-padding, v.$slick-menu-item-padding);
    width: var(--slick-menu-item-width, v.$slick-menu-item-width);
    white-space: var(--slick-menu-item-white-space, v.$slick-menu-item-white-space);

    &:hover,
    &:focus {
      border: var(--slick-menu-item-hover-border, v.$slick-menu-item-hover-border);
    }
    &:hover {
      background-color: var(--slick-menu-item-hover-color, v.$slick-menu-item-hover-color);
    }

    &.slick-menu-item-divider {
      cursor: default;
      border: none;
      overflow: hidden;
      padding: 0;
      height: var(--slick-menu-divider-height, v.$slick-menu-divider-height);
      margin: var(--slick-menu-divider-margin, v.$slick-menu-divider-margin);
      background-color: var(--slick-menu-divider-color, v.$slick-menu-divider-color);
      width: var(--slick-menu-divider-width, v.$slick-menu-divider-width);
      margin-left: auto;
      margin-right: auto;

      &:hover {
        border: none;
        background-color: var(--slick-menu-divider-color, v.$slick-menu-divider-color);
      }
    }

    .slick-menu-icon {
      text-align: center;
      font-size: var(--slick-menu-icon-font-size, v.$slick-menu-icon-font-size);
      background-position: center center;
      background-repeat: no-repeat;
      display: inline-block;
      line-height: var(--slick-menu-icon-line-height, v.$slick-menu-icon-line-height);
      margin-right: var(--slick-menu-icon-margin-right, v.$slick-menu-icon-margin-right);
      vertical-align: middle;
      min-width: var(--slick-menu-icon-min-width, v.$slick-menu-icon-min-width);
    }

    .slick-menu-content {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
    }
    .sub-item-chevron {
      float: right;
      min-width: var(--slick-menu-icon-min-width, v.$slick-menu-icon-min-width);
    }

    /* Disabled item */
    &.slick-menu-item-disabled {
      border-color: transparent !important;
      background: inherit !important;
      cursor: inherit;
      color: var(--slick-menu-item-disabled-color, v.$slick-menu-item-disabled-color);
      .slick-menu-icon,
      .slick-menu-content {
        color: var(--slick-menu-item-disabled-color, v.$slick-menu-item-disabled-color);
      }
    }
    &.slick-menu-item-hidden {
      display: none;
    }
  }

  .slick-menu-option-list {
    margin-bottom: var(--slick-menu-option-list-margin-bottom, v.$slick-menu-option-list-margin-bottom);
  }
}

.slick-cell-menu,
.slick-context-menu,
.slick-grid-menu,
.slick-header-menu {
  list-style-type: none;
  position: absolute;
  font-family: var(--slick-font-family, v.$slick-font-family);
  background: var(--slick-menu-bg-color, v.$slick-menu-bg-color);
  color: var(--slick-menu-color, v.$slick-menu-color);
  border: var(--slick-menu-border, v.$slick-menu-border);
  border-radius: var(--slick-menu-border-radius, v.$slick-menu-border-radius);
  min-width: var(--slick-menu-min-width, v.$slick-menu-min-width);
  padding: var(--slick-menu-padding, v.$slick-menu-padding);
  z-index: var(--slick-header-menu-z-index, v.$slick-header-menu-z-index);
  cursor: default;
  display: inline-block;
  overflow-x: hidden;
  overflow-y: auto;
  resize: both;
  @-moz-document url-prefix() {
    /* add right padding to avoid scrollback showing over text, that is for Firefox since WebKit is ok */
    padding: var(--slick-menu-padding-firefox, v.$slick-menu-padding-firefox);
  }

  /* make sure that other UI frameworks aren't overriding our properties (Bulma was one of them affecting this) */
  &.dropdown,
  &.dropup {
    display: inline-block;
    position: absolute;
  }
}

// ----------------------------------------------
// Slick Tooltip Component
// ----------------------------------------------

.slick-custom-tooltip {
  position: absolute;
  background-color: var(--slick-tooltip-background-color, v.$slick-tooltip-background-color);
  border: var(--slick-tooltip-border, v.$slick-tooltip-border);
  border-radius: var(--slick-tooltip-border-radius, v.$slick-tooltip-border-radius);
  padding: var(--slick-tooltip-padding, v.$slick-tooltip-padding);
  font-size: var(--slick-tooltip-font-size, v.$slick-tooltip-font-size);
  height: var(--slick-tooltip-height, v.$slick-tooltip-height);
  width: var(--slick-tooltip-width, v.$slick-tooltip-width);
  z-index: var(--slick-tooltip-z-index, v.$slick-tooltip-z-index);

  .tooltip-body {
    color: var(--slick-tooltip-color, v.$slick-tooltip-color);
    overflow: var(--slick-tooltip-overflow, v.$slick-tooltip-overflow);
    text-overflow: var(--slick-tooltip-text-overflow, v.$slick-tooltip-text-overflow);
    white-space: var(--slick-tooltip-white-space, v.$slick-tooltip-white-space);
  }
}

// ---------------------------------------------------------
// Header Button Plugin - add button in header with command
// ---------------------------------------------------------

.slick-column-name,
.slick-sort-indicator {
  /**
   * This makes all "float:right" elements after it spill over to the next line
   * display way below the lower boundary of the column thus hiding them.
   */
  float: left;
  margin-bottom: 100px;
}

.slick-header-button {
  /**
  * This makes all "float:right" elements after it that spill over to the next line
  * display way below the lower boundary of the column thus hiding them.
  */
  display: inline;
  float: var(--slick-header-button-float, v.$slick-header-button-float);
  vertical-align: var(--slick-header-button-vertical-align, v.$slick-header-button-vertical-align);
  margin: var(--slick-header-button-margin, v.$slick-header-button-margin);
  height: var(--slick-header-button-height, v.$slick-header-button-height);
  width: var(--slick-header-button-width, v.$slick-header-button-width);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  visibility: visible;
  &:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--slick-focus-outline-color, v.$slick-focus-outline-color);
  }
}

.slick-header-button-hidden {
  visibility: hidden;
  margin-right: var(--slick-header-button-hidden-margin-right, v.$slick-header-button-hidden-margin-right);
  transition: var(--slick-header-button-hidden-transition, v.$slick-header-button-hidden-transition);
}

.slick-header-column:hover > .slick-header-button {
  visibility: visible;
}

// ----------------------------------------------
// Header Button Plugin
// ----------------------------------------------

.slick-header-menu-button {
  cursor: pointer;
  position: absolute;
  border: var(--slick-header-menu-button-border, v.$slick-header-menu-button-border);
  border-width: var(--slick-header-menu-button-border-width, v.$slick-header-menu-button-border-width);
  padding: var(--slick-header-menu-button-padding, v.$slick-header-menu-button-padding);

  // The next few items are already defined in the slick-headermenu file and it should stay that way, *unless* you also replace the button image included there.
  bottom: 0;
  top: 0;
  right: var(--slick-header-menu-button-margin-right, v.$slick-header-menu-button-margin-right);
  height: var(--slick-header-menu-button-icon-size, v.$slick-header-menu-button-icon-size);
  width: var(--slick-header-menu-button-icon-size, v.$slick-header-menu-button-icon-size);

  &:focus-visible {
    outline: 0;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px var(--slick-focus-outline-color, v.$slick-focus-outline-color);
  }

  .slick-header-menu-icon {
    color: var(--slick-header-menu-button-icon-color, v.$slick-header-menu-button-icon-color);
    font-size: var(--slick-header-menu-button-icon-font-size, v.$slick-header-menu-button-icon-font-size);
    @include svg.generateSvgStyle('slick-header-menu-button-icon-svg', v.$slick-header-menu-button-icon-svg-path);
  }
}

.slick-header-column {
  // if user when to show header menu only while hovering, then the display var will be "none" else it could be "inline-block"
  .slick-header-menu-button {
    display: var(--slick-header-menu-display, v.$slick-header-menu-display);
  }
  &:hover {
    .slick-header-menu-button {
      display: inline-block;
    }
  }
}

// ----------------------------------------------
// Row Move Manager Plugin
// ----------------------------------------------
.slick-cell.cell-reorder {
  text-align: center;

  .slick-row-move-column {
    font-size: var(--slick-row-move-plugin-icon-font-size, v.$slick-row-move-plugin-icon-font-size);
    color: var(--slick-row-move-plugin-icon-color, v.$slick-row-move-plugin-icon-color);
    cursor: var(--slick-row-move-plugin-cursor, v.$slick-row-move-plugin-cursor);
    @include svg.generateSvgStyle('slick-row-move-plugin-icon-svg', v.$slick-row-move-plugin-icon-svg-path);
  }
}

// ----------------------------------------------
// Checkbox Selector Plugin
// ----------------------------------------------

.slick-headerrow-column.checkbox-header {
  display: inline-flex;
  justify-content: center;
}

.slick-column-name,
.slick-headerrow-column.checkbox-header,
.slick-cell-checkboxsel {
  text-align: center;

  label {
    line-height: var(--slick-checkbox-icon-container-line-height, v.$slick-checkbox-icon-container-line-height);
  }
  #filter-checkbox-selectall-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    .icon-checkbox-container:focus {
      outline: 0;
      border-color: var(--slick-form-control-focus-border-color, v.$slick-form-control-focus-border-color);
      box-shadow: var(--slick-form-control-focus-box-shadow, v.$slick-form-control-focus-box-shadow);
    }
  }

  &.disabled {
    cursor: default;
  }
  input[type='checkbox'] {
    // hide original input checkbox since we use an SVG on top of it
    opacity: 0;
    width: 0;
    margin-left: 0;
  }

  .icon-checkbox-container {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--slick-checkbox-icon-container-bg-color, v.$slick-checkbox-icon-container-bg-color);
    height: var(--slick-checkbox-icon-container-size, v.$slick-checkbox-icon-container-size);
    width: var(--slick-checkbox-icon-container-size, v.$slick-checkbox-icon-container-size);
    border: var(--slick-checkbox-icon-border, v.$slick-checkbox-icon-border);
    border-radius: var(--slick-checkbox-icon-border-radius, v.$slick-checkbox-icon-border-radius);

    div.sgi {
      opacity: 1;
      font-size: var(--slick-checkbox-icon-font-size, v.$slick-checkbox-icon-font-size);
      color: var(--slick-checkbox-icon-color, v.$slick-checkbox-icon-color);

      &.sgi-icon-check {
        @include svg.generateSvgStyle('slick-checkbox-icon-checked-svg', v.$slick-checkbox-icon-checked-svg-path);
      }
      &.sgi-icon-partial-check {
        @include svg.generateSvgStyle('slick-checkbox-icon-partial-checked-svg', v.$slick-checkbox-icon-partial-checked-svg-path);
      }
      &.sgi-icon-uncheck {
        @include svg.generateSvgStyle('slick-checkbox-icon-unchecked-svg', v.$slick-checkbox-icon-unchecked-svg-path);
        opacity: var(--slick-checkbox-unchecked-opacity, v.$slick-checkbox-unchecked-opacity); /* unchecked icon */

        // since we use the div container with a border, we don't actually need an icon for unchecked
        // BUT since we want to keep the same size, we can simply hide the mask to keep the same size
        visibility: var(--slick-checkbox-icon-unchecked-color-visibility, v.$slick-checkbox-icon-unchecked-color-visibility);
        &:hover {
          opacity: var(--slick-checkbox-opacity-hover, v.$slick-checkbox-opacity-hover);
        }
      }
    }
  }
}

.slick-header-column.header-checkbox-selectall .slick-column-name {
  text-align: center;
  margin-right: 0;
}

.slick-group {
  .slick-cell-checkboxsel {
    text-align: left;
  }
}

// ----------------------------------------------
// Multi-Select Filter
// ----------------------------------------------

.ms-choice {
  font-size: var(--slick-header-font-size, v.$slick-header-font-size);
  outline: 0;

  span {
    font-size: var(--slick-multiselect-input-filter-font-size, v.$slick-multiselect-input-filter-font-size);
    font-family: var(--slick-multiselect-input-filter-font-family, v.$slick-multiselect-input-filter-font-family);
  }
  .placeholder {
    background-color: var(--slick-multiselect-placeholder-bg-color, v.$slick-multiselect-placeholder-bg-color);
    color: var(--slick-multiselect-placeholder-color, v.$slick-multiselect-placeholder-color) !important;
    font-family: var(--slick-multiselect-placeholder-font-family, v.$slick-multiselect-placeholder-font-family);
    font-size: var(--slick-header-font-size, v.$slick-header-font-size);
  }
  &:focus {
    border-color: var(--slick-multiselect-input-focus-border-color, v.$slick-multiselect-input-focus-border-color);
  }
}
.ms-filter {
  &.search-filter {
    width: 100% !important;
  }
  .placeholder {
    cursor: pointer;
  }
}
.ms-parent-open button {
  outline: 0;
  border-color: var(--slick-multiselect-input-focus-border-color, v.$slick-multiselect-input-focus-border-color);
  box-shadow: var(--slick-multiselect-input-focus-box-shadow, v.$slick-multiselect-input-focus-box-shadow);
}
.ms-drop {
  border: var(--slick-multiselect-dropdown-border, v.$slick-multiselect-dropdown-border);
  z-index: var(--slick-multiselect-dropdown-z-index, v.$slick-multiselect-dropdown-z-index);

  li {
    margin: 0;
    height: var(--slick-multiselect-item-height, v.$slick-multiselect-item-height);
    line-height: var(--slick-multiselect-item-line-height, v.$slick-multiselect-item-line-height);
    padding: var(--slick-multiselect-item-padding, v.$slick-multiselect-item-padding);
    border: var(--slick-multiselect-item-border, v.$slick-multiselect-item-border);
    width: 100%;
    &:hover {
      border: var(--slick-multiselect-item-hover-border, v.$slick-multiselect-item-hover-border);
      background-color: var(--slick-multiselect-checkbox-hover-bg-color, v.$slick-multiselect-checkbox-hover-bg-color);
    }
    &.highlighted {
      border: var(--slick-multiselect-option-highlight-border, v.$slick-multiselect-option-highlight-border);
      background-color: var(--slick-multiselect-option-highlight-bg-color, v.$slick-multiselect-option-highlight-bg-color);
    }
  }

  label {
    span {
      cursor: pointer;
      margin-left: var(--slick-multiselect-checkbox-margin-left, v.$slick-multiselect-checkbox-margin-left);
    }
  }
  .ms-select-all {
    display: flex;
    align-items: center;
    border-bottom: var(--slick-multiselect-select-all-border-bottom, v.$slick-multiselect-select-all-border-bottom);
    padding: var(--slick-multiselect-select-all-padding, v.$slick-multiselect-select-all-padding);
    line-height: var(--slick-multiselect-select-all-line-height, v.$slick-multiselect-select-all-line-height);
    &:hover {
      background-color: var(--slick-multiselect-select-all-text-hover-color, v.$slick-multiselect-select-all-text-hover-color);
    }
    &.highlighted {
      background-color: transparent;
    }
    &.highlighted label {
      border: var(--slick-multiselect-option-highlight-border, v.$slick-multiselect-option-highlight-border);
      background-color: var(--slick-multiselect-option-highlight-bg-color, v.$slick-multiselect-option-highlight-bg-color);
    }

    label {
      display: inline-flex;
      font-weight: normal;
      padding: var(--slick-multiselect-select-all-label-padding, v.$slick-multiselect-select-all-label-padding);
      border: var(--slick-multiselect-select-all-label-border, v.$slick-multiselect-select-all-label-border);
      color: var(--slick-multiselect-select-all-text-color, v.$slick-multiselect-select-all-text-color);
      &:hover {
        cursor: pointer;
        border: var(--slick-multiselect-select-all-label-hover-border, v.$slick-multiselect-select-all-label-hover-border);
        background-color: var(--slick-multiselect-select-all-label-hover-bg-color, v.$slick-multiselect-select-all-label-hover-bg-color);
      }
    }
  }
  .ms-ok-button {
    cursor: pointer;
    display: block;
    padding: 0;
    width: var(--slick-multiselect-ok-button-width, v.$slick-multiselect-ok-button-width);
    height: var(--slick-multiselect-ok-button-height, v.$slick-multiselect-ok-button-height);
    border-color: var(--slick-multiselect-ok-button-border-color, v.$slick-multiselect-ok-button-border-color);
    border-radius: var(--slick-multiselect-ok-button-border-radius, v.$slick-multiselect-ok-button-border-radius);
    border-width: var(--slick-multiselect-ok-button-border-width, v.$slick-multiselect-ok-button-border-width);
    text-align: var(--slick-multiselect-ok-button-text-align, v.$slick-multiselect-ok-button-text-align);
    color: var(--slick-multiselect-ok-button-text-color, v.$slick-multiselect-ok-button-text-color);
    font-weight: var(--slick-multiselect-ok-button-font-weight, v.$slick-multiselect-ok-button-font-weight);
    background-color: var(--slick-multiselect-ok-button-bg-color, v.$slick-multiselect-ok-button-bg-color);
    &:hover {
      background-color: var(--slick-multiselect-ok-button-bg-hover-color, v.$slick-multiselect-ok-button-bg-hover-color);
      color: var(--slick-multiselect-ok-button-text-hover-color, v.$slick-multiselect-ok-button-text-hover-color);
    }
  }
}

.slickgrid-container {
  .search-filter {
    :focus {
      outline: 0;
      box-shadow: var(--slick-input-focus-box-shadow, v.$slick-input-focus-box-shadow);
    }
  }

  // ----------------------------------------------
  // Compound Filters
  // ----------------------------------------------
  .search-filter .operator.input-group-addon {
    margin: 0;
    padding: 0;
    min-width: 25px;
    border: none;
    &:focus {
      z-index: 3;
    }

    .form-control {
      border-radius: var(--slick-compound-filter-operator-border-radius, v.$slick-compound-filter-operator-border-radius);
      padding: var(--slick-compound-filter-text-padding, v.$slick-compound-filter-text-padding);
      font-size: var(--slick-compound-filter-text-font-size, v.$slick-compound-filter-text-font-size);
      color: var(--slick-compound-filter-text-color, v.$slick-compound-filter-text-color);
      font-weight: var(--slick-compound-filter-text-weight, v.$slick-compound-filter-text-weight);
      background-color: var(--slick-compound-filter-bgcolor, v.$slick-compound-filter-bgcolor);
      &:focus {
        z-index: 3;
      }
    }

    select {
      font-family: var(--slick-compound-filter-operator-select-font-family, v.$slick-compound-filter-operator-select-font-family);
      font-size: var(--slick-compound-filter-operator-select-font-size, v.$slick-compound-filter-operator-select-font-size);
      border: var(--slick-compound-filter-operator-select-border, v.$slick-compound-filter-operator-select-border);
      width: var(--slick-compound-filter-operator-select-width, v.$slick-compound-filter-operator-select-width);

      &.form-control {
        cursor: pointer;
        appearance: none;
        .empty {
          color: #c0c0c0;
        }
      }
    }
  }
  .search-filter .operator-char3.input-group-addon {
    min-width: 30px;
  }

  input.search-filter,
  .search-filter input {
    font-family: var(--slick-filter-placeholder-font-family, v.$slick-filter-placeholder-font-family);
  }
  .search-filter {
    input:not(.slider-filter-input) {
      &.compound-input {
        border-radius: var(--slick-compound-filter-border-radius, v.$slick-compound-filter-border-radius) !important;
        border-left: none;
      }
      &::placeholder {
        color: var(--slick-placeholder-color, v.$slick-placeholder-color);
      }
    }
    input.compound-slider {
      border-left: none !important;
    }
  }

  .slick-headerrow {
    .slick-headerrow-columns {
      .slick-headerrow-column {
        input.form-control.search-filter,
        .form-group.search-filter {
          input,
          button,
          select {
            background-color: var(--slick-form-control-bg-color, v.$slick-form-control-bg-color);
          }
        }

        .input-group-prepend + .date-picker {
          input.compound-input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }
    }
  }

  // ----------------------------------------------
  // Date Picker Filter
  // ----------------------------------------------

  .search-filter.form-group {
    .input-group.date-picker input.form-control {
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
    }
  }
  .search-filter .date-picker {
    input.form-control {
      border-left: none;
      &::placeholder {
        color: var(--slick-placeholder-color, v.$slick-placeholder-color);
      }
    }
  }
  .search-filter .date-picker {
    flex: 1;
    cursor: pointer;

    .date-picker input.form-control {
      background-color: var(--slick-date-picker-bg-color, v.$slick-date-picker-bg-color);
      font-family: var(--slick-filter-placeholder-font-family, v.$slick-filter-placeholder-font-family);
      font-size: var(--slick-font-size-base, v.$slick-font-size-base);
      border-radius: var(--slick-compound-filter-border-radius, v.$slick-compound-filter-border-radius);
      width: 100%;
      &[readonly] {
        background-color: var(--slick-date-picker-bg-color, v.$slick-date-picker-bg-color);
      }
    }
    .form-control[readonly] {
      cursor: pointer;
      background-color: var(--slick-date-picker-bg-color, v.$slick-date-picker-bg-color);
    }
  }
  .date-picker input.form-control {
    cursor: pointer;
    font-family: var(--slick-filter-placeholder-font-family, v.$slick-filter-placeholder-font-family);
    font-size: var(--slick-font-size-base, v.$slick-font-size-base);
    border-radius: var(--slick-date-range-filter-border-radius, v.$slick-date-range-filter-border-radius);
    &[readonly] {
      background-color: var(--slick-date-picker-bg-color, v.$slick-date-picker-bg-color);
    }
  }
}

// ----------------------------------------------
// Date Picker Filter
// ----------------------------------------------

.vc[data-vc='calendar'] {
  padding: 0.9rem;
  z-index: 9999;

  [tabindex='0']:focus {
    outline: 1px solid orange;
  }
}

// ----------------------------------------------
// Draggable Grouping Plugin
// ----------------------------------------------

.slick-preheader-panel,
.slick-topheader-panel {
  width: 100%;

  .slick-dropzone,
  .slick-dropzone-hover {
    display: flex;
    align-items: center;
    padding: var(--slick-draggable-group-drop-padding, v.$slick-draggable-group-drop-padding);
    height: var(--slick-draggable-group-drop-height, v.$slick-draggable-group-drop-height);
    border-top: var(--slick-draggable-group-drop-border-top, v.$slick-draggable-group-drop-border-top);
    border-left: var(--slick-draggable-group-drop-border-left, v.$slick-draggable-group-drop-border-left);
    border-right: var(--slick-draggable-group-drop-border-right, v.$slick-draggable-group-drop-border-right);
    border-bottom: var(--slick-draggable-group-drop-border-bottom, v.$slick-draggable-group-drop-border-bottom);
    width: var(--slick-draggable-group-drop-width, v.$slick-draggable-group-drop-width);
    border-radius: var(--slick-draggable-group-drop-radius, v.$slick-draggable-group-drop-radius);
    background-color: var(--slick-draggable-group-drop-bgcolor, v.$slick-draggable-group-drop-bgcolor);

    .slick-draggable-dropzone-placeholder {
      font-style: var(--slick-draggable-group-placeholder-font-style, v.$slick-draggable-group-placeholder-font-style);
      color: var(--slick-draggable-group-placeholder-color, v.$slick-draggable-group-placeholder-color);
      width: 100%;
    }

    .slick-group-toggle-all {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: var(--slick-draggable-group-toggle-all-border, v.$slick-draggable-group-toggle-all-border);
      border-radius: var(--slick-draggable-group-toggle-all-border-radius, v.$slick-draggable-group-toggle-all-border-radius);
      margin-right: var(--slick-draggable-group-toggle-all-margin-right, v.$slick-draggable-group-toggle-all-margin-right);
      padding: var(--slick-draggable-group-toggle-all-padding, v.$slick-draggable-group-toggle-all-padding);
      position: var(--draggable-group-toggle-all-position, v.$slick-draggable-group-toggle-all-position);
      top: var(--slick-draggable-group-toggle-all-top, v.$slick-draggable-group-toggle-all-top);
      right: var(--slick-draggable-group-toggle-all-right, v.$slick-draggable-group-toggle-all-right);

      .slick-group-toggle-all-icon {
        cursor: pointer;
        color: var(--slick-draggable-group-toggle-all-icon-color, v.$slick-draggable-group-toggle-all-icon-color);
        font-size: var(--slick-draggable-group-toggle-all-icon-font-size, v.$slick-draggable-group-toggle-all-icon-font-size);
        &.expanded {
          @include svg.generateSvgStyle(
            'slick-draggable-group-toggle-expanded-icon-svg',
            v.$slick-draggable-group-toggle-expanded-icon-svg-path
          );
        }
        &.collapsed {
          @include svg.generateSvgStyle(
            'slick-draggable-group-toggle-collapsed-icon-svg',
            v.$slick-draggable-group-toggle-collapsed-icon-svg-path
          );
        }
      }

      .slick-group-toggle-all-text {
        font-size: var(--slick-draggable-group-toggle-all-text-font-size, v.$slick-draggable-group-toggle-all-text-font-size);
        margin: var(--slick-draggable-group-toggle-all-text-margin, v.$slick-draggable-group-toggle-all-text-margin);
      }
    }

    .slick-dropped-grouping {
      cursor: move;
      display: flex;
      align-items: center;
      background-color: var(--slick-draggable-group-column-background-color, v.$slick-draggable-group-column-background-color);
      border: var(--slick-draggable-group-column-border, v.$slick-draggable-group-column-border);
      border-radius: var(--slick-draggable-group-column-border-radius, v.$slick-draggable-group-column-border-radius);
      padding: var(--slick-draggable-group-column-padding, v.$slick-draggable-group-column-padding);
      margin-right: var(--slick-draggable-group-column-margin-right, v.$slick-draggable-group-column-margin-right);
      z-index: 1;
    }

    .slick-groupby-sort {
      cursor: pointer;
      display: inline-flex;
      margin-left: var(--slick-draggable-group-sort-icon-margin-left, v.$slick-draggable-group-sort-icon-margin-left);
      color: var(--slick-draggable-group-sort-icon-color, v.$slick-draggable-group-sort-icon-color);
      font-size: var(--slick-draggable-group-sort-icon-font-size, v.$slick-draggable-group-sort-icon-font-size);
      padding-left: var(--slick-draggable-group-sort-icon-padding-left, v.$slick-draggable-group-sort-icon-padding-left);
      padding-right: var(--slick-draggable-group-sort-icon-padding-right, v.$slick-draggable-group-sort-icon-padding-right);
      vertical-align: var(--slick-draggable-group-sort-icon-vertical-align, v.$slick-draggable-group-sort-icon-vertical-align);
      &:hover {
        color: var(--slick-draggable-group-sort-icon-hover-color, v.$slick-draggable-group-sort-icon-hover-color);
      }
    }

    .slick-groupby-remove {
      cursor: pointer;
      display: inline-flex;
      margin-left: var(--slick-draggable-group-delete-margin-left, v.$slick-draggable-group-delete-margin-left);
      color: var(--slick-draggable-group-delete-color, v.$slick-draggable-group-delete-color);
      font-size: var(--slick-draggable-group-delete-font-size, v.$slick-draggable-group-delete-font-size);
      padding-left: var(--slick-draggable-group-delete-padding-left, v.$slick-draggable-group-delete-padding-left);
      padding-right: var(--slick-draggable-group-delete-padding-right, v.$slick-draggable-group-delete-padding-right);
      vertical-align: var(--slick-draggable-group-delete-vertical-align, v.$slick-draggable-group-delete-vertical-align);
      &:hover {
        color: var(--slick-draggable-group-delete-hover-color, v.$slick-draggable-group-delete-hover-color);
      }
    }
  }
  .slick-dropzone-hover {
    background-color: var(--slick-draggable-group-droppable-hover-bgcolor, v.$slick-draggable-group-droppable-hover-bgcolor);
    border: var(--slick-draggable-group-drop-border-hover, v.$slick-draggable-group-drop-border-hover);
  }
  .slick-dropzone-placeholder-hover {
    opacity: var(--slick-draggable-group-drop-placeholder-hover-opacity, v.$slick-draggable-group-drop-placeholder-hover-opacity);
  }
  .slick-header-column-active {
    // do not display column clone when dragging a column hover dropzone because it adds to the far right and isn't needed
    display: none !important;
  }
}

.slick-header {
  .slick-header-columns {
    .slick-column-groupable {
      display: inline-block;
      font-weight: var(--slick-draggable-group-column-icon-font-weight, v.$slick-draggable-group-column-icon-font-weight);
      color: var(--slick-draggable-group-column-icon-color, v.$slick-draggable-group-column-icon-color);
      width: var(--slick-draggable-group-column-icon-width, v.$slick-draggable-group-column-icon-width);
      height: var(--slick-draggable-group-column-icon-height, v.$slick-draggable-group-column-icon-height);
      margin-left: var(--slick-draggable-group-column-icon-margin-left, v.$slick-draggable-group-column-icon-margin-left);
    }
  }
}

// ----------------------------------------------
// Input Slider Filters (with vanilla html)
// ----------------------------------------------

.slider-container,
.slider-input-container {
  input.form-control.compound-input {
    border-radius: 0;
  }
}
.slider-container {
  display: flex;
  height: 100%;
  flex: 1;

  input[type='range'] {
    /*removes default webkit styles*/
    appearance: none;
    flex: 1;
    border-radius: 0;
    height: var(--slick-slider-filter-height, v.$slick-slider-filter-height);
    padding: var(--slick-slider-filter-runnable-track-padding, v.$slick-slider-filter-runnable-track-padding);

    /* change runnable track color while in focus on all browsers */
    &:focus {
      outline: none;
    }

    /* WebKit specific (Opera/Chrome/Safari) */
    &::-webkit-slider-runnable-track {
      height: var(--slick-slider-filter-runnable-track-height, v.$slick-slider-filter-runnable-track-height);
      border: none;
      border-radius: 3px;
      -webkit-appearance: none;
    }
    &::-webkit-slider-thumb {
      cursor: var(--slick-slider-filter-thumb-cursor, v.$slick-slider-filter-thumb-cursor);
      height: var(--slick-slider-filter-thumb-size, v.$slick-slider-filter-thumb-size);
      width: var(--slick-slider-filter-thumb-size, v.$slick-slider-filter-thumb-size);
      border-radius: var(--slick-slider-filter-thumb-border-radius, v.$slick-slider-filter-thumb-border-radius);
      border: var(--slick-slider-filter-thumb-border, v.$slick-slider-filter-thumb-border);
      background: var(--slick-slider-filter-thumb-color, v.$slick-slider-filter-thumb-color);
      margin-top: -4px;
      pointer-events: auto;
      -webkit-appearance: none;
    }

    /* Mozilla Firefox specific */
    &::-moz-range-track {
      height: var(--slick-slider-filter-runnable-track-height, v.$slick-slider-filter-runnable-track-height);
      border: none;
      border-radius: 3px;
      -moz-appearance: none;
    }
    &::-moz-range-thumb {
      cursor: var(--slick-slider-filter-thumb-cursor, v.$slick-slider-filter-thumb-cursor);
      height: var(--slick-slider-filter-thumb-height, v.$slick-slider-filter-thumb-height);
      width: var(--slick-slider-filter-thumb-width, v.$slick-slider-filter-thumb-width);
      border-radius: var(--slick-slider-filter-thumb-border-radius, v.$slick-slider-filter-thumb-border-radius);
      border: var(--slick-slider-filter-thumb-border, v.$slick-slider-filter-thumb-border);
      background: var(--slick-slider-filter-thumb-color, v.$slick-slider-filter-thumb-color);
      pointer-events: auto;
    }

    /*hide the outline behind the border*/
    &:-moz-focusring {
      outline: 1px solid #fff;
      outline-offset: -1px;
    }
    &:active::-webkit-slider-thumb {
      background-color: var(--slick-slider-filter-thumb-active-bg-color, v.$slick-slider-filter-thumb-active-bg-color);
      border: var(--slick-slider-filter-thumb-active-border, v.$slick-slider-filter-thumb-active-border);
      box-shadow: var(--slick-slider-filter-thumb-active-box-shadow, v.$slick-slider-filter-thumb-active-box-shadow);
    }
    &:active::-moz-range-thumb {
      background-color: var(--slick-slider-filter-thumb-active-bg-color, v.$slick-slider-filter-thumb-active-bg-color);
      border: var(--slick-slider-filter-thumb-active-border, v.$slick-slider-filter-thumb-active-border);
      box-shadow: var(--slick-slider-filter-thumb-active-box-shadow, v.$slick-slider-filter-thumb-active-box-shadow);
    }
  }
}
.search-filter,
.slider-editor {
  height: var(--slick-header-input-height, v.$slick-header-input-height);

  &::placeholder {
    color: var(--slick-placeholder-color, v.$slick-placeholder-color);
  }

  .input-group-text {
    display: flex;
    align-items: center;
    padding: var(--slick-slider-filter-number-padding, v.$slick-slider-filter-number-padding);
    font-size: var(--slick-slider-filter-number-font-size, v.$slick-slider-filter-number-font-size);
  }

  .slider-value,
  .slider-values {
    padding: 0;
    height: 100%;
  }
  input.slider-filter-input[type='range'] {
    margin: 0;
    position: absolute;
    padding: var(--slick-slider-filter-runnable-track-padding, v.$slick-slider-filter-runnable-track-padding);
    height: var(--slick-slider-filter-height, v.$slick-slider-filter-height);
  }

  /* Slider Editor */
  input.slider-editor-input[type='range'] {
    border: var(--slick-slider-editor-border, v.$slick-slider-editor-border);
    padding: var(--slick-slider-editor-runnable-track-padding, v.$slick-slider-editor-runnable-track-padding);
    height: var(--slick-slider-editor-height, v.$slick-slider-editor-height);
  }

  .slider-range-value {
    padding: 0;
    height: 100%;
    .input-group-text {
      padding: var(--slick-slider-filter-number-padding, v.$slick-slider-filter-number-padding);
      font-size: var(--slick-slider-filter-number-font-size, v.$slick-slider-filter-number-font-size);
    }
  }

  .input-group-prepend.operator + .filter-input input.slider-filter-input {
    border-left: 0;
  }
  &:not(.input-group) {
    .slider-editor,
    .slider-filter,
    .slider-input-container .slider-editor-input,
    .slider-input-container .slider-filter-input {
      border-radius: var(--slick-slider-filter-border-radius, v.$slick-slider-filter-border-radius);
    }
  }
  &.input-group > :first-child:not(.input-group-addon),
  &.input-group > :first-child:not(.input-group-addon) .slider-filter-input,
  &.input-group > :first-child:not(.input-group-addon) .slider-editor-input {
    border-bottom-left-radius: var(--slick-slider-filter-border-radius, v.$slick-slider-filter-border-radius);
    border-top-left-radius: var(--slick-slider-filter-border-radius, v.$slick-slider-filter-border-radius);
  }
  .input-group-addon:last-child .input-group-text {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}

.slider-editor {
  .slider-value {
    padding: 0;
    height: var(--slick-slider-editor-height, v.$slick-slider-editor-height);
    .input-group-text {
      padding: var(--slick-slider-editor-number-padding, v.$slick-slider-editor-number-padding);
      font-size: var(--slick-slider-filter-number-font-size, v.$slick-slider-filter-number-font-size);
      height: var(--slick-slider-editor-height, v.$slick-slider-editor-height);
    }
  }
}

.slider-input-container {
  height: 100%;
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  background-color: var(--slick-slider-filter-input-bgcolor, v.$slick-slider-filter-input-bgcolor);

  &.slider-values {
    display: flex;
    padding: 0;
  }

  .slider-track {
    position: absolute;
    margin: auto;
    margin-left: 8px;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    cursor: var(--slick-slider-filter-runnable-track-cursor, v.$slick-slider-filter-runnable-track-cursor);
    background: var(--slick-slider-filter-runnable-track-bgcolor, v.$slick-slider-filter-runnable-track-bgcolor);
    height: var(--slick-slider-filter-runnable-track-height, v.$slick-slider-filter-runnable-track-height);
    width: calc(100% - 16px);
  }

  input[type='range'] {
    position: absolute;
    background-color: transparent;
    pointer-events: none;
    width: 100%;
    &.focus {
      outline: 0;
      border-color: var(--slick-slider-filter-focus-border-color, v.$slick-slider-filter-focus-border-color);
      box-shadow: var(--slick-slider-filter-focus-box-shadow, v.$slick-slider-filter-focus-box-shadow);
    }
  }
}

// ---------------------------------------------------------
// Row Detail View Plugin
// ---------------------------------------------------------

.slick-row {
  .detail-view-toggle {
    display: inline-block;

    &.expand {
      @include svg.generateSvgStyle('slick-detail-view-icon-expand-svg', v.$slick-detail-view-icon-expand-svg-path);
    }
    &.collapse {
      @include svg.generateSvgStyle('slick-detail-view-icon-collapse-svg', v.$slick-detail-view-icon-collapse-svg-path);
    }
    &.expand,
    &.collapse {
      cursor: pointer;
      color: var(--slick-detail-view-icon-color, v.$slick-detail-view-icon-color);
      font-size: var(--slick-detail-view-icon-font-size, v.$slick-detail-view-icon-font-size);
      &:hover {
        color: var(--slick-detail-view-icon-color-hover, v.$slick-detail-view-icon-color-hover);
        opacity: var(--slick-detail-view-icon-opacity-hover, v.$slick-detail-view-icon-opacity-hover);
      }
    }
  }

  .dynamic-cell-detail {
    position: absolute;
    width: 100%;
    overflow: auto;
    left: var(--slick-detail-view-container-left, v.$slick-detail-view-container-left);
    border: var(--slick-detail-view-container-border, v.$slick-detail-view-container-border);
    background-color: var(--slick-detail-view-container-bgcolor, v.$slick-detail-view-container-bgcolor);
    padding: var(--slick-detail-view-container-padding, v.$slick-detail-view-container-padding);
    z-index: var(--slick-detail-view-container-z-index, v.$slick-detail-view-container-z-index);
  }
}

.slick-drag-replace-handle {
  height: var(--slick-drag-selection-handle-size, v.$slick-drag-selection-handle-size);
  width: var(--slick-drag-selection-handle-size, v.$slick-drag-selection-handle-size);
  background: var(--slick-drag-selection-handle-color, v.$slick-drag-selection-handle-color);
  position: absolute;
  bottom: 0;
  right: 0;
}