:root{--maxwidth:1170px}.sg-main,.sg-section>*{max-width:var(--maxwidth);margin:auto}.sg-section{padding-inline:var(--bf-page-padding)}.sg-article{padding-top:var(--bf-page-padding);grid-template-columns:minmax(0,1fr);gap:24px;display:grid}.sg-content{background-color:var(--bfc-base-3);box-shadow:var(--bf-shadow);border-radius:var(--bf-radius);margin-bottom:40px;padding:24px}.sg-content>.bf-message,.sg-content>.bf-autocol{margin-block:24px}.sg-content>:first-child,.sg-content .bf-section-content>:first-child,.sg-content .bf-message-expandable-content>:first-child{margin-top:0}.sg-content>:last-child,.sg-content .bf-section-content>:last-child,.sg-content .bf-message-expandable-content>:last-child{margin-bottom:0}.sg-content .bf-message p:first-child{margin-top:0}.sg-content .bf-message p:last-child{margin-bottom:0}@media (min-width:960px){.sg-article{grid-template-columns:minmax(0,1fr) 230px}.sg-article>.sg-toc{grid-row-start:1;grid-column-start:2}.sg-article>.bf-content{grid-row-start:1}}.sg-resize,.sg-resize-horizontal{min-width:250px;max-width:100%;min-height:50px;overflow:auto}.sg-resize{resize:both}.sg-resize-horizontal{resize:horizontal}.sg-first-right{gap:24px;display:grid}@media (min-width:960px){.sg-first-right{grid-template-columns:minmax(0,1fr) 374px;align-items:start}.sg-first-right>:first-child{order:2}.sg-first-right>:nth-child(2){order:1}}.linked-heading{position:relative}.linked-heading>*{display:inline-block}.linked-heading:hover>a{visibility:visible}.linked-heading>a{visibility:hidden;vertical-align:super;margin-left:1em;text-decoration-line:none}.linked-heading>a>.icon-link:after{content:"🔗"}.styleguide-content pre code{background-color:#0000}.page-demo{--bf-nav-side-width:0px;min-height:200px;position:relative;overflow:hidden}.page-demo .bf-bottom-bar,.page-demo .bf-nav-side,.page-demo .bf-nav-mobile,.page-demo .bf-nav-top.bf-nav-top,.page-demo .bf-nav-mobile-overlay{position:absolute}.page-demo .bf-nav-top.bf-nav-top{transform:translateY(0%)}@media (min-width:1600px){.page-demo .bf-nav-top:not(.to-xl)~:where(main,.bf-nav-main){padding-top:56px}}.sg-content>table:not(.bf-table){border-collapse:collapse;width:100%}.sg-content>table:not(.bf-table) th{text-align:left}.sg-content>table:not(.bf-table) td{padding:4px 4px 4px 0}
code[class*=language-],pre[class*=language-]{color:var(--lightningcss-light,#071627)var(--lightningcss-dark,#f3f3f6);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;overflow-wrap:normal;tab-size:2;-webkit-hyphens:none;hyphens:none;background:0 0;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;line-height:1.5}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--lightningcss-light,#1d2e40)var(--lightningcss-dark,#bcc0c7)}.token.punctuation{color:var(--lightningcss-light,#565776)var(--lightningcss-dark,#8a98a8)}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:var(--lightningcss-light,#07a)var(--lightningcss-dark,#00b2ff)}.token.deleted{color:var(--lightningcss-light,#905)var(--lightningcss-dark,#ff4b33)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin{color:var(--lightningcss-light,#905)var(--lightningcss-dark,#ff8d7e)}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:var(--lightningcss-light,#99620a)var(--lightningcss-dark,#ffdb70)}.token.atrule,.token.attr-value,.token.keyword,.token.inserted{color:var(--lightningcss-light,#007a4b)var(--lightningcss-dark,#00f597)}.token.function,.token.class-name{color:var(--lightningcss-light,#007375)var(--lightningcss-dark,#0df2d7)}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:600}.token.italic{font-style:italic}.token.entity{cursor:help}
.rangeContainer{accent-color:var(--bfc-theme);grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-block:12px;display:grid}.chess-pattern{--checqueredbg:color-mix(in lch,var(--bfc-base-c-inverted)10%,transparent);background-image:linear-gradient(45deg,var(--checqueredbg)25%,transparent 25%),linear-gradient(-45deg,var(--checqueredbg)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checqueredbg)75%),linear-gradient(-45deg,transparent 75%,var(--checqueredbg)75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}
.bf-colortable{width:100%;margin-top:1rem}.bf-colortable th{padding-left:var(--bfs8)}.bf-colortable th:nth-child(n+4){text-align:center}.bf-colortable td{vertical-align:top;padding:8px 4px}.bf-colortable td:nth-child(2){width:30%}.bf-colortable td:nth-child(3){width:35%}.bf-colortable td:nth-child(2n+4){border-left:var(--bf-border)}.bf-colordemo{padding:var(--bfs2)var(--bfs8);border-radius:var(--bf-radius-xs);text-align:center;vertical-align:middle;min-width:40px;min-height:27px;display:inline-block}.bf-colortable .bf-colortable-spacer{white-space:nowrap;align-items:center;height:30px;display:flex}.bf-colortable-spacer .bf-checkbox-text{display:none}.color-allowed-icon{margin-right:.5rem}.demo-checkbox-wrapper label{padding:var(--bfs4)0}
.bf-contrast-checker{gap:24px}.bf-color-picker{border-radius:var(--bf-radius);background-color:var(--bfc-base-2);box-shadow:var(--bf-shadow);overflow:hidden}.bf-color-picker-wrapper{grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;display:grid}.bf-color-picker-swatches{--bf-autocol-width:100px;text-align:center;gap:16px 24px}.bf-picker-swatch{cursor:pointer;width:100%;height:50px;font-size:var(--bf-font-size-h4);border:1px solid #0000;display:block;position:relative}.bf-picker-swatch-selected{border-radius:var(--bf-radius-full);width:30px;line-height:31px;display:inline-block}.bf-contrast-table-text{border-radius:var(--bf-radius);height:100px;padding:12px}.bf-contrast-table-icon{text-align:center;border-radius:var(--bf-radius);font-size:var(--bf-font-size-h2);height:100px;padding-top:30px}.bf-contrast-table-border{border-radius:var(--bf-radius);border:1px solid #0000;height:100px}.bf-contrast-table .bf-h5{margin-top:0;margin-bottom:6px}.colorpicker-filter{margin-top:16px}.wcag-yep{color:var(--bfc-base-c-success)}.wcag-nope{color:var(--bfc-base-c-alert)}.bf-color-info-light,.bf-darkmode .bf-color-info-light{display:none}