@import 'Variables';
@import './MagicBox/MagicBox';
\ .coveo-waiting-for-first-query .coveo-omnibox {
  z-index: 0;
}
.CoveoOmnibox.magic-box {
  .coveo-omnibox-hightlight {
    font-weight: bold;
    color: $black;
  }
  .magic-box-suggestions {
    z-index: 3;
  }
  .coveo-omnibox-hightlight2 {
    font-style: italic;
    color: $black;
  }
  .magic-box-suggestion {
    font-weight: bold;
    color: $black;

    .coveo-omnibox-hightlight,
    .coveo-omnibox-hightlight2 {
      font-weight: normal;
    }

    .coveo-omnibox-suggestion-category,
    .coveo-omnibox-suggestion-results-count {
      font-weight: normal;
      color: $grey-600;

      .coveo-omnibox-hightlight {
        color: $grey-600;
      }
    }
  }
  .magic-box-input .magic-box-underlay {
    display: flex;
    align-items: center;
    [data-id='FieldQuery'],
    [data-id='FieldSimpleQuery'] {
      &[data-success='true'] {
        @include highlight($green-100);
      }
      &[data-success='false'] {
        > [data-success='true'] {
          @include highlight($amber-100, false, false);
          &[data-id='FieldQuery_0'] {
            @include highlight($amber-100, true, false);
          }
        }
      }
    }
  }
  &.coveo-search-as-you-type {
    .magic-box-ghost-text {
      display: none;
    }
  }
  .coveo-omnibox-selectable {
    cursor: pointer;
  }

  .coveo-omnibox-selectable.coveo-omnibox-selected {
    background-color: $color-blueish-white-grey;
  }

  .coveo-omnibox-facet-value {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    margin: 0;
    li.coveo-facet-value {
      list-style-type: none;
    }
    .coveo-facet-value-label-wrapper {
      > * {
        vertical-align: middle;
      }
    }
  }
  .coveo-omnibox-facet-header {
    width: 100%;
    padding: 5px;
    height: 26px;
    color: #2c5985;
    .coveo-icon {
      margin-right: 6px;
      vertical-align: text-bottom;
    }
  }
  .coveo-omnibox-section {
    vertical-align: middle;
    margin-bottom: 2px;
  }
  .coveo-omnibox-header {
    height: 26px;
    color: #0065cb;
    margin-top: 4px;
    margin-bottom: 2px;
    .coveo-text {
      padding: 6px 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .coveo-facet-value-caption {
    font-weight: bold;
    .coveo-highlight {
      font-weight: normal;
    }
  }
}
