/* Global
   ========================================================================== */

.wp-block-button .wp-block-button__link,
.wp-element-button {
    transition: all 200ms !important;

    &:where(:hover, :focus-visible) {
        box-shadow: none !important;
    }
}

/* Unboxed style
   ========================================================================== */

.wp-block-button.is-style-unboxed .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--accent);
    box-shadow: none;
    transition: color 200ms;

    &:where(:hover, :focus-visible) {
        color: var(--wp--preset--color--accent-2);
    }
}

/* Outline style
   ========================================================================== */

.wp-block-button.is-style-outline .wp-block-button__link {
    border: 1px solid;
    padding-inline: calc(var(--wp--preset--spacing--small) - 1px);
    padding-block: calc(var(--wp--preset--spacing--x-small) - 1px);
    background: linear-gradient(0deg, var(--wp--preset--color--text-100), var(--wp--preset--color--text-100)) no-repeat left / 0 var(--bg-h);
    transition: background-size 300ms, color 200ms;
    --bg-h: 100%;

    &:where(:hover, :focus-visible) {
        background-size: 100% var(--bg-h);
        background-position-x: left;
        color: var(--wp--preset--color--white);
        border-color: var(--wp--preset--color--text-100);
    }
}

/* Unfill style
   ========================================================================== */

.wp-block-button.is-style-unfill .wp-block-button__link {
    border: 1px solid;
    padding-inline: calc(var(--wp--preset--spacing--small));
    padding-block: calc(var(--wp--preset--spacing--x-small));
    background: linear-gradient(0deg, var(--wp--preset--color--text-100), var(--wp--preset--color--text-100)) no-repeat right / 100% var(--bg-h);
    transition: background-size 300ms, color 200ms;
    --bg-h: 100%;

    &:where(:hover, :focus-visible) {
        background-size: 0 var(--bg-h);
        background-position-x: right;
        color: var(--wp--preset--color--black);
        border-color: var(--wp--preset--color--text-100);
        padding-inline: calc(var(--wp--preset--spacing--small) - 1px);
        padding-block: calc(var(--wp--preset--spacing--x-small) - 1px);
    }
}