[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: $fhi-core-px * 16;
    width: $fhi-core-px * 16;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}

.fhi-search {
    &__form-control {
        height: 100%;
        min-height: 0;

        &:focus {
            border-radius: $fhi-core-px * 22;
        }
    }

    &__btn {
        @include fhi-btn-dark;
        border-radius: $fhi-core-px * 22;
        flex-shrink: 0;
        margin-left: $fhi-core-space-1;
        padding-right: $fhi-core-space-3;
        padding-left: $fhi-core-space-3;
    }

    &__btn-icon {
        @extend [class*="icon-"];
        background-image: url('data:image/svg+xml;utf-8,%3Csvg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M23.8125 22.5938L17.7656 16.5469C17.6719 16.4531 17.5312 16.4062 17.3906 16.4062H16.875C18.5156 14.625 19.5 12.3281 19.5 9.75C19.5 4.40625 15.0938 0 9.75 0C4.35938 0 0 4.40625 0 9.75C0 15.1406 4.35938 19.5 9.75 19.5C12.2812 19.5 14.625 18.5156 16.3594 16.9219V17.3906C16.3594 17.5781 16.4062 17.7188 16.5 17.8125L22.5469 23.8594C22.7812 24.0938 23.1094 24.0938 23.3438 23.8594L23.8125 23.3906C24.0469 23.1562 24.0469 22.8281 23.8125 22.5938ZM9.75 18C5.15625 18 1.5 14.3438 1.5 9.75C1.5 5.20312 5.15625 1.5 9.75 1.5C14.2969 1.5 18 5.20312 18 9.75C18 14.3438 14.2969 18 9.75 18Z" fill="%23ffffff"/%3E%3C/svg%3E');
    }
}

@include media-breakpoint-up(sm) {
    .fhi-search__btn {
        margin-left: $fhi-core-space-2;
    }

    .fhi-search--xl {
        .fhi-search__form-control {
            &:focus {
                border-radius: $fhi-core-px * 34;
            }
        }

        .fhi-search__btn {
            margin-top: $fhi-core-px * 12;
            margin-bottom: $fhi-core-px * 12;
        }
    }
}