/**
 * Copyright IBM Corp. 2016, 2023
 *
 * 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/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use 'vars' as *;

/// @access private
@mixin masthead-top-nav-search {
  @include type-style(heading-02, true);

  position: relative;
  z-index: 1;
  border: solid $spacing-01 transparent;
  background-color: $background;

  color: $text-primary;
  padding-inline: $spacing-05;
  transition: $button-transition;
  white-space: nowrap;

  @include breakpoint(lg) {
    margin-inline-start: $spacing-05;
  }

  &:hover {
    background-color: $background-hover;
    color: $text-primary;
  }

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

  &::before {
    position: absolute;
    display: block;
    background-color: #dcdcdc;
    block-size: $spacing-06;
    content: '';
    inline-size: 0.0625rem;
    inset-block-start: 50%;
    inset-inline-start: calc(-1 * ($spacing-05 - $spacing-01));
    transform: translateY(-50%);
  }

  @include breakpoint-down(800px) {
    display: none;
  }
}

@mixin masthead-search {
  // main nav/search container excluding
  // profile and logo icons - TODO rename this
  :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%;
      }
    }

    a.#{$prefix}--header__name {
      @include masthead-top-nav-search;
    }

    &.#{$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__search--actions {
    position: absolute;
    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;
  }

  // search container
  .#{$prefix}--masthead__search,
  :host(#{$c4d-prefix}-masthead-search) {
    block-size: $spacing-09;
    margin-inline-start: $spacing-09;

    &.#{$prefix}--masthead__search--active,
    &[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;
        inline-size: $spacing-09;
      }

      .#{$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 $background-brand;
          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;
        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,
      .#{$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;
      }
    }

    &.#{$prefix}--masthead__search--active {
      @include breakpoint-down(md) {
        position: absolute;
        inline-size: 100vw;
      }
    }

    &[active] {
      @include breakpoint-down(md) {
        inline-size: 100vw;
        inset-inline-end: 0;
      }
    }
  }

  .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-02 $spacing-03 0 rgba(0, 0, 0, 0.5);
    inline-size: 100%;
    inset-block-start: $spacing-09;
    inset-inline-start: 0;
  }

  .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 {
    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;
    }

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

  .#{$prefix}--header__search--input {
    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;
    }
  }
}