/**
 * Copyright IBM Corp. 2016, 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
*/

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/styles/scss/components/ui-shell/header';
@use '@carbon/styles/scss/components/ui-shell/side-nav';
@use '@carbon/styles/scss/components/dropdown';
@use '@carbon/styles/scss/components/select';
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../masthead/vars' as *;

@mixin react-autosuggest-suggestion {
  display: flex;
  block-size: $spacing-09;
  color: $text-primary;

  span {
    font-weight: 600;
  }

  .#{$prefix}--container-class {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0 $spacing-05;
    border-block-end: 1px solid $layer-01;

    &:focus {
      outline: none;
    }
  }
  @media screen and (prefers-reduced-motion: reduce) {
    &:hover {
      background-color: $background-hover;
      cursor: pointer;
      transition: none;
    }
  }

  &:hover {
    background-color: $background-hover;
    cursor: pointer;
    transition: $search-transition-timing;
  }

  .#{$prefix}--container-highlight-class:not(:hover),
  &:focus,
  &:active {
    outline: $spacing-01 solid $focus;
    outline-offset: -#{$spacing-01};
  }

  &:last-of-type {
    .#{$prefix}--container-class {
      border-block-end: none;
    }
  }
}

@mixin search-with-typeahead {
  // main nav/search container excluding
  // profile and logo icons for masthead use
  :host(#{$c4d-prefix}-top-nav),
  .#{$prefix}--header__search {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    block-size: 100%;

    &.#{$prefix}--masthead__platform {
      .#{$prefix}--header__nav {
        padding-inline-start: 0;

        &::before {
          display: none;
        }
      }

      .#{$prefix}--masthead__platform-name {
        z-index: 1;
        background: $background;
        block-size: 100%;
      }
    }

    &.#{$prefix}--masthead__header--search-active {
      .#{$prefix}--header__nav-container {
        display: none;
      }

      + .#{$prefix}--header__profile {
        display: none;

        @include breakpoint(md) {
          display: flex;
        }
      }
    }
  }

  .#{$prefix}--header__search:not(
      .#{$prefix}--masthead__header--search-active
    ) {
    @include breakpoint(md) {
      overflow-x: visible;
    }
  }

  .#{$prefix}--header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: $spacing-01 solid transparent;
    background-color: $background;

    > {
      svg {
        position: relative;
        fill: $icon-secondary;
      }
    }

    &:hover {
      background-color: $background-hover;
      transition-duration: $search-transition-timing;

      > {
        svg {
          fill: $icon-primary;
        }
      }
    }

    &:focus,
    &:active {
      border-color: $focus;
      background-color: $background-hover;
    }
  }

  .#{$prefix}--header__search--actions {
    position: absolute;
    display: flex;
    background-color: $background;
    inset-block-start: 0;
    inset-inline-end: 0;

    .#{$prefix}--header__search--search,
    .#{$prefix}--header__search--close {
      padding: 0;

      background-color: $background;
      color: $icon-secondary;

      &:hover {
        background-color: $background-hover;

        svg[focusable='false'][aria-hidden='true'] {
          fill: $icon-primary;
        }
      }
      // prevent tooltip from showing on hover
      &.#{$prefix}--btn--icon-only.#{$prefix}--tooltip--visible,
      &.#{$prefix}--btn--icon-only.#{$prefix}--tooltip--a11y.#{$prefix}--tooltip__trigger {
        &::before,
        .#{$prefix}--assistive-text {
          display: none;
        }
      }
    }
  }

  .#{$prefix}--header__profile .#{$prefix}--header__action:focus,
  .#{$prefix}--header__search--actions
    .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
    border-color: $focus;
  }

  button.#{$prefix}--header__search--close.#{$prefix}--header__action[part='close-button'] {
    display: none;
    overflow: hidden;
    border: none;
    inline-size: 0;

    svg {
      position: relative;
    }
  }

  .#{$prefix}--header__search--search {
    inline-size: $spacing-09;
    outline: none;
  }

  :host(#{$c4d-prefix}-search-with-typeahead) {
    position: relative;
    display: block;
    block-size: $spacing-09;
    margin-inline-start: $spacing-09;
    outline: none;

    .#{$c4d-prefix}-ce__search__list {
      overflow: hidden;
      margin: 0;
      block-size: 0;
    }

    &[open] .#{$c4d-prefix}-ce__search__list {
      padding: 0;
      block-size: auto;
    }

    &[active] {
      z-index: 999;
      inline-size: 100%;
      margin-inline-start: 0;

      button.#{$prefix}--header__search--close.#{$prefix}--header__action[part='close-button'] {
        display: inline-flex;
        min-inline-size: $spacing-09;
      }

      button.#{$prefix}--header__search--close.#{$prefix}--header__action.#{$prefix}--header__search--hide {
        display: none;
      }

      .#{$prefix}--header__search--actions {
        z-index: 10001;
      }

      .react-autosuggest__container {
        &::after {
          position: absolute;
          z-index: 10002;
          display: block;
          block-size: $spacing-01;
          border-block-end: $spacing-01 solid $border-interactive;
          content: '';
          inline-size: 100%;
          inset-block-end: 0;
          inset-inline-start: 0;
        }
      }

      .#{$prefix}--header__search--input {
        z-index: 10000;
        display: flex;
        flex: 1;
        padding: 0 $spacing-05;
        background-color: $layer-01;
        block-size: $spacing-09;
        color: $text-primary;
        outline: $spacing-01 solid transparent;
        outline-offset: -#{$spacing-01};

        &::placeholder {
          color: $text-placeholder;
          inset-inline-start: 0;
          opacity: 1;
          transition-delay: 200ms;
          transition-duration: 112ms;
        }
      }

      .#{$prefix}--header__search--close {
        display: inline-flex;
        inline-size: $spacing-09;
      }

      .#{$prefix}--header__search--close,
      .#{$prefix}--header__search--search {
        border: $spacing-01 solid transparent;

        &:focus,
        &:active {
          border: $spacing-01 solid $focus;
        }
      }

      .#{$prefix}--header__action {
        background-color: $layer-01;
        transition-delay: 380ms;
        transition-duration: 112ms;
        transition-property: width;
      }
    }

    &[scope-value] {
      .react-autosuggest__suggestions-container {
        @include breakpoint-down(lg) {
          inline-size: calc(100% - #{$spacing-09});
          inset-inline-start: $spacing-09;
        }
      }
    }
    @media screen and (prefers-reduced-motion: reduce) {
      &[leadspace-search] {
        background: $layer-01;
        inset-block-start: 0;
        outline: $spacing-01 solid transparent;
        transition: none;

        &:focus {
          outline: $spacing-01 solid $focus;
          .#{$prefix}--header__search--actions {
            border-block-end: none;
          }
        }

        &[unfocused] {
          outline: none;
          .#{$prefix}--header__search--actions {
            border-block-end: 1px solid $toggle-off;
          }
        }

        .#{$prefix}--header__search--actions {
          display: flex;
          border-block-end: 1px solid $toggle-off;
          inline-size: 100%;
        }

        .#{$prefix}--search-magnifier-icon {
          position: absolute;
          z-index: 2;
          fill: var(--cds-icon-secondary, #525252);
          inset-block-start: 50%;
          inset-inline-start: $spacing-05;
          pointer-events: none;
          transform: translateY(-50%);
        }

        form {
          inline-size: 100%;
          padding-inline-start: $spacing-09;
        }

        .react-autosuggest__container {
          &::after {
            content: none;
          }
        }

        .react-autosuggest__suggestions-container {
          inset-block-start: calc($spacing-09 + 2px);

          @include breakpoint(md) {
            inset-block-start: to-rem(66px);
          }
        }

        .react-autosuggest__suggestions-list {
          background-color: $layer-01;
        }

        .#{$prefix}--header__search--input {
          border-block-end: none;
          color: $text-primary;
        }

        &[large] {
          @include breakpoint(md) {
            block-size: $spacing-09;
          }

          form {
            inline-size: 100%;
            padding-inline-start: $spacing-09;

            @include breakpoint(md) {
              block-size: $spacing-09;
            }
          }

          .#{$prefix}--header__search--input {
            @include breakpoint(md) {
              block-size: $spacing-09;
            }
          }

          .#{$prefix}--header__search--close {
            @include breakpoint(md) {
              block-size: $spacing-09;
            }
          }

          .react-autosuggest__suggestions-container {
            inset-block-start: to-rem(50px);

            @include breakpoint(md) {
              inset-block-start: to-rem(50px);
            }
          }
        }
      }
    }

    &[leadspace-search] {
      background: $layer-01;
      inset-block-start: 0;
      outline: $spacing-01 solid transparent;
      transition: background-color $duration-fast-02
          motion(standard, productive),
        outline $duration-fast-02 motion(standard, productive),
        top $duration-fast-02 motion(entrance, productive);

      &:focus {
        outline: $spacing-01 solid $focus;
        .#{$prefix}--header__search--actions {
          border-block-end: none;
        }
      }

      &[unfocused] {
        outline: none;
        .#{$prefix}--header__search--actions {
          border-block-end: 1px solid $toggle-off;
        }
      }

      .#{$prefix}--header__search--actions {
        display: flex;
        border-block-end: 1px solid $toggle-off;
        inline-size: 100%;
      }

      .#{$prefix}--search-magnifier-icon {
        position: absolute;
        z-index: 2;
        fill: var(--cds-icon-secondary, #525252);
        inset-block-start: 50%;
        inset-inline-start: $spacing-05;
        pointer-events: none;
        transform: translateY(-50%);
      }

      form {
        inline-size: 100%;
        padding-inline-start: $spacing-09;
      }

      .react-autosuggest__container {
        &::after {
          content: none;
        }
      }

      .react-autosuggest__suggestions-container {
        inset-block-start: calc($spacing-09 + 2px);

        @include breakpoint(md) {
          inset-block-start: to-rem(66px);
        }
      }

      .react-autosuggest__suggestions-list {
        background-color: $layer-01;
      }

      .#{$prefix}--header__search--input {
        border-block-end: none;
        color: $text-primary;
      }

      &[large] {
        @include breakpoint(md) {
          block-size: $spacing-09;
        }

        form {
          inline-size: 100%;
          padding-inline-start: $spacing-09;

          @include breakpoint(md) {
            block-size: $spacing-09;
          }
        }

        .#{$prefix}--header__search--input {
          @include breakpoint(md) {
            block-size: $spacing-09;
          }
        }

        .#{$prefix}--header__search--close {
          @include breakpoint(md) {
            block-size: $spacing-09;
          }
        }

        .react-autosuggest__suggestions-container {
          inset-block-start: to-rem(50px);

          @include breakpoint(md) {
            inset-block-start: to-rem(50px);
          }
        }
      }
    }

    &[sticky-search] {
      inset-block-start: $spacing-11;
    }

    &[theme-sticky] {
      inset-block-start: $spacing-05;

      @include breakpoint(md) {
        inset-block-start: $spacing-07;
      }

      @include breakpoint(lg) {
        inset-block-start: $spacing-09;
      }
    }
  }

  .react-autosuggest__container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    block-size: $spacing-09;
  }

  .react-autosuggest__suggestions-container {
    position: absolute;
    box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
    inline-size: 100%;
    inset-block-start: $spacing-09;
    inset-inline-start: 0;
    max-block-size: 80vh;
    overflow-y: auto;
  }

  .react-autosuggest__suggestions-list {
    background-color: $background;
  }

  .react-autosuggest__section-title {
    display: flex;
    align-items: center;
    padding: 0 $spacing-05;
    background-color: $background;
    block-size: $spacing-09;
    border-block-end: solid 1px $layer-01;
    border-block-start: solid 1px $toggle-off;
    color: $text-secondary;

    @include type-style('body-compact-01');
  }

  .react-autosuggest__suggestion {
    @include react-autosuggest-suggestion;
  }

  .#{$prefix}--header__search--input {
    @include font-family('sans');

    padding: 0;
    border: none;
    border-block-end: 1px solid $layer-accent-01;

    font-size: $spacing-05;

    inline-size: 0;
    line-height: 1.375rem;
    transition: 120ms;

    &::placeholder {
      position: relative;
      inset-inline-start: $spacing-11;
      opacity: 0;
    }
  }
}

:host(#{$c4d-prefix}-search-with-typeahead-item) {
  @include react-autosuggest-suggestion;

  span {
    white-space: pre;
  }

  &[groupTitle] {
    @include type-style('body-01', true);

    color: $text-helper;

    &:active {
      outline: none;
    }

    &:hover {
      background: none;
      cursor: auto;
    }
  }

  &[lastBeforeGroup] {
    .#{$prefix}--container-class {
      border-block-end-color: $toggle-off;
    }
  }
}

:host(#{$c4d-prefix}-search-with-typeahead-item[alternate]) {
  border-block-start: 1px solid $border-subtle-01;
}

:host(#{$c4d-prefix}-scoped-search-dropdown),
:host(#{$c4d-prefix}-scoped-search-dropdown-mobile) {
  display: flex;
  border-inline-end: 1px solid $layer-accent-01;

  .#{$prefix}--list-box {
    block-size: $spacing-09;
    max-block-size: none;
  }

  .#{$prefix}--list-box__field:focus {
    outline: none;
  }
}

:host(#{$c4d-prefix}-scoped-search-dropdown) {
  @include breakpoint-down(lg) {
    display: none;
  }

  .#{$prefix}--list-box__menu {
    inline-size: fit-content;
  }
}

:host(#{$c4d-prefix}-scoped-search-dropdown-mobile) {
  inline-size: $spacing-09;

  .#{$prefix}--select-input {
    padding: 0;
    color: transparent;
  }

  .#{$prefix}--select__arrow {
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    text-align: center;
  }

  .#{$prefix}--form__helper-text {
    inline-size: 0;
  }

  @include breakpoint(lg) {
    display: none;
  }
}