.mf-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:0 1.5rem;

    border:1px solid transparent;
    border-radius:var(--mf-radius);

    font-family:inherit;
    font-size:1rem;
    font-weight:600;

    line-height:1;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        opacity .25s ease;
}

.mf-button:hover{
    transform:translateY(-2px);
}

.mf-button:focus-visible{
    outline:3px solid
        color-mix(
            in srgb,
            var(--mf-primary) 40%,
            transparent
        );

    outline-offset:3px;
}

.mf-button--primary{
    background:var(--mf-primary);
    color:var(--mf-light);
}

.mf-button--primary:hover{
    opacity:.9;
}

.mf-button--secondary{
    background:transparent;
    border-color:currentColor;
    color:var(--mf-dark);
}