// third party scss that we need to clean up
// sass-lint:disable-all
// Detect lightness
@function detect-lightness($color) {
  @if (lightness($color) > 60) {
    @return mix($color, #000, 90%);
  } @else {
    @return mix($color, #fff, 90%);
  }
}

// Spacing
@function spacing($type) {
  @if $type == "compact" {
    @return 12px;
  }
  @if $type == "spacious" {
    @return 22px;
  } @else {
    @return 16px;
  }
}

// Description
@function desc($display) {
  @if $display == false {
    @return none;
  } @else {
    @return block;
  }
}

// Layout type
@mixin layout-width($type) {
  @if $type == "small" {
    max-width: 500px;
    min-width: 400px;
  }
  @if $type == "normal" {
    max-width: 600px;
    min-width: 500px;
  }
  @if $type == "large" {
    max-width: 800px;
    min-width: 600px;
  }
  @if $type == "full" {
    width: 100%;
  }
}

// Alignement type
@mixin alignment-type($type) {
  @if $type == "left" {
    left: 0 !important;
    right: inherit !important;
  }
  @if $type == "right" {
    right: -5.5rem !important;
    left: inherit !important;
  }
  @if $type == "center" {
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
  }
}

// Mixin - Shadow type
@mixin shadow-type($type) {
  $shadow-start: rgba(0, 0, 0, 0.2);
  $shadow-light-end: rgba(0, 0, 0, 0.1);
  $shadow-heavy-end: rgba(0, 0, 0, 0.1);

  @if $type == "light" {
    box-shadow: 0 1px 0 0 $shadow-start, 0 2px 3px 0 $shadow-light-end;
  }
  @if $type == "heavy" {
    box-shadow: 0 8px 17px 0 $shadow-start, 0 6px 20px 0 $shadow-heavy-end;
  }
}

// Mixin - highlight
@function set-highlight($highlight, $color) {
  @if $highlight == 1 and lightness($color) < 60 {
    @return mix(#fff, $color, 90%);
  } @else {
    @return darken(detect-lightness($color), 30%);
  }
}

@mixin dropdown(
  $main-color: #458ee1,
  $layout-width: normal,
  $layout-type: normal,
  $layout-alignment: "align",
  $background-color: #fff,
  $border-radius: 4,
  $border-width: 1,
  $border-color: #d9d9d9,
  $box-shadow: light,
  $branding-position: bottom,
  $font-size: normal,
  $header-color: #33363d ,
  $title-color: #02060c,
  $subtitle-color: #a4a7ae,
  $text-color: #63676d,
  $highlight-color: #3881ff,
  $spacing: normal,
  $include-desc: true,
  $background-category-header: #fff,
  $highlight-opacity: .1,
  $highlight-type: "underline",
  $code-background: #ebebeb,
  $responsive-breakpoint: 768px
) {

  $header-size: 1em;
  $title-size: .9em;
  $text-size: .85em;
  $subtitle-size: .9em;
  $padding: spacing($spacing);

  @if $font-size == "small" {
    $header-size: .95em;
    $title-size: .8em;
    $text-size: .75em;
    $subtitle-size: .8em;
  } @else if $font-size == "large" {
    $header-size: 1.1em;
    $title-size: 1em;
    $text-size: .9em;
    $subtitle-size: 1em;
  }

  .algolia-autocomplete {

    &.algolia-autocomplete-right .ds-dropdown-menu {
      @include alignment-type(right);

      &:before {
        display: none;
        right: 327px;
      }
    }

    &.algolia-autocomplete-left .ds-dropdown-menu {
      @include alignment-type(left);

      &:before {
        display: none;
        left: 48px;
      }
    }

    // Dropdown wrapper
    .ds-dropdown-menu {
      @include layout-width($layout-width);
      @include shadow-type($box-shadow);
      position: relative;
      top: -1.9rem;
      border-radius: $border-radius+px;
      margin: 1.9rem 0 0;
      padding: 0;
      text-align: left;
      height: auto;
      background: transparent;
      border: none;
      z-index: 999;

      // Arrow
      &:before {
        display: block;
        position: absolute;
        content: "";
        width: 14px;
        height: 14px;
        background: $background-color;
        z-index: 1000;
        top: -7px;
        border-top: $border-width+px solid $border-color;
        border-right: $border-width+px solid $border-color;
        transform: rotate(-45deg);
        border-radius: 2px;
      }

      .ds-suggestions {
        position: relative;
        z-index: 1000;
        margin-top: $padding/2;
      }

      .ds-suggestion {
        cursor: pointer;

        &.ds-cursor {

          .algolia-docsearch-suggestion.suggestion-layout-simple {
            background-color: rgba($main-color, .05);
          }

          .algolia-docsearch-suggestion:not(.suggestion-layout-simple) {

            .algolia-docsearch-suggestion--content {
              background-color: rgba($main-color, .05);
            }
          }
        }
      }

      [class^="ds-dataset-"] {
        position: relative;
        border: solid $border-width+px $border-color;
        background: $background-color;
        border-radius: $border-radius+px;
        overflow: auto;
        padding: 0 $padding/2 $padding/2;
      }

      // Inner-grid setup
      * {
        box-sizing: border-box;
      }
    }

    // Each suggestion item is wrapped
    .algolia-docsearch-suggestion {
      position: relative;
      padding: 0 $padding/2;
      background: $background-color;
      color: $title-color;
      overflow: hidden;

      @if $highlight-type == basic {
        &--highlight {
          color: $main-color;
          background-color: rgba($main-color, $highlight-opacity);
        }

        .algolia-docsearch-suggestion--item-header .algolia-docsearch-suggestion--highlight {
          color: inherit;
          background: inherit;
        }
      } @else {
        &--highlight {
          color: set-highlight($highlight-opacity, $main-color);
          background: rgba(mix($main-color, #fff, 60%), $highlight-opacity);
          padding: 0.1em 0.05em;
        }

        &--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
        &--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight {
          @include brand-font-h3();
          color: inherit;
          background: inherit;
        }

        &--text .algolia-docsearch-suggestion--highlight {
          padding: 0 0 1px;
          background: inherit;
          box-shadow: inset 0 -2px 0 0 rgba($main-color, 0.8);
          color: inherit;
        }
      }

      &--content {
        display: block;
        float: right;
        width: 70%;
        position: relative;
        padding: $padding/3 0 $padding/3 $padding/1.5;
        cursor: pointer;

        &:before {
          content: "";
          position: absolute;
          display: block;
          top: 0;
          height: 100%;
          width: 1px;
          background: #ddd;
          left: -1px;
        }
      }

      &--category-header {
        position: relative;
        border-bottom: 1px solid #ddd;
        display: none;
        margin-top: $padding/2;
        padding: $padding/4 0;
        font-size: $header-size;
        color: $header-color;
      }

      &--wrapper {
        width: 100%;
        float: left;
        padding: $padding/2 0 0 0;
      }

      &--subcategory-column {
        float: left;
        width: 30%;
        padding-left: 0;
        text-align: right;
        position: relative;
        padding: $padding/3 $padding/1.5;
        color: $subtitle-color;
        font-size: $subtitle-size;
        word-wrap: break-word;

        &:before {
          content: "";
          position: absolute;
          display: block;
          top: 0;
          height: 100%;
          width: 1px;
          background: #ddd;
          right: 0;
        }

        .algolia-docsearch-suggestion--highlight {
          background-color: inherit;
          color: inherit;
        }
      }

      &--subcategory-inline {
        display: none;
      }

      &--title {
        margin-bottom: $padding/4;
        color: $title-color;
        font-size: $title-size;
        font-weight: bold;
      }

      &--text {
        display: desc($include-desc);
        line-height: 1.2em;
        font-size: $text-size;
        color: $text-color;
      }

      &--no-results {
        width: 100%;
        padding: $padding/2 0;
        text-align: center;
        font-size: 1.2em;

        &::before {
          display: none;
        }
      }

      code {
        padding: 1px 5px;
        font-size: 90%;
        border: none;
        color: #222222;
        background-color: $code-background;
        border-radius: 3px;
        .algolia-docsearch-suggestion--highlight {
          background: none;
        }
      }

      // Rules to display categories and subcategories
      &.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
        display: block;
      }

      &.algolia-docsearch-suggestion__secondary {
        display: block;
      }

      @media all and (min-width: #{$responsive-breakpoint}) {
        .algolia-docsearch-suggestion--subcategory-column {
          display: block;
        }
      }
      @media all and (max-width: #{$responsive-breakpoint}) {
        .algolia-docsearch-suggestion--subcategory-column {
          display: inline-block;
          width: auto;
          text-align: left;
          float: left;
          padding: 0;

          color: #02060C;
          font-size: 0.9em;
          font-weight: bold;
          text-align: left;
          padding: 0;
          opacity: 0.5;

          &:before {
            display: none;
          }
          &:after {
            content: "|";
          }
        }
        .algolia-docsearch-suggestion--content {
          display: inline-block;
          width: auto;
          text-align: left;
          float: left;
          padding: 0;

          &:before {
            display: none;
          }
        }
      }
    }

    //Simple layout (no column)
    .suggestion-layout-simple {

      &.algolia-docsearch-suggestion {
        border-bottom: solid 1px #eee;
        padding: $padding/2;
        margin: 0;
      }

      .algolia-docsearch-suggestion {
        &--content {
          width: 100%;
          padding: 0;

          &::before {
            display: none;
          }
        }

        &--category-header {
          margin: 0;
          padding: 0;
          display: block;
          width: 100%;
          border: none;

          &-lvl0 {
            opacity: .6;
            font-size: $text-size;
          }

          &-lvl1 {
            opacity: .6;
            font-size: $text-size;

            &::before {
              //background-image: url("data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>");
              content: "";
              width: 10px;
              height: 10px;
              display: inline-block;
            }
          }
        }

        &--wrapper {
          width: 100%;
          float: left;
          margin: 0;
          padding: 0;
        }

        &--duplicate-content,
        &--subcategory-inline {
          display: none !important;
        }

        &--title {
          margin: 0;
          color: $main-color;
          font-size: $title-size;
          font-weight: normal;

          &::before {
            content: "#";
            font-weight: bold;
            color: $main-color;
            display: inline-block;
          }
        }

        &--text {
          margin: $padding/4 0 0;
          display: desc($include-desc);
          line-height: 1.4em;
          padding: $padding/3 $padding/2;
          background: #f8f8f8;
          font-size: $text-size;
          opacity: .8;

          .algolia-docsearch-suggestion--highlight {
            color: darken($text-color, 15%);
            font-weight: bold;
            box-shadow: none;
          }
        }
      }
    }

     // powered by
    .algolia-docsearch-footer {
      width: 110px;
      height: 20px;
      z-index: 2000;
      margin-top: $padding/1.5;
      float: right;
      font-size: .75rem;
      line-height: 2;
      color: $gray-300;

      a {
        color: $gray-400;
      }
    }
  }
}
// sass-lint:enable-all
