.ui-formatbar { display:inline-flex; flex-wrap:wrap; max-width:100%; box-sizing:border-box; padding:0; border:0; align-items:center; gap:8px; background:transparent; }
.ui-formatbar-actions { display:inline-flex; flex-wrap:wrap; max-width:100%; box-sizing:border-box; padding:3px; border:1px solid var(--color-border); border-radius:var(--radius-control); align-items:center; gap:2px; background:var(--color-surface); }
.ui-formatbar-actions:empty { display:none; }
.ui-formatbar-button { position:relative; display:inline-flex; width:30px; height:30px; padding:0; border:0; border-radius:var(--radius-control); align-items:center; justify-content:center; background:transparent; color:var(--color-text-muted); cursor:pointer; }
.ui-formatbar-button:hover,.ui-formatbar-button:focus-visible,.ui-formatbar-button.is-checked { background:var(--color-primary-soft); color:var(--color-primary); outline:none; }
.ui-formatbar-color::after { position:absolute; right:5px; bottom:3px; left:5px; height:3px; border-radius:2px; background:var(--ui-format-color); box-shadow:0 0 0 1px color-mix(in srgb,var(--color-text) 20%,transparent); content:""; }
.ui-formatbar-palette { position:absolute; z-index:10050; display:grid; width:132px; padding:6px; grid-template-columns:repeat(4,24px); gap:6px; border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface); box-shadow:var(--shadow-menu); }
.ui-formatbar-swatch { width:24px; height:24px; padding:0; border:1px solid color-mix(in srgb,var(--color-text) 24%,transparent); border-radius:4px; background:var(--ui-swatch-color); cursor:pointer; }
.ui-formatbar-swatch:hover,.ui-formatbar-swatch:focus-visible,.ui-formatbar-swatch[aria-selected=true] { outline:2px solid var(--color-primary); outline-offset:1px; }

.ui-formatbar-preview { min-width:96px; padding:5px 9px; border:1px solid var(--color-border); border-radius:4px; line-height:1.25; white-space:nowrap; }

.ui-formatbar-separator { align-self:stretch; width:1px; margin:3px; background:var(--color-border); }
.ui-formatbar-format { flex:1 0 100%; min-width:0; margin:0; }
.ui-formatbar-format select { width:100%; }