@use "../../../00-base/01-helpers" as *;
@use "../../../01-atoms/05-forms/forms-helpers" as *;
@use "../../../01-atoms/02-text/00-headings/headings-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Search form
// *
////////////////////////////////////////////////////////////////////////////////

.main form.search-form {
  position: relative;

  // * Search simple
  // ===========================================================================

  & > .form__group {
    position: relative;
    margin: 0 auto var(--gap-md) auto;

    .form-type--search {
      @include floating-labels-item-label;
      @include floating-labels-item-field;
    }

    input[type="text"],
    input[type="search"] {
      padding-right: rem(50);
    }

    [type="submit"] {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0;
      height: rem(50);
      width: rem(50);
      border: 0 none;
      text-align: center;
      background: transparent none;

      @include icon((
        icon: search,
        size: 22,
        color: hsl(var(--clr-gray-light-3)),
      ));

      &::before {
        position: absolute;
        left: 0;
        width: 100%;
      }

      &:focus-visible,
      &:hover {
        &::before {
          color: hsl(var(--clr-spot-1));
        }
      }
    }
  }

  // * Help
  // ===========================================================================

  .search-help-link {
    display: inline-block;
    margin-bottom: var(--gap-md);

    @include icon((
      icon: circle-question,
      color: hsl(var(--clr-spot-1)),
      element: "before",
      margin: -1px 5px 0 0
    ));
  }

  // * Advanced
  // ===========================================================================

  .search-advanced {
    margin-bottom: var(--gap-md);

    fieldset {
      padding: 0;
      margin: 0;
      border: 0;
    }

    legend {
      @include h3;
      padding: 0;
      margin: 0 0 rem(10) 0;
    }

    .criterion legend {
      @include h4;
      margin: 0 0 rem(5) 0;
      font-weight: var(--fw-normal);
    }

    .form-radiobuttons,
    .form-checkboxes {
      label {
        display: inline-block;
      }
    }
  }

  .details-wrapper {
    padding: rem(20);
  }
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: tablet & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-sm {
  .main form.search-form {
    // * Advanced
    // =========================================================================

    .search-advanced {
      .details-wrapper {
        display: flex;
        flex-direction: columns;
        flex-wrap: wrap;
        padding: rem(20) 0;

        // first layer of fieldsets as columns

        & > fieldset {
          padding: 0 rem(20);
          width: 25%;

          &:first-child {
            width: 50%;
          }
        }

        .action {
          padding: 0 rem(20);
          width: 100%;
        }
      }
    }
  }
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: desktop & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-md {
  .main form.search-form {
    & > .form__group {
      max-width: 50%;
    }

    .search-help-link {
      position: absolute;
      right: 0;
      top: rem(15);
    }
  }
}
