@use './variables-theme-salesforce' as vts;

// ------------------------------------------------
// apply custom styling when Filters are filled in
// ------------------------------------------------

.slick-headerrow {
  // remove any BS margins, fixes issue found in SF using BS theme
  .search-filter.form-group {
    margin: 0;
  }
  input.search-filter.filled,
  .search-filter.filled input,
  .search-filter.filled .date-picker input,
  .search-filter.filled .input-group-addon.slider-value,
  .search-filter.filled .input-group-addon.slider-range-value,
  .search-filter.filled .input-group-addon select {
    border: var(--slick-filled-filter-border, vts.$slick-filled-filter-border);
    color: var(--slick-filled-filter-color, vts.$slick-filled-filter-color);
    font-weight: var(--slick-filled-filter-font-weight, vts.$slick-filled-filter-font-weight);
    box-shadow: var(--slick-filled-filter-box-shadow, vts.$slick-filled-filter-box-shadow);
    &:focus {
      box-shadow: var(--slick-filled-filter-focus-box-shadow, vts.$slick-filled-filter-focus-box-shadow);
    }
    &.input-group-prepend {
      border-right: 0;
    }
    &.input-group-append {
      border-left: 0;
    }
  }
  .search-filter.filled .input-group-prepend select {
    border-right: 0;
  }
  .search-filter.filled .ms-choice {
    border: var(--slick-filled-filter-border, vts.$slick-filled-filter-border);
    box-shadow: var(--slick-filled-filter-box-shadow, vts.$slick-filled-filter-box-shadow);
    &:focus {
      box-shadow: var(--slick-filled-filter-focus-box-shadow, vts.$slick-filled-filter-focus-box-shadow);
    }
    span {
      display: inline-flex;
      align-items: center;
      font-weight: var(--slick-filled-filter-font-weight, vts.$slick-filled-filter-font-weight);
      color: var(--slick-filled-filter-color, vts.$slick-filled-filter-color);
    }
  }
  .search-filter.filled.ms-parent-open .ms-choice {
    box-shadow: var(--slick-filled-filter-focus-box-shadow, vts.$slick-filled-filter-focus-box-shadow);
  }
}