@use '../../../01-core' as *;


.uw-header-search {
  padding: 0 var(--size-1);
  right: 0;
  &:has(input.uw-input--checkboxform:checked) {
    background-color: var(--uw-black);
    z-index: var(--layer-drawer);
  }

  @media(min-width: $screen-md) {
    padding: 0;
    position: relative;
    right: inherit;
    top: inherit;
    width: inherit;
  }

  form label {
    margin: 0;
    position: absolute;
    right: 0;
    top: -3.4rem;
    @media(min-width: $screen-md) {
      position: relative;
      right: inherit;
      top: inherit;
    }

    &[for="uw-select-site"] {
      background-color: var(--uw-white);
    }
  }

  .uw-search--form {
    display: grid;
    gap: var(--size-105);
    grid-template-columns: auto 8rem 2.125rem;
    margin: 0;
    position: relative;
    width: 100%;
    @media(min-width: $screen-md) {
      border: 1px solid var(--uw-white);
      display: inline-flex;
      gap: inherit;
      grid-template-columns: inherit;
      height: inherit;
      width: inherit;
    }

    .option {
      display: inherit;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      margin-left: inherit;
      padding-left: inherit;
    }

    .form-item {
      margin: inherit;
      opacity: 0;
      @media(min-width: $screen-md) {
        opacity: 1;
      }
    }

    .form-type-select {
      height: 0;
      left: -1000rem;
      opacity: 0;
      overflow: hidden;
      position: absolute;
    }

    .uw-input--checkboxform {
      margin: inherit;
    }

    .uw-search--checkboxlabel {
      background-color: transparent;
      border: 1px solid var(--uw-white);
      border-radius: 0;
      box-shadow: none;
      color: var(--uw-white);
      display: block;
      @media(min-width: $screen-md) {
        display: none;
      }
      font-weight: 200;
      height: 2.375rem;
      margin: 0;
      overflow: hidden;
      padding: 0;
      transition: all 300ms;
      width: 2.125rem;

      &::after {
        @include svg-background(search_2-white);
        background-position: 8px 11px;
        background-repeat: no-repeat;
        background-size: 40%;
        content: '';
        display: block;
        height: 2rem;
        width: 2.125rem;
      }

      &:hover,
      &:focus {
        background: var(--uw-white);

        &::after {
          @include svg-background(search_2);
        }
      }
    }

    .uw-search-button__wrapper {
      border-width: 0;
      display: none;
      height: 2.25rem;
      position: relative;
      width: 2.125rem;
      @media(min-width: $screen-md) {
        display: block;
      }
      &::after {
        @include svg-background(search_2-white);
        background-position: 8px 11px;
        background-repeat: no-repeat;
        background-size: 45%;
        color: var(--uw-white);
        content: '';
        display: block;
        font-weight: 200;
        height: 100%;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: var(--layer-background);
      }
      &:hover,
      &:focus {
        &::after {
          @include svg-background(search_2-white);
          background-color: var(--gray-6);
          color: var(--uw-white);
        }
      }
      &:focus-within {
        &::after {
          @include svg-background(search_2-white);
          background-color: var(--gray-6);
          color: var(--uw-white);
        }
      }

      .button--submit {
        &__form {
          background-color: inherit;
          background-image: none;
          border: 1px solid var(--uw-white);
          @media(min-width: $screen-md) {
            border-width: 0;
          }
          box-shadow: none;
          cursor: pointer;
          display: inherit;
          font-family: var(--font-book);
          font-size: inherit;
          font-weight: 200;
          height: 2.25rem;
          letter-spacing: inherit;
          line-height: inherit;
          margin: 0;
          max-width: inherit;
          padding: inherit;
          position: absolute;
          right: 0;
          text-align: center;
          text-decoration: none;
          text-shadow: none;
          text-transform: uppercase;
          top: 0;
          transition: background 300ms cubic-bezier(0.4, 0, 1, 1);
          vertical-align: top;
          white-space: normal;
          width: 2.125rem;
          z-index: var(--layer-content);
        }
      }
    }
    .form-item-search-type {
        width:0;
    }
    .uw-input--search {
      background-color: var(--uw-black);
      border: 1px solid var(--uw-white);
      border-radius: 0;
      box-shadow: none;
      color: var(--uw-white);
      display: block;
      font-family: var(--font-systemmedium);
      font-size: var(--font-size-0);
      font-weight: 200;
      height: 2.25rem;
      line-height: 1.25rem;
      overflow: hidden;
      padding: var(--size-1);
      position: relative;
      transition: all 0.3s ease;
      @media(min-width: $screen-md) {
        border-width: 0;
        display: block;
        font-size: var(--font-size-000);
        width: var(--size-8);
      }

      &::placeholder {
        color: var(--uw-white);
        opacity: 0.75;

        &:hover {
          color: var(--uw-black);
        }
      }

      &:hover {
        background: var(--uw-white);
        color: var(--uw-black);

        &::placeholder {
          color: var(--uw-black);
        }

        ~ .uw-search-button__wrapper {
          &::after {
            @include svg-background(search_2);
            background-color: var(--uw-white);
          }
        }
      }

      &:focus {
        background: var(--uw-white);
        border-width: 0;
        color: var(--uw-black);

        &::placeholder {
          color: var(--uw-black);
        }
      }
    }

    .uw-select--search {
      appearance: none;
      background-color: var(--uw-black);
      border-radius: 0;
      color: var(--uw-white);
      display: inline-block;
      font-family: var(--font-systemmedium);
      font-size: var(--font-size-000);
      height: 2.25rem;
      opacity: 1;
      outline: none;
      padding-left: var(--size-1); // LTR
      padding-right: 0;

      &:hover,
      &:focus {
        background-color: var(--uw-white);
        color: var(--uw-black);
      }
      @media(min-width: $screen-md) {
        overflow: hidden;
        padding: 0;
        transition: opacity 0.5s ease;
        width: 0;
      }
    }

    .form-actions {
      margin: 0;
      opacity: 0;
      @media(min-width: $screen-md) {
        opacity: 1;
      }
      padding: 0;
      width: 2.125rem;
    }

    .button {
      color: transparent !important;
    }

    .uw-input {
      &.uw-input--checkboxform {
        display: block;
        height: 0;
        left: -1000rem;
        overflow: hidden;
        position: absolute;
        &:checked {
          ~ .uw-search--checkboxlabel {
            background: var(--uw-white);
            &::after {
              @include svg-background(mobile-arrow-up);
              background-position: 10px 14px;
              background-repeat: no-repeat;
              background-size: 34%;
              color: var(--uw-white);
              content: '';
              display: block;
              line-height: var(--size-3);
              text-align: center;
            }

            @media(min-width: $screen-md) {
              display: none;
            }
          }

          ~ .form-item {
            animation: fadeIn 500ms;
            display: block;
            opacity: 1;
            &.form-type-textfield {
              display: block;
              .uw-input--search {
                border: var(--size-xs) solid var(--uw-white);
                display: inline-block !important;
                width: 100%;
              }
            }

            &.form-type-select {
              display: block;
              height: inherit;
              left: inherit;
              opacity: 1;
              overflow: hidden;
              position: relative;
              .uw-select--search {
                appearance: none;
                background-color: var(--uw-black);
                border-color: var(--uw-white);
                color: var(--uw-white);
                display: inline-block;
                font-family: var(--font-book);
                font-size: var(--font-size-0);
                font-weight: 200;
                height: 2.25rem;
                line-height: 1.25rem;
                margin: 0 0.725rem 0 0;
                opacity: 1;
                outline: none;
                overflow: hidden;
                padding: var(--size-1);
                transition: opacity 0.5s ease;
                width: var(--size-16);
                &::placeholder {
                  color: var(--uw-black);
                }

                option {
                  color: var(--uw-black);
                }

                @media(min-width: $screen-md) {
                  display: none;
                  font-size: var(--font-size-000);
                }
              }
            }
          }

          ~ .form-actions {
            margin: 0;
            opacity: 1;
            .uw-search-button__wrapper {
              animation: fadeIn 500ms;
              border-width: 0;
              display: inherit;
              @media(min-width: $screen-md) {
                margin-right: 0;
              }

              .button--submit {
                &__form {
                  position: relative;
                }
              }
            }
          }
        }
      }
    }

    .uw-search{
      &--hidelabel {
        display: block;
        height: 0;
        left: -1000rem;
        overflow: hidden;
        position: absolute;
      }

      &--checkboxlabel__labeltext {
        color: var(--uw-white);
        height: 0;
        left: -1000rem;
        overflow: hidden;
        position: absolute;
      }

      &--labeltext {
        color: var(--uw-white);
      }
    }

    &:focus-within {
      @media(min-width: $screen-md) {
        .form-item-search-type {
          width:auto;
        }
        .uw-input--search {
          transition: width 0.3s ease;
          width: 8rem;
          &:hover {
            ~ .button--submit {
              &__form {
                color: var(--uw-white);
              }
            }
          }
        }
        .form-type-select {
          height: 2.25rem;
          left: inherit;
          opacity: 1;
          overflow: inherit;
          position: relative;
          width: var(--size-15);
        }
        .uw-select--search {
          border-width: 0;
          color: var(--uw-white);
          display: inline-block;
          height: 2.25rem;
          opacity: 1;
          outline: none;
          padding-left: var(--size-1); // LTR
          padding-right: 0;
          width: var(--size-16);
          &:hover,
          &:focus {
            background-color: var(--uw-white);
            border-width: 0;
            color: var(--uw-black);
          }
        }
        .form-action {
          height: inherit;
          margin: 0;
          opacity: 1;
          padding: 0;
          transition: opacity 0.5s ease;
          width: inherit;
        }
        .button--submit {
          &__form {
            border-color: var(--gray-6);
            border-width: 0;
            height: 2.25rem;
            top: 0;
          }
        }
      }
    }
  }
}