@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.custom-solr-searches {
  $item-width: 770px;

  &__container {
    padding-top: 100px;
  }

  &__field {
    width: 430px;
    max-width: 90%;
    margin: auto;

    :deep(.input-container) {
      flex: 1;

      input {
        width: calc(100% - 15px);
        height: 45px;
        outline: none;
        border: none;
        border-bottom: 1px solid var(--color-grey-100);
        color: var(--color-primary-600);
        font-size: var(--font-size-h3);
        font-weight: 500;
      }
    }

    i {
      color: var(--color-primary-600);
      font-size: var(--font-size-h3);
    }

    :deep(.loader-ui) {
      width: 24px;
      padding-top: var(--spacing-l);
    }
  }

  &__filters {
    padding: 0 5%;
    margin: var(--spacing-l) 0 calc(var(--spacing-xl) + var(--spacing-s));

    button {
      color: var(--color-text);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 12px;

      @include transition(color 0.4s);

      + button {
        margin-left: calc(var(--spacing-m) + var(--spacing-xs));
      }

      &:hover,
      &.active {
        color: var(--color-primary-600);
      }

      &.active {
        font-weight: var(--font-weight-bold);
      }
    }
  }

  &__header {
    width: $item-width;
    max-width: 90%;
    margin: 0 auto var(--spacing-l);

    > div {
      width: 100%;
      justify-content: space-between;

      > p {
        color: var(--color-primary-600);
        font-weight: var(--font-weight-bold);
        font-size: 26px;
      }
    }

    :deep(.input-selectbox) {
      width: 190px;
      font-size: var(--font-size-h5);

      .vue-treeselect__control {
        padding-left: 0;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--color-grey-200);
      }

      .vue-treeselect__single-value,
      .vue-treeselect__input-container {
        padding: 0;
      }
    }
  }

  &__results {
    width: $item-width;
    max-width: 90%;
    margin: auto;
  }

  &__suggests {
    margin-top: 100px;
    text-align: center;
    line-height: 1.7;

    :deep(span) {
      color: var(--color-primary);
      text-decoration: underline;
    }

    .ds-base-text-container {
      font-size: var(--font-size-h4);
    }
  }

  &__infinite {
    :deep(.loader-ui) {
      width: 50px;
      padding-top: var(--spacing-xxl);
      margin: var(--spacing-xxl) auto 0;
    }
  }

  &__top {
    position: fixed;
    z-index: 10;
    right: 100px;
    bottom: 130px;
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-grey-100);
    border-radius: 100%;

    @include transition(all 0.4s);

    i {
      position: relative;
      top: -1px;
      color: var(--color-primary-600);
      font-size: var(--font-size-h4);
      transform: rotate(-90deg);
    }

    &:hover {
      transform: translateY(-5px);
    }
  }
}
