.button{
    cursor              : pointer;
    color               : var(--color-white);
    background-color    : var(--color-brand-2);
    padding             : 1em 2.5em;
    display             : inline-flex;
    border              : 0;
    font-size           : var(--font-size-200);
    font-weight         : var(--font-weight-semi-bold);
    line-height         : 1;

    /* BUTTON COLOR INVERSE */
    .inverse &{
        color               : var(--color-brand-2);
        background-color    : var(--color-white);

        &:hover,
        &:focus-visible {
            color               : var(--color-white);
            background-color    : var(--color-brand-2);
        }
    }
}
 
.button:hover,
.button:focus-visible{
    background-color    : var(--color-white);
    color               : var(--color-brand-2);
    transition          : all 500ms ease-in-out, all 500ms ease-in-out;
}