@import '../main_dependencies';

bb-omni-search {
    $omni-search-width: 400px;
    $omni-search-results-width: 437px;
    $omni-search-item-border: #d1d4dc;

    .omni-search-form {
      padding: 0;
      width: $omni-search-width;

      @media (max-width: $screen-xs) {
        width: 350px;
      }

      .input-group-addon {
        background-color: $white;
        width: 30px;
        border: 0;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;

        .form-control {
          height: 30px;
        }
      }

      .omni-search-input {
        min-width: $omni-search-width;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border: 0;

        &:focus {
          box-shadow: none;
        }

      }

    }

    .omni-search-results-wrapper {
        max-height: calc(100vh - 60px);
        overflow: auto;
        position: absolute;
        top: 40px;
        z-index: 1000;
        background-color: $white;
        width: $omni-search-results-width;
        border-radius: 0;
        box-shadow: 0 3px 4px 0 rgba(33, 43, 54, 0.3);
    }

    .omni-search-results__category-heading {
      text-transform: uppercase;
      padding: 10px 20px;
      color: #848484;
      font-size: 12px;
      background-color: #fafbfb;
      border-bottom: solid 1px $omni-search-item-border;
    }

    .omni-search-results {
      margin: 0;
    }

    .omni-search-result {
      padding: 16px;
      border-bottom: solid 1px $omni-search-item-border;
    }

    .omni-search-result--active {
      cursor: pointer;
      background-color: $bb-secondary;
      color: white;
      * { color: white }
    }

    .omni-search-result__heading {
      font-size: 16px;
      color: #333;
    }

    .omni-search-result__details {
      font-size: 14px;
      color: #697180;
    }

    .omni-search-form__no-results,
    .omni-search-form__invalid-term {
      position: absolute;
      top: 40px;
      z-index: 1000;
      padding: 16px 20px;
      font-size: 16px;
      background-color: #fafbfb;
      color: #8e95a3;
      width: $omni-search-results-width;
      border-radius: 0;
      border-top: solid 1px $omni-search-item-border;
      box-shadow: 0 3px 4px 0 rgba(33, 43, 54, 0.3);
    }
}