$header-search-height: 46px;
$bp-header-search-reduce-button: "max-width: 700px";

@use "00-base/configure" as *;

.ma__header-search {
  display: inline-block;
  max-width: 560px;
  position: relative;
  width: 100%;

  &__label {

    @include ma-visually-hidden;
  }

  &__input {

    @include input-base;
    font-size: $fonts-medium;
    height: $header-search-height;
    padding-right: 128px;
    padding-left: 1rem;
    width: 100%;
    border-color: var(--mf-c-bd);

    &::-ms-clear {
      display: none;
    }

    @media ($bp-header-search-reduce-button) {
      padding-right: 60px
    }
  }

  .ma__button-search {

    &, &--secondary {
      border: 2px solid;
      display: block;
      height: $header-search-height;
      padding-top: 0;
      padding-bottom: 0;
      position: absolute;
        right: 0;
        top: 0;

      @media ($bp-header-search-reduce-button) {

        span {

          @include ma-visually-hidden;
        }
      }
    }

  }

  &-suggestions {

    position: absolute;
    width: 100%;
    border: 2px solid var(--mf-c-bd);
    margin-top: -2px;
    z-index: $z-dropdown;

    &-helper {

      @include ma-visually-hidden;
    }

    &.hidden {
      display: none;
    }

    &-list {
      padding: 0;
      margin: 0;
      list-style: none;
      background-color: var(--mf-c-bg);

      svg {
        width: $fonts-medium;
        height: $fonts-medium; 
        margin-right: 1rem;
        flex-shrink: 0;
      }
    }
  }

      &-button {

      @include ma-button-reset;
      display: flex;
      align-items: center;
      text-align: left;
      padding: 0.5rem 1rem;
      border-top: 1px solid var(--mf-c-bd);
      font-size: $fonts-medium;

      &:hover {
        background-color: var(--mf-c-bg-section);
      }

      &-text {
        display: block;
      }

      &-input {
        font-weight: $fonts-bold;
      }

      &-scope {
        font-size: $fonts-small;
        color: var(--mf-c-font-detail);
        font-style: italic;
        margin-left: 0.5rem;
      }
    }

    &-suggestion {

      &-option {

        @include ma-button-reset;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 0.5rem 1rem;
        font-size: $fonts-medium;
        border-top: 1px solid var(--mf-c-bd);
        width: 100%;
  
        &:hover, &.hover {
          background-color: var(--mf-c-bg-section);
        }
  
        &-text {
          display: block;
        }
  
        &-input {
          font-weight: $fonts-bold;
        }
  
        &-scope {
          font-size: $fonts-small;
          color: var(--mf-c-font-detail);
          font-style: italic;
          margin-left: 0.5rem;
        }
      }
    }

  .ma__narrow-template & {
    margin-bottom: 75px;
    max-width: 400px;
  }
}