.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-family: inherit;
    --bs-btn-font-size: var(--fs-350);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-info-rgb), 1);

    overflow: hidden;
}

@media (min-width: 768px) {

    .btn span {
        --hover-move-left: -0.75rem; 
        --transition-time: .2s;
        display: inline-block; 
        position: relative;
        left: 0;
        transition: all var(--transition-time) linear;
    }

    .btn span::after {
        font: var(--fa-font-light);
        content: '\f054';
        position: absolute;
        top: 50%;
        right: -2.5rem;
        transform: translateY(-50%);
        opacity: 0;

        transition: right var(--transition-time) linear, opacity calc(var(--transition-time) * 1.25) linear;
    }

    .btn:hover span::after {
        right: -1.5rem;
        opacity: 1;
    }

    .btn:hover span {
        left: var(--hover-move-left);
    }

}

.btn-primary {
    --bs-btn-color: var(--bs-gray-500);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-gray-500);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 1);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--btn-info-rgb);
    --bs-btn-active-color: var(--bs-gray-500);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .8);
    --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .8);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-gray-500);
    --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), .65);
    --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), .65);
}

.btn-white {
    --bs-btn-color: var(--bs-gray-900);
    --bs-btn-bg: var(--bs-gray-500);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-gray-900);
    --bs-btn-hover-bg: rgba(var(--bs-gray-500-rgb), 1);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--btn-info-rgb);
    --bs-btn-active-color: var(--bs-black);
    --bs-btn-active-bg: rgba(var(--bs-gray-500-rgb), 1);
    --bs-btn-active-border-color: rgba(var(--bs-gray-500-rgb), 1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-gray-700);
    --bs-btn-disabled-bg: rgba(var(--bs-gray-500-rgb), .65);
    --bs-btn-disabled-border-color: rgba(var(--bs-gray-500-rgb), .65);
}