/* docara-shell-source: runtime/component/tooltip/css/tooltip.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  .sf-tooltip {
    --sf-tooltip-tail-size: var(--sf-b2);
    --sf-tooltip-tail-half: calc(var(--sf-tooltip-tail-size) / 2);
    --sf-tooltip-tail-corner-offset: var(--sf-b6);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-tooltip .sf-tooltip-content,
  .sf-tooltip .sf-tooltip-wrap {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
  }
  .sf-tooltip .sf-tooltip-text,
  .sf-tooltip .sf-tooltip-supporting-text {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    word-wrap: anywhere;
  }
  .sf-tooltip-anchor {
    display: inline-flex;
    max-width: 100%;
    max-inline-size: 100%;
    position: relative;
  }
  .sf-tooltip-anchor > .sf-tooltip,
  .sf-tooltip-anchor > sf-tooltip {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    max-width: min(var(--sf-g0), 100vw - var(--sf-space-2));
    max-inline-size: min(var(--sf-g0), 100vw - var(--sf-space-2));
    max-width: min(var(--sf-g0), 100vw - var(--sf-space-2));
    max-width: min(var(--sf-tooltip--max-inline-size, var(--sf-g0)), 100vw - var(--sf-space-2));
    max-inline-size: min(var(--sf-tooltip--max-inline-size, var(--sf-g0)), 100vw - var(--sf-space-2));
    position: absolute;
    z-index: var(--sf-z-index-9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist) {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist) {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist):where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist) {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist) {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist):where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-center:not(does-not-exist) {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center] {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center] {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center]:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center] {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center] {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center]:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-center] {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist) {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist) {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist):where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist) {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist) {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist):where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-top-center:not(does-not-exist) {
    top: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-start: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=top-center] {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=top-center] {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=top-center]:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=top-center] {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=top-center] {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=top-center]:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=top-center] {
    top: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-start: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist) {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist) {
    right: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist):where(:dir(ltr)) {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist) {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist) {
    left: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist):where(:dir(rtl)) {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-inline-end:not(does-not-exist) {
    top: 50%;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + var(--sf-tooltip-tail-half));
    translate: 0 -50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=inline-end] {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=inline-end] {
    right: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=inline-end]:where(:dir(ltr)) {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=inline-end] {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=inline-end] {
    left: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=inline-end]:where(:dir(rtl)) {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=inline-end] {
    top: 50%;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + var(--sf-tooltip-tail-half));
    translate: 0 -50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist) {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist) {
    left: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist):where(:dir(ltr)) {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist) {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist) {
    right: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist):where(:dir(rtl)) {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-inline-start:not(does-not-exist) {
    top: 50%;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--sf-tooltip-tail-half));
    translate: 0 -50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=inline-start] {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=inline-start] {
    left: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=inline-start]:where(:dir(ltr)) {
    left: calc(100% + var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=inline-start] {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=inline-start] {
    right: calc(100% + var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=inline-start]:where(:dir(rtl)) {
    right: calc(100% + var(--sf-tooltip-tail-half));
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=inline-start] {
    top: 50%;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--sf-tooltip-tail-half));
    translate: 0 -50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist) {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist) {
    left: 0;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist):where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist) {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist) {
    right: 0;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist):where(:dir(rtl)) {
    right: 0;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-start:not(does-not-exist) {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start] {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start] {
    left: 0;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start]:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start] {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start] {
    right: 0;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start]:where(:dir(rtl)) {
    right: 0;
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-start] {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist) {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist) {
    right: 0;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist):where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist) {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist) {
    left: 0;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist):where(:dir(rtl)) {
    left: 0;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-inline-end:not(does-not-exist) {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-end: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end] {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end] {
    right: 0;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end]:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end] {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end] {
    left: 0;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end]:where(:dir(rtl)) {
    left: 0;
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=bottom-inline-end] {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    inset-inline-end: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist) {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist) {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist):where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist) {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist) {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist):where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-none:not(does-not-exist) {
    top: calc(100% + var(--sf-space-1\/4));
    inset-block-start: calc(100% + var(--sf-space-1\/4));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip:not([arrow]) {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip:not([arrow]) {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip:not([arrow]):where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip:not([arrow]) {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip:not([arrow]) {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip:not([arrow]):where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > sf-tooltip:not([arrow]) {
    top: calc(100% + var(--sf-space-1\/4));
    inset-block-start: calc(100% + var(--sf-space-1\/4));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=none] {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip-anchor > sf-tooltip[arrow=none] {
    left: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=none]:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=none] {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip-anchor > sf-tooltip[arrow=none] {
    right: 50%;
    }
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=none]:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-tooltip-anchor > sf-tooltip[arrow=none] {
    top: calc(100% + var(--sf-space-1\/4));
    inset-block-start: calc(100% + var(--sf-space-1\/4));
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-left {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    left: 0;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-bottom-right {
    bottom: calc(100% + var(--sf-tooltip-tail-half));
    inset-block-end: calc(100% + var(--sf-tooltip-tail-half));
    right: 0;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-left {
    top: 50%;
    inset-block-start: 50%;
    left: calc(100% + var(--sf-tooltip-tail-half));
    translate: 0 -50%;
  }
  .sf-tooltip-anchor > .sf-tooltip--arrow-right {
    top: 50%;
    inset-block-start: 50%;
    right: calc(100% + var(--sf-tooltip-tail-half));
    translate: 0 -50%;
  }
  .sf-tooltip[class*=sf-tooltip--arrow-] .sf-tooltip-content {
    position: relative;
  }
  .sf-tooltip[class*=sf-tooltip--arrow-] .sf-tooltip-tail {
    position: absolute;
    width: var(--sf-tooltip-tail-size);
    height: var(--sf-tooltip-tail-size);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  .sf-tooltip--arrow-none .sf-tooltip-tail {
    display: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-top-center .sf-tooltip-tail {
    left: calc(50% - var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-top-center .sf-tooltip-tail {
    left: calc(50% - var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-top-center .sf-tooltip-tail:where(:dir(ltr)) {
    left: calc(50% - var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-top-center .sf-tooltip-tail {
    right: calc(50% - var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip--arrow-top-center .sf-tooltip-tail {
    right: calc(50% - var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-top-center .sf-tooltip-tail:where(:dir(rtl)) {
    right: calc(50% - var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-top-center .sf-tooltip-tail {
    inset-inline-start: calc(50% - var(--sf-tooltip-tail-half));
    top: calc(-1 * var(--sf-tooltip-tail-half));
    inset-block-start: calc(-1 * var(--sf-tooltip-tail-half));
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-bottom-center .sf-tooltip-tail {
    left: calc(50% - var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-bottom-center .sf-tooltip-tail {
    left: calc(50% - var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-bottom-center .sf-tooltip-tail:where(:dir(ltr)) {
    left: calc(50% - var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-bottom-center .sf-tooltip-tail {
    right: calc(50% - var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip--arrow-bottom-center .sf-tooltip-tail {
    right: calc(50% - var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-bottom-center .sf-tooltip-tail:where(:dir(rtl)) {
    right: calc(50% - var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-bottom-center .sf-tooltip-tail {
    inset-inline-start: calc(50% - var(--sf-tooltip-tail-half));
    bottom: calc(-1 * var(--sf-tooltip-tail-half));
    inset-block-end: calc(-1 * var(--sf-tooltip-tail-half));
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-inline-start .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-inline-start .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-inline-start .sf-tooltip-tail:where(:dir(ltr)) {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-inline-start .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip--arrow-inline-start .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-inline-start .sf-tooltip-tail:where(:dir(rtl)) {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-inline-start .sf-tooltip-tail {
    inset-inline-start: calc(-1 * var(--sf-tooltip-tail-half));
    top: calc(50% - var(--sf-tooltip-tail-half));
    inset-block-start: calc(50% - var(--sf-tooltip-tail-half));
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-inline-end .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-inline-end .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-inline-end .sf-tooltip-tail:where(:dir(ltr)) {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-inline-end .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip--arrow-inline-end .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-inline-end .sf-tooltip-tail:where(:dir(rtl)) {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-inline-end .sf-tooltip-tail {
    inset-inline-end: calc(-1 * var(--sf-tooltip-tail-half));
    top: calc(50% - var(--sf-tooltip-tail-half));
    inset-block-start: calc(50% - var(--sf-tooltip-tail-half));
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-left .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-left .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-left .sf-tooltip-tail:where(:dir(ltr)) {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-left .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip--arrow-left .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-left .sf-tooltip-tail:where(:dir(rtl)) {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-left .sf-tooltip-tail {
    top: calc(50% - var(--sf-tooltip-tail-half));
    inset-block-start: calc(50% - var(--sf-tooltip-tail-half));
    inset-inline-start: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-right .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-right .sf-tooltip-tail {
    right: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-right .sf-tooltip-tail:where(:dir(ltr)) {
    right: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-right .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip--arrow-right .sf-tooltip-tail {
    left: calc(-1 * var(--sf-tooltip-tail-half));
    }
  }
  .sf-tooltip--arrow-right .sf-tooltip-tail:where(:dir(rtl)) {
    left: calc(-1 * var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-right .sf-tooltip-tail {
    top: calc(50% - var(--sf-tooltip-tail-half));
    inset-block-start: calc(50% - var(--sf-tooltip-tail-half));
    inset-inline-end: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail:where(:dir(ltr)) {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail:where(:dir(rtl)) {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-bottom-inline-start .sf-tooltip-tail {
    inset-inline-start: var(--sf-tooltip-tail-corner-offset);
    bottom: calc(-1 * var(--sf-tooltip-tail-half));
    inset-block-end: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail:where(:dir(ltr)) {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail:where(:dir(rtl)) {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-bottom-inline-end .sf-tooltip-tail {
    inset-inline-end: var(--sf-tooltip-tail-corner-offset);
    bottom: calc(-1 * var(--sf-tooltip-tail-half));
    inset-block-end: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail:where(:dir(ltr)) {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail:where(:dir(rtl)) {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-top-inline-start .sf-tooltip-tail {
    inset-inline-start: var(--sf-tooltip-tail-corner-offset);
    top: calc(-1 * var(--sf-tooltip-tail-half));
    inset-block-start: calc(-1 * var(--sf-tooltip-tail-half));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail {
    right: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail:where(:dir(ltr)) {
    right: var(--sf-tooltip-tail-corner-offset);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail {
    left: var(--sf-tooltip-tail-corner-offset);
    }
  }
  .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail:where(:dir(rtl)) {
    left: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-top-inline-end .sf-tooltip-tail {
    inset-inline-end: var(--sf-tooltip-tail-corner-offset);
    top: calc(-1 * var(--sf-tooltip-tail-half));
    inset-block-start: calc(-1 * var(--sf-tooltip-tail-half));
  }
  .sf-tooltip--arrow-top-left .sf-tooltip-tail {
    top: calc(-1 * var(--sf-tooltip-tail-half));
    left: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-top-right .sf-tooltip-tail {
    top: calc(-1 * var(--sf-tooltip-tail-half));
    right: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-bottom-left .sf-tooltip-tail {
    bottom: calc(-1 * var(--sf-tooltip-tail-half));
    left: var(--sf-tooltip-tail-corner-offset);
  }
  .sf-tooltip--arrow-bottom-right .sf-tooltip-tail {
    bottom: calc(-1 * var(--sf-tooltip-tail-half));
    right: var(--sf-tooltip-tail-corner-offset);
  }
  @media (forced-colors: active) {
    .sf-tooltip .sf-tooltip-content {
      border: var(--sf-px) solid CanvasText;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) */
  .sf-tooltip {
    background-color: transparent;
    background-color: var(--sf-tooltip--background-color, transparent);
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-bottom-right-radius: var(--sf-tooltip-content--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-bottom-right-radius: var(--sf-tooltip-content--border-end-end-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-tooltip-content--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-bottom-left-radius: var(--sf-tooltip-content--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-bottom-left-radius: var(--sf-tooltip-content--border-end-end-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-tooltip-content--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-bottom-left-radius: var(--sf-tooltip-content--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-bottom-left-radius: var(--sf-tooltip-content--border-end-start-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-tooltip-content--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-bottom-right-radius: var(--sf-tooltip-content--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-bottom-right-radius: var(--sf-tooltip-content--border-end-start-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-tooltip-content--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-top-right-radius: var(--sf-tooltip-content--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-top-right-radius: var(--sf-tooltip-content--border-start-end-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-tooltip-content--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-top-left-radius: var(--sf-tooltip-content--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-top-left-radius: var(--sf-tooltip-content--border-start-end-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-tooltip-content--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-top-left-radius: var(--sf-tooltip-content--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    border-top-left-radius: var(--sf-tooltip-content--border-start-start-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-tooltip-content--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-top-right-radius: var(--sf-tooltip-content--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    border-top-right-radius: var(--sf-tooltip-content--border-start-start-radius);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-tooltip-content--border-start-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    padding-right: var(--sf-tooltip-content--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    padding-right: var(--sf-tooltip-content--padding-inline-end);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(ltr)) {
    padding-right: var(--sf-tooltip-content--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    padding-left: var(--sf-tooltip-content--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    padding-left: var(--sf-tooltip-content--padding-inline-end);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(rtl)) {
    padding-left: var(--sf-tooltip-content--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    padding-left: var(--sf-tooltip-content--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tooltip .sf-tooltip-content {
    padding-left: var(--sf-tooltip-content--padding-inline-start);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(ltr)) {
    padding-left: var(--sf-tooltip-content--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    padding-right: var(--sf-tooltip-content--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-tooltip .sf-tooltip-content {
    padding-right: var(--sf-tooltip-content--padding-inline-start);
    }
  }
  .sf-tooltip .sf-tooltip-content:where(:dir(rtl)) {
    padding-right: var(--sf-tooltip-content--padding-inline-start);
  }
  .sf-tooltip .sf-tooltip-content {
    --sf-tooltip-content--border-end-end-radius: var(--sf-tooltip-radius, var(--sf-radius--ui));
    --sf-tooltip-content--border-end-start-radius: var(--sf-tooltip-radius, var(--sf-radius--ui));
    --sf-tooltip-content--border-start-end-radius: var(--sf-tooltip-radius, var(--sf-radius--ui));
    --sf-tooltip-content--border-start-start-radius: var(--sf-tooltip-radius, var(--sf-radius--ui));
    background-color: var(--sf-tooltip-content--background-color);
    border-end-end-radius: var(--sf-tooltip-content--border-end-end-radius);
    border-end-start-radius: var(--sf-tooltip-content--border-end-start-radius);
    border-start-end-radius: var(--sf-tooltip-content--border-start-end-radius);
    border-start-start-radius: var(--sf-tooltip-content--border-start-start-radius);
    padding-bottom: var(--sf-tooltip-content--padding-bottom);
    -webkit-padding-end: var(--sf-tooltip-content--padding-inline-end);
            padding-inline-end: var(--sf-tooltip-content--padding-inline-end);
    -webkit-padding-start: var(--sf-tooltip-content--padding-inline-start);
            padding-inline-start: var(--sf-tooltip-content--padding-inline-start);
    padding-top: var(--sf-tooltip-content--padding-top);
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-tooltip-wrap--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-tooltip .sf-tooltip-wrap {
    --sf-tooltip-wrap--background-color: transparent;
    --sf-tooltip-wrap--gap: var(--sf-tooltip-gap, var(--sf-space-1\/4));
    background-color: var(--sf-tooltip-wrap--background-color);
    gap: var(--sf-tooltip-wrap--gap);
  }
  .sf-tooltip .sf-tooltip-text {
    --sf-tooltip-text--font-family: var(--sf-text--family);
    --sf-tooltip-text--font-weight: var(--sf-font-weight-bold);
    color: var(--sf-tooltip-text--color);
    font-family: var(--sf-tooltip-text--font-family);
    font-size: var(--sf-tooltip-text--font-size);
    font-weight: var(--sf-tooltip-text--font-weight);
    line-height: var(--sf-tooltip-text--line-height);
  }
  .sf-tooltip .sf-tooltip-supporting-text {
    color: var(--sf-tooltip-supporting-text--color);
    font-family: var(--sf-tooltip-supporting-text--font-family);
    font-size: var(--sf-tooltip-supporting-text--font-size);
    font-weight: var(--sf-tooltip-supporting-text--font-weight);
    line-height: var(--sf-tooltip-supporting-text--line-height);
    --sf-tooltip-supporting-text--font-family: var(--sf-text--family);
    --sf-tooltip-supporting-text--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tooltip .sf-tooltip-tail {
    background-color: var(--sf-tooltip-tail--background-color);
    color: var(--sf-tooltip-tail--color);
    font-family: var(--sf-tooltip-tail--font-family);
    font-size: var(--sf-tooltip-tail--font-size);
    font-weight: var(--sf-tooltip-tail--font-weight);
    line-height: var(--sf-tooltip-tail--line-height);
  }
  .sf-tooltip.sf-tooltip--dark .sf-tooltip-tail {
    --sf-tooltip-tail--background-color: var(--sf-tooltip-background-color, var(--sf-surface-inverse-fixed));
  }
  .sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-left.sf-tooltip--size-1 .sf-tooltip-tail, .sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-bottom-right.sf-tooltip--size-1 .sf-tooltip-tail, .sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-right.sf-tooltip--size-1 .sf-tooltip-tail, .sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-top-center.sf-tooltip--size-1 .sf-tooltip-tail, .sf-tooltip.sf-tooltip--dark.sf-tooltip--arrow-left.sf-tooltip--size-1 .sf-tooltip-tail {
    --sf-tooltip-tail--color: var(--sf-on-surface-inverse-fixed);
    --sf-tooltip-tail--font-family: var(--sf-text--family);
    --sf-tooltip-tail--font-size: var(--sf-text-size-1);
    --sf-tooltip-tail--font-weight: var(--sf-font-weight-regular);
    --sf-tooltip-tail--line-height: var(--sf-text-height-1);
  }
  .sf-tooltip.sf-tooltip--dark.sf-tooltip--size-1 .sf-tooltip-supporting-text, .sf-tooltip.sf-tooltip--light.sf-tooltip--size-1 .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--font-size: var(--sf-text-size-1);
    --sf-tooltip-supporting-text--line-height: var(--sf-text-height-1);
  }
  .sf-tooltip.sf-tooltip--dark .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--color: var(--sf-tooltip-color, var(--sf-on-surface-inverse-fixed));
  }
  .sf-tooltip.sf-tooltip--light .sf-tooltip-tail {
    --sf-tooltip-tail--background-color: var(--sf-tooltip-background-color, var(--sf-surface-1));
  }
  .sf-tooltip.sf-tooltip--light .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--color: var(--sf-tooltip-color, var(--sf-on-surface));
  }
  .sf-tooltip.sf-tooltip--dark.sf-tooltip--size-2 .sf-tooltip-supporting-text, .sf-tooltip.sf-tooltip--light.sf-tooltip--size-2 .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--font-size: var(--sf-text-size-2);
    --sf-tooltip-supporting-text--line-height: var(--sf-text-height-2);
  }
  .sf-tooltip.sf-tooltip--dark.sf-tooltip--size-3 .sf-tooltip-supporting-text, .sf-tooltip.sf-tooltip--light.sf-tooltip--size-3 .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--font-size: var(--sf-text-size-3);
    --sf-tooltip-supporting-text--line-height: var(--sf-text-height-3);
  }
  .sf-tooltip.sf-tooltip--dark.sf-tooltip--size-1\/3 .sf-tooltip-supporting-text, .sf-tooltip.sf-tooltip--light.sf-tooltip--size-1\/3 .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--font-size: var(--sf-text-size-1\/3);
    --sf-tooltip-supporting-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-tooltip.sf-tooltip--dark.sf-tooltip--size-1\/2 .sf-tooltip-supporting-text, .sf-tooltip.sf-tooltip--light.sf-tooltip--size-1\/2 .sf-tooltip-supporting-text {
    --sf-tooltip-supporting-text--font-size: var(--sf-text-size-1\/2);
    --sf-tooltip-supporting-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tooltip.sf-tooltip--size-1 .sf-tooltip-content {
    --sf-tooltip-content--padding-bottom: var(--sf-tooltip-padding-block, var(--sf-ui-1--space-y-tightness-default));
    --sf-tooltip-content--padding-inline-end: var(--sf-tooltip-padding-inline, var(--sf-ui-1--space-x));
    --sf-tooltip-content--padding-inline-start: var(--sf-tooltip-padding-inline, var(--sf-ui-1--space-x));
    --sf-tooltip-content--padding-top: var(--sf-tooltip-padding-block, var(--sf-ui-1--space-y-tightness-default));
  }
  .sf-tooltip.sf-tooltip--size-1 .sf-tooltip-text {
    --sf-tooltip-text--font-size: var(--sf-text-size-1);
    --sf-tooltip-text--line-height: var(--sf-text-height-1);
  }
  .sf-tooltip.sf-tooltip--size-2 .sf-tooltip-content {
    --sf-tooltip-content--padding-bottom: var(--sf-tooltip-padding-block, var(--sf-ui-2--space-y-tightness-default));
    --sf-tooltip-content--padding-inline-end: var(--sf-tooltip-padding-inline, var(--sf-ui-2--space-x));
    --sf-tooltip-content--padding-inline-start: var(--sf-tooltip-padding-inline, var(--sf-ui-2--space-x));
    --sf-tooltip-content--padding-top: var(--sf-tooltip-padding-block, var(--sf-ui-2--space-y-tightness-default));
  }
  .sf-tooltip.sf-tooltip--size-2 .sf-tooltip-text {
    --sf-tooltip-text--font-size: var(--sf-text-size-2);
    --sf-tooltip-text--line-height: var(--sf-text-height-2);
  }
  .sf-tooltip.sf-tooltip--size-3 .sf-tooltip-content {
    --sf-tooltip-content--padding-bottom: var(--sf-tooltip-padding-block, var(--sf-ui-3--space-y-tightness-default));
    --sf-tooltip-content--padding-inline-end: var(--sf-tooltip-padding-inline, var(--sf-ui-3--space-x));
    --sf-tooltip-content--padding-inline-start: var(--sf-tooltip-padding-inline, var(--sf-ui-3--space-x));
    --sf-tooltip-content--padding-top: var(--sf-tooltip-padding-block, var(--sf-ui-3--space-y-tightness-default));
  }
  .sf-tooltip.sf-tooltip--size-3 .sf-tooltip-text {
    --sf-tooltip-text--font-size: var(--sf-text-size-3);
    --sf-tooltip-text--line-height: var(--sf-text-height-3);
  }
  .sf-tooltip.sf-tooltip--size-1\/3 .sf-tooltip-content {
    --sf-tooltip-content--padding-bottom: var(--sf-tooltip-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-tooltip-content--padding-inline-end: var(--sf-tooltip-padding-inline, var(--sf-ui-1\/3--space-x));
    --sf-tooltip-content--padding-inline-start: var(--sf-tooltip-padding-inline, var(--sf-ui-1\/3--space-x));
    --sf-tooltip-content--padding-top: var(--sf-tooltip-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
  }
  .sf-tooltip.sf-tooltip--size-1\/3 .sf-tooltip-text {
    --sf-tooltip-text--font-size: var(--sf-text-size-1\/3);
    --sf-tooltip-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-tooltip.sf-tooltip--size-1\/2 .sf-tooltip-content {
    --sf-tooltip-content--padding-bottom: var(--sf-tooltip-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-tooltip-content--padding-inline-end: var(--sf-tooltip-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-tooltip-content--padding-inline-start: var(--sf-tooltip-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-tooltip-content--padding-top: var(--sf-tooltip-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
  }
  .sf-tooltip.sf-tooltip--size-1\/2 .sf-tooltip-text {
    --sf-tooltip-text--font-size: var(--sf-text-size-1\/2);
    --sf-tooltip-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tooltip--dark .sf-tooltip-content {
    --sf-tooltip-content--background-color: var(--sf-tooltip-background-color, var(--sf-surface-inverse-fixed));
  }
  .sf-tooltip--dark .sf-tooltip-text {
    --sf-tooltip-text--color: var(--sf-tooltip-color, var(--sf-on-surface-inverse-fixed));
  }
  .sf-tooltip--light .sf-tooltip-content {
    /* A light tooltip is a raised surface, like every floating one: the plain
       surface-1 with no border or shadow vanished into a light page. */
    --sf-tooltip-content--background-color: var(--sf-tooltip-background-color, var(--sf-elevation-2--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
    box-shadow: var(--sf-elevation-2--shadow);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border: var(--sf-tooltip-border-width, var(--sf-px)) solid var(--sf-tooltip-border-color, var(--sf-outline-variant));
  }
  .sf-tooltip--light .sf-tooltip-text {
    --sf-tooltip-text--color: var(--sf-tooltip-color, var(--sf-on-surface));
  }
}