.mps-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.75em 1.25em;
    border: 1px solid var(--mps-button-border-color, currentColor);
    border-radius: var(--mps-button-border-radius, 4px);
    background: var(--mps-button-background, transparent);
    color: var(--mps-button-color, inherit);
    font: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.mps-button:hover,
.mps-button:focus-visible {
    background: var(--mps-button-hover-background, rgba(0, 0, 0, 0.06));
    color: var(--mps-button-hover-color, inherit);
    text-decoration: none;
}

.mps-button:active {
    transform: translateY(1px);
}

.mps-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}