.advanced-search-form {
  @include grid-row-nest;
  position: relative;

  @include breakpoint(large) {
    .filter {
      @include grid-column;
      width: 25%;
    }

    .date-filters {
      float: left;
      width: 25%;

      .filter {
        width: 100%;
      }

      .custom-date-filters {
        clear: both;
      }
    }

    .submit {
      width: 25%;
    }
  }

  > [aria-expanded] {
    @include xy-gutters;
    color: $link;
    cursor: pointer;
    margin-top: $line-height;
    margin-bottom: $line-height;

    @include breakpoint(medium) {
      float: right;
      margin-bottom: 0;
      margin-top: $line-height / 4;
      position: absolute;
      right: 0;
    }

    &:focus {
      outline: $outline-focus;
    }
  }

  .general-search,
  .filter,
  .submit {
    @include grid-column-gutter;
  }

  select {
    height: $line-height * 2;
  }
}

.advanced-search-form {
  @include grid-row-nest;
  display: flex;
  flex-direction: column;

  @include breakpoint(large) {
    .filter {
      @include grid-column;
      width: 25%;
    }

    .date-filters {
      float: left;
      width: 25%;

      .filter {
        width: 100%;
      }

      .custom-date-filters {
        clear: both;
      }
    }

    .submit {
      width: 25%;
    }
  }

  > [aria-expanded] {
    @include xy-gutters;
    color: $link;
    cursor: pointer;
    margin-top: $line-height;
    margin-bottom: $line-height;
    max-width: max-content;

    @include breakpoint(medium) {
      align-self: flex-end;
      margin-bottom: 0;
      margin-top: $line-height / 4;
    }

    &:focus {
      outline: $outline-focus;
    }
  }

  .general-search,
  .filter,
  .submit {
    @include grid-column-gutter;
  }

  select {
    height: $line-height * 2;
  }
}

Fix advanced search button on large screens
Fix advanced search button on large screens

Since we were using `position: absolute` to position the button to the
right, we were assuming there was enough screen space on the left so
other elements (mainly, order selector links) could be there.

However, that wasn't always the case. In some languages, the texts
appearing on the left of the button were much larger than in English,
meaning their text and the button text could overlap. Even in English,
users could experience the same issue depending on their font size
preferences and the size of their screens.

The easiest solution is to move the button to its own line, so its text
doesn't overlap.
