// Replaces magic_search.scss with styles for bootstrap/Horizon.

/* Disclaimer : Tread carefully with changes to this file.
   The contents of this scss file are somewhat fragile.  They allow
   for dynamic growth of both the token string and the input box,
   while also accounting for text ellipsis overflowing of token
   strings.  Any change to this file must vet ALL the cases
   mentioned above. */

/*-----------------------------------------
   Magic Search bar
  ----------------------------------------- */

.hz-magic-search-bar {
  max-width: 100%;
  min-width: 0;

  .magic-search-bar {
    &, .input-group {
      width: 100%;
    }
  }

  .input-group {
    width: 100%;
    min-width: 0;
    display: inline-flex;

    .input-group-btn,
    .input-group-addon {
      align-items: center;
      display: flex;
      width: auto;
    }

    .form-control {
      max-width: calc(100% - 2em);
      padding: 0;
      height: 100%;
      line-height: $input-height-base - 2;
    }
  }

  .input-group-btn {
    // Notes:
    // * We may need a better solution than this if we
    // ever want to support button groups that are
    // small or large, or a state other than default.
    // But, until then, this does the trick for our
    // standard use case!
    // * If this seems odds, its because Bootstrap button
    // groups don't allow the trailing button to grow in
    // height so we have to make the whole span look like
    // the button instead.  This can be confusing: the
    // click event needs to live on the span now, not the button.
    border-radius: 0 $border-radius-base $border-radius-base 0;
    border: 1px solid $btn-default-border;
    border-left: none;
    cursor: pointer;
    outline: 0;
    background-image: none;
    &:active {
      @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
    }

    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
    button {
      &,
      &:hover {
        background-color: transparent;
        border: none;
        box-shadow: none;
      }
      &:active {
        @include box-shadow(none);
      }
    }
  }

  .search-bar {

    .search-main-area {
      display: inline-flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 $padding-small-vertical;
      align-items: center;

      .search-entry {
        flex: 1 0 auto;
      }
    }

    .fi-filter {
      display: none;
    }

    // Input Text Box
    .search-input {
      border: none;
      padding: 0;
      width: calc(100% - 1.5em);
      background: transparent;

      &:focus {
        outline: none;
      }
    }

    // Token
    .item {
      max-width: calc(100% - 1.5em);
      font-size: $font-size-small;
      border-radius: $border-radius-base;
      display: inline-flex;
      background-color: $gray-lighter;
      padding: $padding-base-vertical;
      margin-right: $padding-small-vertical;
      margin-bottom: $padding-xs-vertical;

      .remove {
        color: $brand-danger;
        line-height: 1;
        padding-left: $padding-small-vertical;
      }
    }

    // Pre-Token Label
    .search-selected {
      color: $gray-light;
      padding-right: $padding-small-vertical;
    }

    // Search Bar Clear Icon
    .magic-search-clear {
      font-size: $font-size-base;
      color: $gray;
      position: absolute;
      right: 0.5em;
      top: calc(50% - 0.5em);
      line-height: 1;
    }

    .magic-search-result {
      &-string {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
        line-height: 1;
      }

      &-title {
        padding: 0 $padding-small-vertical;
        line-height: 1;
        flex: 1 0 auto;
      }
    }
  }
}

