/**
 * Core button block styles
 *
 */






/*--- All Buttons ---*/
:where(.editor-styles-wrapper, *) .wp-block-buttons .wp-block-button .wp-block-button__link {
    --_hover-shadow-alpha: 0.32;
    transition: all 0.25s ease-out;
}


/*--- Primary 2 Button ---*/

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-primary-2-md, .is-style-primary-2-sm ) .wp-block-button__link {
    background-color: var(--wp--preset--color--accent-1-500);
}

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-primary-2-md, .is-style-primary-2-sm ) .wp-block-button__link:is(:hover, :focus, :focus-visible) {
    background-color: var(--wp--preset--color--accent-1-600);
}


/*--- Secondary 1 Button ---*/

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-1-md, .is-style-secondary-1-sm ) .wp-block-button__link {
    color: var(--wp--preset--color--primary-1-400);
    background-color: var(--wp--preset--color--primary-1-100);
}

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-1-md, .is-style-secondary-1-sm ) .wp-block-button__link:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--primary-1-500);
    background-color: var(--wp--preset--color--primary-1-200);
}


/*--- Secondary 2 Button ---*/

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-2-md, .is-style-secondary-2-sm ) .wp-block-button__link {
    color: var(--wp--preset--color--primary-1-500);
    background-color: var(--wp--preset--color--primary-1-200);
}

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-2-md, .is-style-secondary-2-sm ) .wp-block-button__link:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--primary-1-600);
    background-color: var(--wp--preset--color--primary-1-300);
}


/*--- Secondary 3 Button ---*/

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-3-md, .is-style-secondary-3-sm ) .wp-block-button__link {
    color: var(--wp--preset--color--base-1-200);
    background-color: var(--wp--preset--color--base-1-600);
}

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-3-md, .is-style-secondary-3-sm ) .wp-block-button__link:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--base-1-100);
    background-color: var(--wp--preset--color--base-1-700);
}


/*--- Secondary 4 Button ---*/

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-4-md, .is-style-secondary-4-sm ) .wp-block-button__link {
    color: var(--wp--preset--color--base-1-300);
    background-color: var(--wp--preset--color--base-1-700);
}

:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( .is-style-secondary-4-md, .is-style-secondary-4-sm ) .wp-block-button__link:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--base-1-200);
    background-color: var(--wp--preset--color--base-1-800);
}


/*--- All Small Buttons ---*/
:where(.editor-styles-wrapper .is-root-container, *) .wp-block-button:is( [ class*="-sm" ] ) > .wp-block-button__link  {
    font-size: var(--wp--preset--font-size--body-sm);
    padding-top: var(--wp--preset--spacing--fluid-0-5-step-1);
    padding-right: var(--wp--preset--spacing--fluid-0-5-step-1-25);
    padding-bottom: var(--wp--preset--spacing--fluid-0-5-step-1);
    padding-left: var(--wp--preset--spacing--fluid-0-5-step-1-25);
}


/*--- Button hover/focus/focus-visible state ---*/ 
.wp-block-button__link:is(:hover, :focus, :focus-visible) {
    box-shadow: 0 10px 10px -14px rgba(0, 0, 0, var(--_hover-shadow-alpha)), 
                0 16px 14px -14px rgba(0, 0, 0, calc( var(--_hover-shadow-alpha) / 2 )), 
                0 20px 20px -14px rgba(0, 0, 0, calc( var(--_hover-shadow-alpha) / 4 ));
    transform: translateY(-0.25rem);
}


/*--- Button focus-visible state ---*/
.wp-block-button__link:is(:focus, :focus-visible) {
    outline-offset: 2px;
    outline-style: var(--wp--custom--border--style--dotted);
    outline-width: var(--wp--custom--border--width--1);
    outline-color: var(--wp--preset--color--base-1-700);
}

.has-background .wp-block-button__link:is(:focus, :focus-visible) {
    outline-color: currentColor;
}