.button {
    --button-color: var(--wp--preset--color--type-primary);
    --button-accent-color: var(--wp--preset--color--background-1);
    
    width: fit-content;
    min-width: 140px;
    height: fit-content;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-inline: 22px;
    padding-block-end: 13px;
    padding-block-start: 10px;

    color: var(--button-color);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;

    stroke: solid 2px var(--button-color);
    border-radius: 100px;
}
.button.primary {
    background-color: var(--button-color);
    color: var(--button-accent-color);
}
.button.invert {
    --button-color: var(--wp--preset--color--background-1);
    --button-accent-color: var(--wp--preset--color--type-primary);
}
.button:hover:not(.primary), .button:focus:not(.primary) {
    --button-color: var(--wp--preset--color--action-hover);
}
.button.invert:hover:not(.primary), .button.invert:focus:not(.primary) {
    --button-color: var(--wp--preset--color--action-hover-invert);
}
.button.primary:hover, .button.primary:focus {
    --button-color: var(--wp--preset--color--action-hover);
}
.button.primary.invert:hover, .button.primary.invert:focus {
    --button-color: var(--wp--preset--color--action-hover-invert);
}