@import '../../assets/scss/constants/colors';
@import '../../assets/scss/base/mixins';

.custom-search {
  position: relative;

  &-input {
    line-height: 2 !important;
    padding-left: 24px !important;
    padding-right: 26px !important;
    font-family: system-ui;
  }

  &-query-status {
    position: absolute;
    top: 10px;
    left: 4px;
  }

  .clear-query {
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 16px;
    padding: 4px 4px 0px 4px;
    background-color: $white;
    @include alignElement(null, center, center);
  }

  .valid,
  .invalid {
    font-size: 16px;
  }

  .valid {
    color: $green;
  }

  .invalid {
    color: $red;
  }

  .date-picker {
    visibility: hidden;
    bottom: 30px;
  }
}

input.input.custom-search-input::placeholder {
  color: lightgrey;
}

.suggestions {
  .suggestion-active,
  .suggestion-active:hover {
    button {
      background-color: #ebedec !important;
      color: #000;
    }
  }
}