.atm-form-location-filter {
    @apply flex items-stretch w-full rounded-full bg-input font-display;

    .atm-form-input {
        @apply flex-1 min-w-0;

        .form-input {
            @apply w-full h-full border-none bg-transparent rounded-full pl-5 pr-3 py-4;

            &:focus {
                @apply ring-0 outline-none;
            }
        }

        /* The autocomplete dropdown is injected into the input, which is only part of the pill, so let it grow past it. */
        .autocomplete-dropdown {
            @apply left-0 right-auto w-auto min-w-full max-w-64;

            .autocomplete-item {
                @apply px-4 py-3;
            }
        }

        /* Pinned on both sides so a long placeholder is cut off instead of running into the radius dropdown. */
        .form-label {
            @apply left-5 right-2 truncate;
        }
    }

    /* The radius sits in the same pill as the address, separated only by a hairline. */
    .atm-form-select {
        @apply relative flex shrink-0 items-center;

        &::before {
            content: '';
            @apply absolute left-0 top-1/2 h-6 w-px -translate-y-1/2 bg-gray-200;
        }

        .form-select {
            @apply w-auto h-full border-none bg-transparent cursor-pointer py-4 pl-2 pr-7 text-sm;

            &:focus {
                @apply ring-0 outline-none border-none;
            }
        }
    }
}