@import 'MagicBox/Colors';
@import 'Variables';

@mixin attachTo($attachment) {
  position: absolute;
  @if $attachment != bottom {
    top: 0;
  }
  @if $attachment != top {
    bottom: 0;
  }
  @if $attachment != right {
    left: 0;
  }
  @if $attachment != left {
    right: 0;
  }
}

.coveo-suggestion-container {
  width: 100%;
  display: flex;
  $suggestionsWidth: 30%;
  $previewsWidth: 100% - $suggestionsWidth;

  .coveo-magicbox-suggestions {
    border: none;
    float: left;
    flex-basis: $suggestionsWidth;
    max-width: $suggestionsWidth;
  }

  .coveo-preview-container {
    $margin: 10px;
    border: none;
    background: $white;
    flex-basis: $previewsWidth;
    max-width: $previewsWidth;
    .coveo-preview-results {
      $columns: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow: hidden;
      width: 100%;
      .coveo-preview-layout {
        box-sizing: border-box;
        margin: $margin;
        padding: 20px;
        width: calc(#{100% / $columns} - #{$margin * 2});
        .coveo-default-result-preview {
          $maxImageHeightRelativeToWidth: 100%;
          position: relative;
          padding: $maxImageHeightRelativeToWidth 0 0 0;
          margin: 0;
          .CoveoImageFieldValue {
            @include attachTo(top);
            padding: $maxImageHeightRelativeToWidth 0 0 0;
            span {
              @include attachTo(all);
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                margin: 0;
              }
            }
          }
          .CoveoResultLink {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 20px;
          }
        }
      }
    }
    .coveo-preview-selectable.coveo-omnibox-selected,
    .coveo-preview-selectable:hover {
      outline: $default-border;
      outline-offset: -1px;
    }
  }
}
