/* docara-shell-source: runtime/component/doc/css/doc.css */
@layer sf.components {
  code,
  .sf-doc-code,
  .t-source {
    font-family: var(--sf-mono);
  }
  .sf-doc-lead,
  .t-lead {
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-large--size);
    line-height: var(--sf-text-large--height);
  }
  * + .sf-doc-example {
    margin-top: var(--sf-text--space-bottom);
    -webkit-margin-before: var(--sf-text--space-bottom);
            margin-block-start: var(--sf-text--space-bottom);
  }
  * + .example {
    margin-top: var(--sf-text--space-bottom);
    -webkit-margin-before: var(--sf-text--space-bottom);
            margin-block-start: var(--sf-text--space-bottom);
  }
  .sf-doc-pair {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
  }
  .sf-doc-example,
  .example {
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    padding: var(--sf-space-3);
    word-wrap: anywhere;
    background-color: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-playground + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-playground + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .example + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .example + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-example:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-example:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-playground:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-playground:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .example:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .example:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-source,
  .source {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    margin-bottom: var(--sf-text--space-bottom);
    -webkit-margin-after: var(--sf-text--space-bottom);
            margin-block-end: var(--sf-text--space-bottom);
    overflow: auto;
    background-color: var(--sf-surface-inverse);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface-inverse);
    -moz-tab-size: 2;
      -o-tab-size: 2;
         tab-size: 2;
  }
  .sf-doc-source code {
    color: inherit;
  }
  .source code {
    color: inherit;
  }
  .sf-doc-stripes,
  .bg-stripes {
    --sf-doc-pattern-color: var(--sf-surface-1);
    background-image: repeating-linear-gradient(-45deg, var(--sf-doc-pattern-color) 0,var(--sf-doc-pattern-color) 25%, var(--sf-transparent) 25%, var(--sf-transparent) 50%);
    background-image: repeating-linear-gradient(-45deg, var(--sf-doc-pattern-color) 0 25%, var(--sf-transparent) 25% 50%);
    background-size: var(--sf-space-2) var(--sf-space-2);
  }
  .bg-stripes-white {
    --sf-doc-pattern-color: var(--sf-surface-0);
  }
  .bg-stripes-blue {
    --sf-doc-pattern-color: var(--sf-info-container);
  }
  .sf-doc-checkerboard,
  .bg-checkered {
    background-color: var(--sf-surface-0);
    background-image: conic-gradient(var(--sf-surface-1) 25%, var(--sf-transparent) 0,var(--sf-transparent) 50%, var(--sf-surface-1) 0,var(--sf-surface-1) 75%, var(--sf-transparent) 0);
    background-image: conic-gradient(var(--sf-surface-1) 25%, var(--sf-transparent) 0 50%, var(--sf-surface-1) 0 75%, var(--sf-transparent) 0);
    background-size: var(--sf-space-2) var(--sf-space-2);
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
  @media (forced-colors: active) {
    .sf-doc-example,
    .example,
    .sf-doc-source,
    .source {
      border-color: CanvasText;
    }
    .sf-doc-stripes,
    .bg-stripes,
    .sf-doc-checkerboard,
    .bg-checkered {
      background: Canvas;
      border: var(--sf-px) solid CanvasText;
    }
  }
}