:root {
    --os-radius-button: var(--os-radius-l);
    --os-button-border-width: 2px;
    --os-button-outline-padding: 1rem 2.4rem;
    --os-button-padding: calc(1rem + var(--os-button-border-width)) calc(2.4rem + var(--os-button-border-width));
}
.wp-block-button .wp-element-button {
    transition: var(--os-transition);
    background-color: var(--wp--preset--color--action);
    color: var(--wp--preset--color--base-dark);
}
.wp-block-button .wp-element-button:hover {
    transform: translateY(-5px);
    text-decoration: none;
    cursor: pointer;
    background-color: var(--wp--preset--color--action-light);
}
.wp-block-button.is-style-outline .wp-element-button {
    background: none;
    border-color: var(--wp--preset--color--action);
    padding: var(--os-button-outline-padding);
}
.wp-block-button.is-style-outline .wp-element-button:hover {
    background-color: var(--wp--preset--color--action-dark);
    color: white;
}
/* Secondary */
.wp-block-button.is-style-os-button-secondary-fill .wp-element-button {
    background-color: var(--wp--preset--color--secondary);
}
.wp-block-button.is-style-os-button-secondary-fill .wp-element-button:hover {
    background-color: var(--wp--preset--color--secondary-dark);
}
.wp-block-button.is-style-os-button-secondary-outline .wp-element-button {
    background: none;
    border: var(--os-button-border-width) solid var(--wp--preset--color--secondary);
    padding: var(--os-button-outline-padding);
}
.wp-block-button.is-style-os-button-secondary-outline .wp-element-button:hover {
    background-color: var(--wp--preset--color--secondary-light);
}
/* Base */
.wp-block-button.is-style-os-button-base-fill .wp-element-button {
    background-color: var(--wp--preset--color--base);
    color: white;
}
.wp-block-button.is-style-os-button-base-fill .wp-element-button:hover {
    background-color: var(--wp--preset--color--base-dark);
}
.wp-block-button.is-style-os-button-base-outline .wp-element-button {
    background: none;
    border: var(--os-button-border-width) solid var(--wp--preset--color--base);
    padding: var(--os-button-outline-padding);
}
.wp-block-button.is-style-os-button-base-outline .wp-element-button:hover {
    background-color: var(--wp--preset--color--base);
    color: white;
}
/* Reversed */
.wp-block-button.is-style-os-button-reversed-fill .wp-element-button {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--action);
}
.wp-block-button.is-style-os-button-reversed-fill .wp-element-button:hover {
    background-color: var(--wp--preset--color--action-ultra-light);
}
.wp-block-button.is-style-os-button-reversed-outline .wp-element-button {
    background: none;
    color: var(--wp--preset--color--action);
    border: var(--os-button-border-width) solid var(--wp--preset--color--white);
    padding: var(--os-button-outline-padding);
}
.wp-block-button.is-style-os-button-reversed-outline .wp-element-button:hover {
    background-color: var(--wp--preset--color--white-trans-20);
}