// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@use "../_globals" as *;

#search {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;

  .spotlight,
  &::after {
    position: absolute;
    inset: 0;
  }

  .spotlight {
    $spotlight-padding-sides: 26px;
    $spotlight-field-icon-size: 16px;
    $spotlight-field-spinner-size: 12px;

    padding-top: 90px;
    z-index: 2;
    animation-name: search-spotlight-animation;
    animation-delay: .1s;
    animation-duration: .2s;
    animation-fill-mode: both;

    &[data-has-results="false"] {
      .spotlight-results {
        display: none;
      }

      .spotlight-legend {
        background-color: var(--color-white);
      }
    }

    &[data-index-loading="true"] {
      .spotlight-field {
        &::after {
          display: inline-block;
        }

        .spotlight-input {
          padding-right: ($spotlight-padding-sides + $spotlight-field-spinner-size + 10px);
        }
      }
    }

    &[data-index-error="true"] {
      .spotlight-legend {
        .spotlight-error {
          display: block;
        }
      }
    }

    .spotlight-box {
      background-color: var(--color-white);
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 6px;
      box-shadow: 0 4px 6px 0 var(--color-search-spotlight-shadow);
    }

    .spotlight-field,
    .spotlight-legend {
      background-color: var(--color-search-spotlight-field-background);
      flex: 0 0 auto;
    }

    .spotlight-field {
      border-bottom: 1px solid var(--color-grey-dark);
      height: 58px;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
      }

      &::before {
        background-color: var(--color-blue-grey-dark);
        width: $spotlight-field-icon-size;
        height: $spotlight-field-icon-size;
        margin-top: (-1 * ($spotlight-field-icon-size * 0.5));
        left: $spotlight-padding-sides;

        @include mask-image-internal-fill("common/search/field-icon.svg");
      }

      &::after {
        background: transparent;
        border-color: var(--color-search-spotlight-field-spinner-border) var(--color-search-spotlight-field-spinner-border) transparent;
        border-width: 2px;
        border-style: solid;
        width: $spotlight-field-spinner-size;
        height: $spotlight-field-spinner-size;
        margin-top: (-1 * (($spotlight-field-spinner-size * 0.5) + 2px));
        right: $spotlight-padding-sides;
        opacity: .75;
        border-radius: 100%;
        display: none;
        animation-name: search-spotlight-field-spinner-animation;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
      }

      .spotlight-input {
        background: transparent;
        border: 0 none;
        outline: 0 none;
        color: var(--color-black);
        letter-spacing: .1px;
        padding-left: ($spotlight-padding-sides + $spotlight-field-icon-size + 14px);
        height: 100%;
        width: 100%;

        @include font-size(15px);
        @include appearance(none);

        @include input-placeholder {
          color: var(--color-search-spotlight-field-placeholder);
          opacity: 1;
        }

        @include input-search {
          @include appearance(none);

          display: none;
        }
      }
    }

    .spotlight-results {
      $spotlight-result-padding-scroller-top-bottom: 3px;

      max-height: 380px;
      padding: (12px - $spotlight-result-padding-scroller-top-bottom) $spotlight-padding-sides (20px - $spotlight-result-padding-scroller-top-bottom);
      overflow: hidden auto;
      flex: 1;

      .spotlight-entries {
        .spotlight-entry {
          $spotlight-entry-padding-sides: 12px;
          $spotlight-entry-padding-top-bottom: 9px;
          $spotlight-entry-type-icon-size: 14px;

          margin: 0 (-1 * $spotlight-entry-padding-sides);
          padding-top: $spotlight-result-padding-scroller-top-bottom;
          padding-bottom: $spotlight-result-padding-scroller-top-bottom;

          &[data-selected="true"] {
            .spotlight-entry-link {
              background-color: var(--color-search-spotlight-entry-link-background-default);
              color: var(--color-white);

              &:active {
                background-color: var(--color-search-spotlight-entry-link-background-active);
                transition: background-color linear 100ms;
              }

              &::after {
                background-color: var(--color-white);
                opacity: 1;
              }

              .spotlight-entry-path {
                opacity: 1;
              }

              .spotlight-entry-separator {
                background-color: var(--color-white);
                opacity: .55;
              }
            }
          }

          &.spotlight-entry--page {
            .spotlight-entry-link {
              &::after {
                @include mask-image-internal("common/search/result-type-page.svg");
              }
            }
          }

          &.spotlight-entry--anchor {
            .spotlight-entry-link {
              &::after {
                width: ($spotlight-entry-type-icon-size - 2px);
                height: ($spotlight-entry-type-icon-size - 2px);

                @include mask-image-internal("common/search/result-type-anchor.svg");
              }
            }
          }

          &,
          .spotlight-entry-link {
            display: block;
          }

          .spotlight-entry-link {
            color: var(--color-black);
            letter-spacing: -.1px;
            padding: $spotlight-entry-padding-top-bottom ($spotlight-entry-padding-sides + $spotlight-entry-type-icon-size + 1px) $spotlight-entry-padding-top-bottom $spotlight-entry-padding-sides;
            position: relative;
            border-radius: 3px;

            &::after {
              content: "";
              background-color: var(--color-black);
              width: $spotlight-entry-type-icon-size;
              height: $spotlight-entry-type-icon-size;
              opacity: .25;
              position: absolute;
              top: $spotlight-entry-padding-top-bottom;
              right: $spotlight-entry-padding-sides;

              @include mask-image-fill;
            }

            .spotlight-entry-path,
            .spotlight-entry-title,
            .spotlight-entry-preview {
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              display: block;
            }

            .spotlight-entry-path {
              line-height: 14px;
              opacity: .85;

              @include font-size(12.5px);
            }

            .spotlight-entry-title {
              line-height: 16px;
              margin-top: 6px;

              @include font-size(15px);
            }

            .spotlight-entry-preview {
              line-height: 18px;
              margin-top: 6px;
              margin-bottom: -1px;
              opacity: .8;

              @include font-size(13.5px);
            }

            .spotlight-entry-separator {
              background-color: var(--color-black);
              vertical-align: middle;
              width: 4px;
              height: 8px;
              margin: -1px 5px 0;
              opacity: .35;
              display: inline-block;

              @include mask-image-internal-fill("common/search/result-separator.svg");
            }
          }
        }
      }
    }

    .spotlight-legend {
      user-select: none;
      height: 32px;
      padding: 0 $spotlight-padding-sides;
      display: flex;
      align-items: center;
      flex-direction: row;

      .spotlight-shortcuts {
        display: flex;
        align-items: center;
        flex: 0 0 auto;

        .spotlight-shortcut {
          color: var(--color-search-spotlight-shortcut-text);
          letter-spacing: .1px;
          margin-top: -1px;
          margin-right: 18px;
          flex: 0 0 auto;

          @include font-size(11px);

          &:last-of-type {
            margin-right: 0;
          }

          &.spotlight-shortcut--navigate {
            &::before {
              width: 10px;
              height: 13px;

              @include mask-image-internal("common/search/legend-icon-navigate.svg");
            }
          }

          &.spotlight-shortcut--go {
            &::before {
              width: 10px;
              height: 10px;

              @include mask-image-internal("common/search/legend-icon-go.svg");
            }
          }

          &.spotlight-shortcut--close {
            &::before {
              width: 14px;
              height: 10px;

              @include mask-image-internal("common/search/legend-icon-close.svg");
            }
          }

          &::before {
            content: "";
            background-color: var(--color-search-spotlight-shortcut-text);
            vertical-align: middle;
            margin-top: -2px;
            margin-right: 4px;

            @include mask-image-fill;
          }
        }
      }

      .spotlight-error {
        color: var(--color-red);
        text-align: right;
        margin-top: -2px;
        padding-left: 10px;
        flex: 1;
        display: none;

        @include font-size(12px);
      }
    }
  }

  &::after {
    content: "";
    background-color: var(--color-search-lock-background);
    z-index: 1;
    animation-name: search-lock-animation;
    animation-duration: .1s;
    animation-fill-mode: both;
  }
}

// - Media Queries

// For screens below defined widths

@media screen and (max-width: $screen-medium-width-breakpoint) {
  #search {
    .spotlight {
      padding-top: 76px;
    }
  }
}

@media screen and (max-width: $screen-tiny-width-breakpoint) {
  #search {
    .spotlight {
      padding-top: $header-height;
    }
  }
}

// For screens below defined heights

@media screen and (height <= 600px) {
  #search {
    .spotlight {
      .spotlight-box {
        height: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .spotlight-results {
        max-height: none;
      }
    }
  }
}

// - Keyframes

@include keyframes-fix(search-lock-animation) {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@include keyframes-fix(search-spotlight-animation) {
  0% {
    opacity: 0;
    transform: scale3d(.99, .99, .99) translate3d(0, 1%, 0);
  }

  50% {
    opacity: 1;
  }
}

@include keyframes-fix(search-spotlight-field-spinner-animation) {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}