/* Scoped styling for the editor-surface controls. */
.toolbars-demo { container-type: inline-size; }
.toolbars-demo .panel-kicker { color: #e81683; }
.toolbars-demo .toolbar-demo-card { margin-top: 15px; padding: 13px; border: 1px solid #e8a2c7; border-radius: 9px; background: #fff7fb; }
.toolbars-demo .toolbar-demo-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.toolbars-demo .toolbar-demo-card__eyebrow { display: block; margin-bottom: 3px; color: #e81683; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.toolbars-demo .toolbar-demo-card__heading h3 { margin: 0; color: #172439; font-size: 15px; line-height: 1.2; }
.toolbars-demo .toolbar-demo-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #edf3fc; color: #50739c; font-size: 9px; font-weight: 700; }
.toolbars-demo .toolbar-demo-list { display: grid; gap: 7px; margin-top: 12px; }
.toolbars-demo .toolbar-demo-item { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid #e5d6df; border-radius: 7px; background: #fff; }
.toolbars-demo .toolbar-demo-item__icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #fff; font-size: 14px; font-weight: 700; }
.toolbars-demo .toolbar-demo-item__icon--vertical { background: #e81683; }
.toolbars-demo .toolbar-demo-item__icon--horizontal { background: #7b20a8; }
.toolbars-demo .toolbar-demo-item__icon--status { background: #4e79a9; }
.toolbars-demo .toolbar-demo-item strong, .toolbars-demo .toolbar-demo-item span { display: block; }
.toolbars-demo .toolbar-demo-item strong { color: #253b57; font-size: 10px; }
.toolbars-demo .toolbar-demo-item span { margin-top: 2px; color: #7d8da4; font-size: 9px; line-height: 1.35; }
.toolbars-demo .toolbar-demo-item .btn { min-height: 28px; padding: 5px 9px; font-size: 9px; white-space: nowrap; }
.toolbars-demo .toolbar-demo-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.toolbars-demo .toolbar-demo-presets .btn { min-height: 30px; padding: 5px 10px; font-size: 9px; }
.toolbars-demo .toolbar-demo-note { display: grid; gap: 3px; margin-top: 12px; padding: 10px 11px; border: 1px solid #dbe2ec; border-radius: 7px; background: #f7f9fc; }
.toolbars-demo .toolbar-demo-note strong { color: #253b57; font-size: 11px; }
.toolbars-demo .toolbar-demo-note span { color: #77859a; font-size: 9px; line-height: 1.45; }
@container (min-width: 560px) {
    .toolbars-demo .toolbar-demo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toolbars-demo .toolbar-demo-item { grid-template-columns: 27px minmax(0, 1fr); align-content: start; }
    .toolbars-demo .toolbar-demo-item .btn { grid-column: 1 / -1; justify-self: start; }
}

@container (min-width: 800px) {
    .toolbars-demo .toolbar-demo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}