/*
 * Front-end button styles live in core/css/020-layer-buttons.css, which is NOT enqueued in
 * wp-admin. This component's own CSS auto-enqueues wherever the button component renders —
 * including the ACF button-style picker preview (acfe/render_choice/name=global-button-style) —
 * so these rules make the admin sample buttons render correctly.
 *
 * Everything here is scoped to .wp-admin (a class only on the admin <body>), so the front end
 * is completely unaffected. Colours come from the --button-style-* custom properties injected
 * inline by vendi_render_button_styles(). Values are in px because the admin does not load the
 * theme's 62.5% root font-size.
 */
.wp-admin {
    .call-to-action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 24px;
        min-height: 40px;
        border-radius: 999px;
        font-weight: 600;
        text-decoration: none !important;
        color: var(--button-style-color, #ffffff);
        background-color: var(--button-style-background-color, #000000);
        border: 2px solid var(--button-style-border-color, #ffffff);

        &:hover {
            color: var(--button-style-hover-color, #000000);
            background-color: var(--button-style-hover-background-color, #ffffff);
            border-color: var(--button-style-hover-border-color, #000000);
        }
    }

    /* Neutral backdrop so light / outline styles are visible against the white admin.
       Block + fit-content drops the sample onto its own line beneath the radio + label. */
    .component-button {
        display: block;
        width: fit-content;
        margin-block: 6px;
        padding: 8px;
        border-radius: 6px;
        background-color: #8a8a8a;
    }
}