@import '../../node_modules/searchkit/theming/vars.scss';

// The class names starting with sk- comes mainly from the searchkit library.
// We reuse the components' styles from searchkit as is excepted for the
// search-box component and layout.

// @import "../../node_modules/searchkit/theming/components.scss";

@import '../../node_modules/searchkit/theming/components/arrows.scss';
@import '../../node_modules/searchkit/theming/components/actions.scss';
@import '../../node_modules/searchkit/theming/components/loader.scss';

// @import "../../node_modules/searchkit/theming/components/search-box.scss";
@import '../../node_modules/searchkit/theming/components/search-icon.scss';
@import '../../node_modules/searchkit/theming/components/hits-stats.scss';
@import '../../node_modules/searchkit/theming/components/no-hits.scss';
@import '../../node_modules/searchkit/theming/components/filter-group.scss';
@import '../../node_modules/searchkit/theming/components/filter-item.scss';
@import '../../node_modules/searchkit/theming/components/item-list.scss';
@import '../../node_modules/searchkit/theming/components/select.scss';
@import '../../node_modules/searchkit/theming/components/tabs.scss';
@import '../../node_modules/searchkit/theming/components/tag-cloud.scss';
@import '../../node_modules/searchkit/theming/components/toggle.scss';
@import '../../node_modules/searchkit/theming/components/range-input.scss';
@import '../../node_modules/searchkit/theming/components/range-histogram.scss';
@import '../../node_modules/searchkit/theming/components/range-slider.scss';
@import '../../node_modules/searchkit/theming/components/hierarchical-menu-filter.scss';
@import '../../node_modules/searchkit/theming/components/hierarchical-refinement-filter.scss';
@import '../../node_modules/searchkit/theming/components/input-filter.scss';
@import '../../node_modules/searchkit/theming/components/numeric-refinement-list-filter.scss';
@import '../../node_modules/searchkit/theming/components/refinement-list-filter.scss';
@import '../../node_modules/searchkit/theming/components/selected-filters.scss';
//@import "../../node_modules/searchkit/theming/components/range-filter.scss";
// range-filter.scss includes "~rc-slider/assets/index.css"
@import '../../node_modules/searchkit/theming/components/reset-filters.scss';
@import '../../node_modules/searchkit/theming/components/menu-filter.scss';
@import '../../node_modules/searchkit/theming/components/tag-filter.scss';
@import '../../node_modules/searchkit/theming/components/pagination.scss';
@import '../../node_modules/searchkit/theming/components/table.scss';
@import '../../node_modules/searchkit/theming/components/panel.scss';

.emoticonValue {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 0 0 -14px;
  padding: 2px 0 0 6px;
}

.sk-tag-filter {
  display: inline-block;

  &.is-active {
    font-weight: bold;
  }

  &.is-active::after {
    content: 'x';
    color: red;
    border-left: 1px solid #777;
    padding-left: 1ex;
    padding-right: 1ex;
    margin-left: 1ex;
    margin-top: -1em;
  }

  .inline {
    display: inline;
  }

  .profileLine {
    display: inline;
    margin-top: 10px;
  }

  .profileLine .user {
    vertical-align: middle;
    margin-bottom: 2px;
  }
}

.date-filter input {
  display: inline-block;
}

.react-datepicker__input-container {
  display: block !important;
}

.sk-layout {
  float: left;

  &__top-bar {
    height: 40px;
    margin-top: -3px;
    z-index: 100;
    position: relative;

    button {
      display: inline-block;
    }
  }

  &__body {
    position: absolute;
    z-index: 99;
    margin: 0 auto 0;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  }

  &__filters {
    background: #f4f4f4;
    padding: 0 15px 15px 15px;
    margin: 15px 0 15px 15px;
    width: 250px;
    float: left;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;

    .sk-panel {
      margin: 16px 0 0 0;

      &.filter--type {
        margin: 0;
      }
    }

    .sk-refinement-list,
    .sk-range-filter,
    .sk-hierarchical-menu-list,
    .sk-numeric-refinement-list,
    .sk-hierarchical-refinement-list {
      margin-bottom: 20px;
    }

    .sk-select {
      width: 100%;
    }

    .sk-range-input {
      margin-top: 10px;
    }

    .sk-select select {
      width: 100%;
    }
  }

  &__results {
    background: $sk-layout-panel-background;
    margin: 15px 15px 15px 265px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    min-height: 600px;
  }
}

.sk-action-bar {
  margin: 0 15px 15px;

  &-row {
    margin: 0 0 10px;

    &:last-child {
      margin: 0;
    }
  }

  .sk-hits-stats {
    line-height: 30px;
  }

  .sk-select,
  .sk-toggle {
    margin-left: 15px;
  }
}

.sk-results-list {
  padding: 0;
}

// components

.sk-panel__header {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 15px;
}

.sk-item-list-option {
  align-items: flex-start;
  line-height: 14px;
  margin-bottom: 6px;
}

.sk-item-list-option__text,
.sk-item-list-option__count {
  color: $grey;
  font-family: $font-family4;
  margin-bottom: 0.5em;
}

.sk-item-list-option input.sk-item-list-option__checkbox {
  margin: 0 4px 0 0;
}

.sk-search-box {
  margin-right: 10px;

  form {
    position: relative;
  }

  input.sk-search-box__text {
    width: 14em;
    height: 30px;
    box-shadow: none;
    border: 1px solid #ccc;
    color: black;
    font-size: 12px;
    padding: 2px 20px 2px 24px;
  }

  &__icon {
    position: absolute;
    left: 4px;
    top: 5px;

    &:before {
      content: '';

      @include search-icon;

      background-size: contain;
      height: 20px;
      width: 20px;
      display: block;
    }

    opacity: 0.3;
  }

  &__action {
    display: none;
  }

  &__loader {
    position: absolute;
    right: 4px;
    top: 4px;

    &.is-hidden {
      display: none;
    }
  }
}

.sk-search-box,
#search-expand {
  display: inline-block;
}

.sk-range-filter {
  .rc-slider-handle {
    border-color: $sk-primary-theme-color;
  }

  .rc-slider-track {
    background-color: rgba(156, 162, 153, 0.5);
  }
}

.sk-reset-filters {
  border: none;
  font-size: 14px;
  margin: 0;
  padding-left: 0;
  padding-top: 5px;
}

.sk-pagination-navigation {
  width: 300px;
  margin: 10px auto;

  &.is-numbered {
    width: 600px;
  }
}

.sk-pagination-select {
  margin: 10px auto;
  text-align: center;
}

.sk-hits-list {
  max-height: 500px;
  overflow-y: scroll;
  margin: 0 15px 20px;

  a {
    text-decoration: none;
  }

  &__no-results {
    text-align: center;
    margin-top: 60px;
  }

  &__item {
    margin-bottom: 20px;
  }
}

$imgtypeWidth: 20px;
$imgtypeMargin: 30px;
$marginLeft: 80px;

.sk-hits-list-hit {
  padding-bottom: 1em;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  clear: both;
  min-height: 9em;
  position: relative;

  &__title {
    font-family: $font-family4;
    line-height: 20px;
    letter-spacing: 1.7px;
    margin: 0 0 5px $marginLeft;
    font-size: 18px;
  }

  &__content {
    font-family: $font-family4;
    margin-left: $marginLeft;
    margin-top: 1em;
    max-width: 85%;
  }

  &__info {
    color: $grey;
    font-size: 12px;
    font-family: $font-family4;
    margin-left: $marginLeft;
    bottom: 2em;
  }

  &__assembl-icon-message,
  &__assembl-icon-avatar {
    margin-left: 5px;
    margin-right: 15px;
  }

  &__imgtype {
    float: left;

    &:before {
      font-size: $imgtypeWidth;
      margin: 0;
    }
  }
}

.hidden {
  .sk-layout {
    &__body {
      z-index: 0;
    }
  }
}
