.ui-input-with-button {
    --input-width: 100%;
    --input-height: 64px;
    --input-text-align: left;
    --button-width: 40%;
    --button-height: calc(var(--input-height) - 6px);
    --button-font-size: 20px;
    --button-position: absolute;
    --button-position-offset: 3px;
    --button-hover-background-color: var(--color-btm-orange);

    @media (width <= 768px) {

    }

    @media (width <= 576px) {
        --button-position: relative;
        --input-text-align: center;
        --input-width: 100%;
        --button-width: 100%;
        --button-height: var(--input-height);
        --button-position-offset: 0;
    }

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    width: var(--input-width);
    border-radius: 12px;
    margin: 0;
    padding: 0;
    border: 0;

    label {
        display: block;
        width: 100%;
        height: var(--input-height);
        border-radius: 12px;
        background-color: #fff;

        input {
            outline: none;
            display: block;
            width: 100%;
            margin: 0;
            border: 0;
            padding: 0 32px;
            font-size: 18px;
            line-height: var(--input-height);
            text-align: var(--input-text-align);
            border-radius: 12px;
            background-color: transparent;
            transition: all .2s linear;
            font-family: 'Poppins', sans-serif;
            color: var(--color-btm-dark-blue);

            &:focus {
                box-shadow: 0 0 0 2px rgb(from var(--color-btm-dark-blue) r g b / 0.45);
            }
        }
    }

    button {
        --color: #fff;
        --spinner-color-default: transparent;
        --spinner-color-highlight: transparent;
        --background-color: #162749;

        position: var(--button-position);
        top: var(--button-position-offset);
        right: var(--button-position-offset);
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--button-width);
        height: var(--button-height);
        padding: 0 24px;
        border: 0;
        border-radius: 12px;
        font-size: var(--button-font-size);
        line-height: 1;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        transition: all 0.2s linear;
        color: var(--color);
        background-color: var(--background-color);
        font-family: 'IBM Plex Sans', sans-serif;

        &:hover {
            --background-color: var(--button-hover-background-color);
        }

        &:before {
            content: '';
            position: absolute;
            display: block;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border-width: 3px;
            border-style: solid;
            border-color: var(--spinner-color-default);
            border-left-color: var(--spinner-color-highlight);
            transition: all 0.3s linear;
            transition-delay: .2s;
            animation: animation-loading-spin .5s infinite linear;
        }

        &.loading {
            --spinner-color-default: rgba(from #fff r g b / 0.5);
            --spinner-color-highlight: #fff;
            --button-width: var(--button-height);

            text-indent: -9999px;
            pointer-events: none;
        }
    }
}