Embed button for Bootstrap 4

btn-embed-bs4.scss

/**
 * Embed button for Bootstrap 4
 *
 * Description: Embed a button inside a Bootstrap 4 input field.
 *
 * Example (search field with embedded magnifying glass):
 * <div class="has-btn-embed has-btn-embed-right">
 *     <input type="search" class="form-control" id="s" name="s" />
 *     <button type="submit" class="btn btn-embed" aria-label="Search"><i class="fa fa-search" aria-hidden="true"></i></button>
 * </div>
 */
.has-btn-embed {
    $btn-embed-color: $input-placeholder-color !default;
    $btn-embed-padding-x: $input-btn-padding-x !default;
    $btn-embed-padding-x-sm: $input-btn-padding-x-sm !default;
    $btn-embed-padding-x-lg: $input-btn-padding-x-lg !default;

    position: relative;

    &.has-btn-embed-left {
        .form-control {
            padding-left: $input-btn-padding-x + (2 * $btn-embed-padding-x);
        }
        .form-control-sm {
            padding-left: $input-btn-padding-x-sm + (2 * $btn-embed-padding-x-sm);
        }
        .form-control-lg {
            padding-left: $input-btn-padding-x-lg + (2 * $btn-embed-padding-x-lg);
        }
        .btn-embed {
            left: 0;
        }
    }
    &.has-btn-embed-right {
        .form-control {
            padding-right: $input-btn-padding-x + (2 * $btn-embed-padding-x);
        }
        .form-control-sm {
            padding-right: $input-btn-padding-x-sm + (2 * $btn-embed-padding-x-sm);
        }
        .form-control-lg {
            padding-right: $input-btn-padding-x-lg + (2 * $btn-embed-padding-x-lg);
        }
        .btn-embed {
            right: 0;
        }
    }
    .btn-embed {
        background-color: transparent;
        position: absolute;
        top: 0;
        color: $btn-embed-color;
        font-size: $font-size-base;
        line-height: $input-btn-line-height;
        padding: $input-btn-padding-y $btn-embed-padding-x;
        cursor: pointer;
    }
    .btn-embed-sm {
        font-size: $font-size-sm;
        line-height: $input-btn-line-height-sm;
        padding: $input-btn-padding-y-sm $btn-embed-padding-x-sm;
    }
    .btn-embed-lg {
        font-size: $font-size-lg;
        line-height: $input-btn-line-height-lg;
        padding: $input-btn-padding-y-lg $btn-embed-padding-x-lg;
    }
}