Distance Filter: Default (Example)

.distance-filter {
  background-color: $color-light2;
  border-top: 1px solid #e2e8fa;
  box-shadow: 0 4px 4px -2px rgba($color-dark2, 0.2);
  padding: ($gridspacing * 2) ($gridspacing * 3) ($gridspacing * 4);
  // allows the box-shadow to not be gobbled by overflow: hidden on parent
  position: relative;
  z-index: 1;

  @media (min-width: $media-desktop) {
    height: $height-distance-filter;
    padding: ($gridspacing * 2) ($gridspacing * 3) $gridspacing;
  }

  &-x-form {
    display: flex;
    flex-direction: column;
    gap: $gridspacing * 2;
    justify-content: flex-start;
    width: 100%;

    @media (min-width: $media-desktop) {
      align-items: center;
      flex-direction: row;
      gap: $gridspacing * 3;
    }

    .forminput {
      position: relative;

      .forminput-x-input {
        min-width: 12rem;

        & > input,
        & > select {
          background-color: $color-light1;
          border: 1px solid $color-dark4;
        }
      }
    }
  }

  &-x-location {
    padding-bottom: $gridspacing * 2;

    @media (min-width: $media-desktop) {
      padding-bottom: 0;
    }

    .forminput-x-input {
      align-items: center;
      display: flex;
      gap: $gridspacing;
      justify-content: flex-start;
    }
  }

  &-x-legend {
    @include textstyle-bodylargebold;
  }

  &-x-clear,
  &-x-use-location {
    & > .button {
      padding: 0;
    }
  }

  &-x-expand-button {
    @include textstyle-small;
    color: $color-interactive1;
    display: flex;
    align-items: center;
    margin-bottom: $gridspacing * 2;
  }

  &-x-filter-icon {
    fill: $color-interactive1;
    height: 15px;
    width: 16px;
    margin-right: 4px;
  }

  &-x-submit {
    text-align: right;

    button {
      display: block;
      width: 100%;

      @media (min-width: $media-tablet) {
        display: inline-block;
        transform: translateY($gridspacing);
        width: auto;
      }
    }
  }

  &-x-successicon {
    display: none;

    @media (min-width: $media-desktop) {
      display: inline-block;
      height: 32px;
      transform: translateY($gridspacing);
      width: 32px;
    }
  }

  .forminput-x-error {
    padding-top: $gridspacing / 2;
    position: absolute;
    top: 100%;
    left: 0;
  }
}