.button {
    --bubble-offset: -100%;
    --text-color: var(--fg);
    --icon-width: 1.25rem;
    --bubble-opacity: 0;
    --icon-first-width: 1;
    --icon-last-width: 0;
    --padding: .6rem 1.2rem;
    --label-position: 0;
    border-radius: var(--radius-full);
    font-size: 1rem;
    padding: var(--padding);
    display: flex;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--fg);
    text-decoration: none;
    position: relative;
    color: var(--text-color);
    overflow: hidden;
    font-weight: 450;
    line-height: 2;
}

.button:hover {
    --bubble-offset: 0;
    --bubble-opacity: 1;
    --text-color: var(--bg);
    --icon-first-width: 0;
    --icon-last-width: 1;
    --label-position: calc(var(--icon-width) * -1);
}

.button__label {
    transform: translateX(var(--label-position));
    transition: transform ease-in-out .125s;
}

.button::before {
    content: "";
    background-color: var(--fg);
    border-radius: 100%;
    width: 140%;
    height: 400%;
    position: absolute;
    left: 0;
    display: block;
    transform: translate3d(var(--bubble-offset), 0px, 0px);
    transform-style: preserve-3d;
    transition: transform ease-in-out .2s;
    opacity: var(--bubble-opacity);
}

.button__icon {
    transform-origin: left center;
    transition: transform ease-in-out .125s;
}

.button__icon-first {
    transform: scaleX(var(--icon-first-width));
}

.button__icon-last {
    transform: scaleX(var(--icon-last-width));
    position: relative;
    margin-inline-start: calc(var(--icon-width) * -1);
}


/** LINKS **/

.link {
    --opacity: .8;
    --label-position: 0;
    display: flex;
    gap: .5rem;
    align-items: center;
    text-decoration: none;
}

.link:hover {
    --opacity: 1;
    --label-position: .5rem;
}

.link-icon {
    opacity: var(--opacity);
    transition: opacity ease-in-out .125s;
}


.link-label {
    transform: translateX(var(--label-position));
    transition: transform ease-in-out .125s;
}

@media (min-width: 768px) {
    .button {
        --padding: .75rem 1.2rem;
    }
}