.button-components{min-height:100svh;padding:var(--fl-space-6) max(var(--fl-space-5), calc((100vw - 68rem) / 2));background:var(--fl-color-canvas);color:var(--fl-color-ink)}.button-components__nav{justify-content:space-between;align-items:center;gap:var(--fl-space-5);display:flex}.button-components__nav svg,.button-components__hint svg,.button-components__footer>svg{width:var(--fl-space-5);height:var(--fl-space-5);flex:none}.button-components__back{min-height:calc(var(--fl-space-5) * 2.75);align-items:center;gap:var(--fl-space-2);color:var(--fl-color-ink-secondary);font:var(--fl-text-body);text-underline-offset:var(--fl-space-1);font-weight:600;text-decoration:none;display:inline-flex}.button-components__back:hover{color:var(--fl-color-command-hover);text-decoration:underline}.button-components__back:focus-visible{outline:2px solid var(--fl-color-focus);outline-offset:var(--fl-space-1);border-radius:var(--fl-radius-control-sm)}.button-components__header{padding-block:calc(var(--fl-space-6) * 2) calc(var(--fl-space-6) * 1.5)}.button-components__header h1{font:var(--fl-text-display);letter-spacing:-.03em;margin:0}.button-components__header p{margin:var(--fl-space-4) 0 var(--fl-space-2);font:var(--fl-text-title)}.button-components__header>span{max-width:70ch;color:var(--fl-color-ink-secondary);font:var(--fl-text-body);display:block}.button-components__canvas{padding-inline:calc(var(--fl-space-6) * 1.5);border:1px solid var(--fl-color-rule);border-radius:var(--fl-radius-card-sm);background:var(--fl-color-surface)}.button-components__example{align-items:center;gap:calc(var(--fl-space-6) * 2);padding-block:calc(var(--fl-space-6) * 1.5);grid-template-columns:minmax(11rem,1fr) minmax(0,2fr);display:grid}.button-components__example+.button-components__example{border-block-start:1px solid var(--fl-color-rule-soft)}.button-components__description h2{font:var(--fl-text-title);margin:0}.button-components__description p{max-width:28ch;margin:var(--fl-space-2) 0 0;color:var(--fl-color-ink-muted);font:var(--fl-text-body)}.button-components__controls,.button-components__labelled-control{align-items:flex-start;gap:var(--fl-space-4);flex-direction:column;min-width:0;display:flex}.button-components__row,.button-components__compact-tools{align-items:center;gap:var(--fl-space-6);flex-wrap:wrap;display:flex}.button-components__compact-tools{align-items:flex-start}.button-components__labelled-control>span{color:var(--fl-color-ink-secondary);font:var(--fl-text-caption);font-weight:600}.button-components__hint{align-items:center;gap:var(--fl-space-2);color:var(--fl-color-ink-muted);font:var(--fl-text-caption);display:flex}.button-components__footer{align-items:center;gap:var(--fl-space-3);min-height:calc(var(--fl-space-6) * 3);padding-block:var(--fl-space-4);background:var(--fl-color-canvas);color:var(--fl-color-ink-secondary);font:var(--fl-text-caption);display:flex;position:sticky;bottom:0}.button-components__footer>svg{color:var(--fl-color-success-ink)}.button-components__footer p{flex:1;margin:0}.button-components__footer>span{color:var(--fl-color-ink-muted)}@media (width<=48rem){.button-components__canvas{padding-inline:var(--fl-space-6)}.button-components__example{gap:var(--fl-space-6);grid-template-columns:minmax(0,1fr)}.button-components__description p{max-width:none}}@media (width<=32rem){.button-components__theme-label{display:none}.button-components__canvas{padding-inline:var(--fl-space-4)}.button-components__views{width:100%}.button-components__footer>span{display:none}}