.button-settings{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}.button-settings>div{flex:1;min-width:130px}.button-settings label{display:block;font-size:13px;margin-bottom:8px}.button-settings select{width:100%;max-width:100%}.button-stage{display:flex;align-items:center;justify-content:center;min-height:180px;padding:28px 12px;border:1px solid #dce1da;border-radius:8px}.source-button{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;white-space:nowrap;box-sizing:border-box;flex-shrink:0;transition:none;outline:none}.button-label{display:inline-flex;align-items:center}.source-button::after,.focus-sample::after{content:'';position:absolute;inset:calc(-1 * var(--button-ring-gap));border-radius:inherit;box-shadow:0 0 0 var(--button-ring-width) var(--button-ring);opacity:var(--button-ring-opacity);pointer-events:none}.source-button::after{display:none}.source-button[data-focus=true]::after,.source-button:focus-visible::after{display:block}.source-button[aria-busy=true] .button-label{visibility:hidden}.source-button[aria-busy=true] .spinner{display:block}.source-button[aria-disabled=true]{cursor:default}#button-lab[data-spinner=true] .source-button[aria-busy=true] .spinner{animation:brand-spin var(--spinner-ms) linear infinite}#button-lab[data-reduced-motion=true] .spinner{animation:none!important}.focus-options{display:flex;flex-wrap:wrap;gap:32px;padding:24px 8px}.focus-options>div{flex:1;min-width:190px}.focus-option-stage{padding:24px 12px;display:flex;justify-content:center;border-radius:8px}.focus-sample::after{display:block}.focus-options h3{font-size:14px}.focus-options .note{font-size:12px}#button-lab details{margin-top:24px}#button-notes p{margin:8px 0}@media(prefers-reduced-motion:reduce){#button-lab .spinner{animation:none!important}}

.source-button:focus-visible{outline:none}