/* docara-shell-source: runtime/component/icons/css/icons.css */
/*

*/
.sf-icon--rotate-45 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-135 {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-225 {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-315 {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

/* fallback */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/_docara/vendor/simai-framework/runtime/25beeb814ae87b1e8e7bb5831b70a23b7cf36f96/distr/component/icons/a5f1f832a64baed42867.woff2") format("woff2");
}
.sf-icon {
  --sf-icon--fill: 0;
  --sf-icon--weight: var(--sf-weight--regular);
  --sf-icon--grade: 0;
  --sf-icon--optical-size: 24;
  --sf-icon--line-height: 1;
  font-variation-settings: "FILL" var(--sf-icon--fill), "wght" var(--sf-icon--weight), "GRAD" var(--sf-icon--grade), "opsz" var(--sf-icon--optical-size);
  font-family: "Material Symbols Outlined";
  font-family: var(--sf-icon--font-family, "Material Symbols Outlined");
  font-weight: var(--sf-icon--weight);
  font-style: normal;
  font-size: var(--sf-icon-size-3);
  font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
  line-height: 1;
  line-height: var(--sf-icon--line-height, 1);
  letter-spacing: normal;
  text-transform: none;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex: none;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: bottom;
  height: var(--sf-icon-size-3);
  height: var(--sf-icon--height, var(--sf-icon-size-3));
  width: var(--sf-icon-size-3);
  width: var(--sf-icon--width, var(--sf-icon-size-3));
}
.sf-icon:not(.hidden) {
  display: inline-flex;
}
:root[data-sf-icons=subset-pending] .sf-icon {
  --sf-icon--font-family: "Material Symbols Outlined Subset";
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}
.sf-icon--size-1\/4 {
  --sf-icon--font-size: var(--sf-icon-size-1\/4);
  --sf-icon--width: var(--sf-icon-size-1\/4);
  --sf-icon--height: var(--sf-icon-size-1\/4);
}
.sf-icon--size-1\/3 {
  --sf-icon--font-size: var(--sf-icon-size-1\/3);
  --sf-icon--width: var(--sf-icon-size-1\/3);
  --sf-icon--height: var(--sf-icon-size-1\/3);
}
.sf-icon--size-1\/2 {
  --sf-icon--font-size: var(--sf-icon-size-1\/2);
  --sf-icon--width: var(--sf-icon-size-1\/2);
  --sf-icon--height: var(--sf-icon-size-1\/2);
}
.sf-icon--size-1 {
  --sf-icon--font-size: var(--sf-icon-size-1);
  --sf-icon--width: var(--sf-icon-size-1);
  --sf-icon--height: var(--sf-icon-size-1);
}
.sf-icon--size-2 {
  --sf-icon--font-size: var(--sf-icon-size-2);
  --sf-icon--width: var(--sf-icon-size-2);
  --sf-icon--height: var(--sf-icon-size-2);
}
.sf-icon--size-3 {
  --sf-icon--font-size: var(--sf-icon-size-3);
  --sf-icon--width: var(--sf-icon-size-3);
  --sf-icon--height: var(--sf-icon-size-3);
}
.sf-icon--size-4 {
  --sf-icon--font-size: var(--sf-icon-size-4);
  --sf-icon--width: var(--sf-icon-size-4);
  --sf-icon--height: var(--sf-icon-size-4);
}
.sf-icon--size-5 {
  --sf-icon--font-size: var(--sf-icon-size-5);
  --sf-icon--width: var(--sf-icon-size-5);
  --sf-icon--height: var(--sf-icon-size-5);
}
.sf-icon--size-6 {
  --sf-icon--font-size: var(--sf-icon-size-6);
  --sf-icon--width: var(--sf-icon-size-6);
  --sf-icon--height: var(--sf-icon-size-6);
}
.sf-icon--size-7 {
  --sf-icon--font-size: var(--sf-icon-size-7);
  --sf-icon--width: var(--sf-icon-size-7);
  --sf-icon--height: var(--sf-icon-size-7);
}

.sf-icon--weight-thin,
.sf-icon-thin {
  --sf-icon--weight: var(--sf-weight--thin);
}

.sf-icon--weight-extra-light,
.sf-icon-extra-light {
  --sf-icon--weight: var(--sf-weight--extra-light);
}

.sf-icon--weight-light,
.sf-icon-light {
  --sf-icon--weight: var(--sf-weight--light);
}

.sf-icon--weight-regular,
.sf-icon-regular {
  --sf-icon--weight: var(--sf-weight--regular);
}

.sf-icon--weight-medium,
.sf-icon-medium {
  --sf-icon--weight: var(--sf-weight--medium);
}

.sf-icon--weight-semi-bold,
.sf-icon-semi-bold {
  --sf-icon--weight: var(--sf-weight--semi-bold);
}

.sf-icon--weight-bold,
.sf-icon-bold {
  --sf-icon--weight: var(--sf-weight--bold);
}

/* The colour of a glyph, and the only part of this file that is layered. The
   rest of `.sf-icon` is unlayered, which puts it above every layer -- so the
   colour was above them too, and a colour utility on a glyph did nothing at
   all: `color-on-surface-variant` read as applied and the glyph drew in
   currentColor regardless. In the base layer the token still answers wherever
   nothing else speaks, and a utility or a component's own rule now wins over
   it, which is the order the rest of the Framework is written in. */
@layer sf.base {
  .sf-icon {
    color: currentColor;
    color: var(--sf-icon--color, currentColor);
  }
}
.sf-icon--filled,
.sf-icon-filled,
.sf-icon-solid {
  --sf-icon--fill: 1;
}

.sf-icon--rounded,
.sf-icon-rounded {
  --sf-icon--font-family: "Material Symbols Rounded";
}

.sf-icon--sharp,
.sf-icon-shape {
  --sf-icon--font-family: "Material Symbols Sharp";
}

/*
 * Reserve the final icon geometry before the Smart Component is registered.
 * The light-DOM host is intentionally empty until JavaScript renders the
 * internal `.sf-icon`, so without this contract controls grow after first
 * paint. The same variables are used by the rendered icon above.
 */
sf-icon:not(:defined) {
  display: inline-flex;
  flex: none;
  width: var(--sf-icon-size-3);
  width: var(--sf-icon--width, var(--sf-icon-size-3));
  height: var(--sf-icon-size-3);
  height: var(--sf-icon--height, var(--sf-icon-size-3));
  vertical-align: bottom;
}

sf-icon[size="1/4"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/4);
  --sf-icon--height: var(--sf-icon-size-1\/4);
}

sf-icon[size="1/3"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/3);
  --sf-icon--height: var(--sf-icon-size-1\/3);
}

sf-icon[size="1/2"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/2);
  --sf-icon--height: var(--sf-icon-size-1\/2);
}

sf-icon[size="1"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1);
  --sf-icon--height: var(--sf-icon-size-1);
}

sf-icon[size="2"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-2);
  --sf-icon--height: var(--sf-icon-size-2);
}

sf-icon[size="3"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-3);
  --sf-icon--height: var(--sf-icon-size-3);
}

sf-icon[size="4"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-4);
  --sf-icon--height: var(--sf-icon-size-4);
}

sf-icon[size="5"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-5);
  --sf-icon--height: var(--sf-icon-size-5);
}

sf-icon[size="6"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-6);
  --sf-icon--height: var(--sf-icon-size-6);
}

sf-icon[size="7"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-7);
  --sf-icon--height: var(--sf-icon-size-7);
}

/* docara-shell-source: runtime/component/checkbox/css/checkbox.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-checkbox,
  .sf-checkbox .sf-checkbox-container {
    min-width: 0;
  }
  .sf-checkbox .sf-checkbox-label,
  .sf-checkbox .sf-checkbox-description {
    word-wrap: anywhere;
  }
  .sf-checkbox-box {
    position: relative;
    flex-shrink: 0;
  }
  /* The native control is the hit area. It covers the mark and reaches at
     least 24px on each axis (WCAG 2.2, 2.5.8) where the mark is smaller: a size
     1/2 mark is 16px on mobile, a size 1 mark 20. The inset only goes negative,
     evenly on both sides, so a larger mark keeps its own box and RTL needs
     nothing. The mark itself does not change. */
  .sf-checkbox-box > input[type=checkbox] {
    position: absolute;
    top: min(0px, (100% - var(--sf-c2)) / 2);
    right: min(0px, (100% - var(--sf-c2)) / 2);
    bottom: min(0px, (100% - var(--sf-c2)) / 2);
    left: min(0px, (100% - var(--sf-c2)) / 2);
    inset: min(0px, (100% - var(--sf-c2)) / 2) min(0px, (100% - var(--sf-c2)) / 2);
    width: max(100%, var(--sf-c2));
    inline-size: max(100%, var(--sf-c2));
    height: max(100%, var(--sf-c2));
    block-size: max(100%, var(--sf-c2));
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
}
@layer sf.override {
  .sf-checkbox > .sf-checkbox-box > .sf-icon, .sf-checkbox > .sf-checkbox-box > sf-icon > .sf-icon {
    max-width: 100%;
    max-height: 100%;
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-checkbox {
    background-color: transparent;
    background-color: var(--sf-checkbox--background-color, transparent);
    gap: var(--sf-checkbox--gap);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-bottom-right-radius: var(--sf-checkbox-box--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-bottom-right-radius: var(--sf-checkbox-box--border-end-end-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-checkbox-box--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-bottom-left-radius: var(--sf-checkbox-box--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-bottom-left-radius: var(--sf-checkbox-box--border-end-end-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-checkbox-box--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-bottom-left-radius: var(--sf-checkbox-box--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-bottom-left-radius: var(--sf-checkbox-box--border-end-start-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-checkbox-box--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-bottom-right-radius: var(--sf-checkbox-box--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-bottom-right-radius: var(--sf-checkbox-box--border-end-start-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-checkbox-box--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-top-right-radius: var(--sf-checkbox-box--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-top-right-radius: var(--sf-checkbox-box--border-start-end-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-checkbox-box--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-top-left-radius: var(--sf-checkbox-box--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-top-left-radius: var(--sf-checkbox-box--border-start-end-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-checkbox-box--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-top-left-radius: var(--sf-checkbox-box--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-checkbox .sf-checkbox-box {
    border-top-left-radius: var(--sf-checkbox-box--border-start-start-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-checkbox-box--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-top-right-radius: var(--sf-checkbox-box--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-checkbox .sf-checkbox-box {
    border-top-right-radius: var(--sf-checkbox-box--border-start-start-radius);
    }
  }
  .sf-checkbox .sf-checkbox-box:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-checkbox-box--border-start-start-radius);
  }
  .sf-checkbox .sf-checkbox-box {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where the
       resting box is drawn -- here and by size -- and not by checked, hover,
       pressed, error or disabled, so states still show. */
    --sf-checkbox-box--background-color: var(--sf-checkbox-background-color, var(--sf-surface-0));
    --sf-checkbox-box--border: var(--sf-checkbox-border-width, var(--sf-px)) solid;
    --sf-checkbox-box--border-color: var(--sf-checkbox-border-color, var(--sf-outline));
    --sf-checkbox-box--border-end-end-radius: var(--sf-checkbox-radius, var(--sf-radius--ui));
    --sf-checkbox-box--border-end-start-radius: var(--sf-checkbox-radius, var(--sf-radius--ui));
    --sf-checkbox-box--border-start-end-radius: var(--sf-checkbox-radius, var(--sf-radius--ui));
    --sf-checkbox-box--border-start-start-radius: var(--sf-checkbox-radius, var(--sf-radius--ui));
    background-color: var(--sf-checkbox-box--background-color);
    border: 0 solid;
    border: var(--sf-checkbox-box--border, 0 solid);
    border-color: transparent;
    border-color: var(--sf-checkbox-box--border-color, transparent);
    border-end-end-radius: var(--sf-checkbox-box--border-end-end-radius);
    border-end-start-radius: var(--sf-checkbox-box--border-end-start-radius);
    border-start-end-radius: var(--sf-checkbox-box--border-start-end-radius);
    border-start-start-radius: var(--sf-checkbox-box--border-start-start-radius);
    box-shadow: var(--sf-checkbox-box--box-shadow);
    height: var(--sf-checkbox-box--height);
    width: var(--sf-checkbox-box--width);
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--sf-animation);
  }
  /* 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) */
  .sf-checkbox .sf-checkbox-container {
    --sf-checkbox-container--background-color: transparent;
    background-color: var(--sf-checkbox-container--background-color);
  }
  .sf-checkbox .sf-checkbox-description {
    --sf-checkbox-description--color: var(--sf-on-surface-variant);
    --sf-checkbox-description--font-family: var(--sf-text--family);
    --sf-checkbox-description--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-checkbox-description--color);
    font-family: var(--sf-checkbox-description--font-family);
    font-size: var(--sf-checkbox-description--font-size);
    font-weight: var(--sf-checkbox-description--font-weight);
    line-height: var(--sf-checkbox-description--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-checkbox-top--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-checkbox .sf-checkbox-top {
    --sf-checkbox-top--background-color: transparent;
    --sf-checkbox-top--gap: var(--sf-space-1\/4);
    background-color: var(--sf-checkbox-top--background-color);
    gap: var(--sf-checkbox-top--gap);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-checkbox .sf-checkbox-label {
    --sf-checkbox-label--background-color: transparent;
    background-color: var(--sf-checkbox-label--background-color);
    color: var(--sf-checkbox-label--color);
    font-family: var(--sf-checkbox-label--font-family);
    font-size: var(--sf-checkbox-label--font-size);
    font-weight: var(--sf-checkbox-label--font-weight);
    line-height: var(--sf-checkbox-label--line-height);
    --sf-checkbox-label--font-family: var(--sf-text--family);
    --sf-checkbox-label--font-weight: var(--sf-font-weight-medium);
  }
  .sf-checkbox .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-checkbox.sf-checkbox--size-1\/2 .sf-checkbox-box {
    --sf-checkbox-box--height: var(--sf-checkbox-size, var(--sf-text-height-1\/2));
    --sf-checkbox-box--width: var(--sf-checkbox-size, var(--sf-text-height-1\/2));
  }
  .sf-checkbox.sf-checkbox--size-1 .sf-checkbox-box {
    --sf-checkbox-box--height: var(--sf-checkbox-size, var(--sf-text-height-1));
    --sf-checkbox-box--width: var(--sf-checkbox-size, var(--sf-text-height-1));
  }
  .sf-checkbox.sf-checkbox--size-1\/2 > .sf-checkbox-container > .sf-checkbox-top > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-checkbox.sf-checkbox--size-1 > .sf-checkbox-container > .sf-checkbox-top > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox.sf-checkbox--size-1\/2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
  }
  .sf-checkbox.sf-checkbox--size-1 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
  }
  .sf-checkbox.sf-checkbox--size-1\/2 .sf-checkbox-description {
    --sf-checkbox-description--font-size: var(--sf-text-size-1\/3);
    --sf-checkbox-description--line-height: var(--sf-text-height-1\/3);
  }
  .sf-checkbox.sf-checkbox--size-1 .sf-checkbox-description {
    --sf-checkbox-description--font-size: var(--sf-text-size-1\/2);
    --sf-checkbox-description--line-height: var(--sf-text-height-1\/2);
  }
  .sf-checkbox.sf-checkbox--size-1\/2 .sf-checkbox-label {
    --sf-checkbox-label--font-size: var(--sf-text-size-1\/2);
    --sf-checkbox-label--line-height: var(--sf-text-height-1\/2);
  }
  .sf-checkbox.sf-checkbox--size-1 .sf-checkbox-label {
    --sf-checkbox-label--font-size: var(--sf-text-size-1);
    --sf-checkbox-label--line-height: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1\/2[\:has\(input\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1\/2:has(input) > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1[\:has\(input\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1:has(input) > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  /* The mark is the picture before a label: the label follows it at the size's
     text step, as an option label follows its picture in a list. */
  .sf-checkbox--size-1\/2 {
    --sf-checkbox--gap: var(--sf-checkbox-gap, var(--sf-ui-1\/2--text-space-x));
  }
  .sf-checkbox--size-1 {
    --sf-checkbox--gap: var(--sf-checkbox-gap, var(--sf-ui-1--text-space-x));
  }
  .sf-checkbox.error .sf-checkbox-box {
    --sf-checkbox-box--border-color: var(--sf-error);
  }
  .sf-checkbox[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\)] {
    cursor: pointer;
  }
  .sf-checkbox:has(input:enabled:not(:disabled):not(.disabled)) {
    cursor: pointer;
  }
}
@layer sf.states {
  .sf-checkbox:not(.error)[\:has\(input\:not\(\:checked\)\)] .sf-checkbox-label, .sf-checkbox:not(.error)[\:has\(input\:indeterminate\)] .sf-checkbox-label, .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)][\:has\(input\:indeterminate\)] .sf-checkbox-label, .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)][\:has\(input\:checked\)] .sf-checkbox-label, .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)][\:has\(input\:indeterminate\)] .sf-checkbox-label, .sf-checkbox.error[\:has\(input\:not\(\:checked\)\)] .sf-checkbox-label {
    --sf-checkbox-label--color: var(--sf-on-surface);
  }
  .sf-checkbox:not(.error):has(input:not(:checked)) .sf-checkbox-label, .sf-checkbox:not(.error):has(input:indeterminate) .sf-checkbox-label, .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):hover):has(input:indeterminate) .sf-checkbox-label, .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):active):has(input:checked) .sf-checkbox-label, .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):active):has(input:indeterminate) .sf-checkbox-label, .sf-checkbox.error:has(input:not(:checked)) .sf-checkbox-label {
    --sf-checkbox-label--color: var(--sf-on-surface);
  }
  .sf-checkbox:not(.error)[\:has\(input\:indeterminate\)][\:not-has\(input\:disabled\)] .sf-checkbox-box, .sf-checkbox:not(.error)[\:has\(input\:checked\)][\:not-has\(input\:disabled\)] .sf-checkbox-box, .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] .sf-checkbox-box {
    --sf-checkbox-box--background-color: var(--sf-primary);
    --sf-checkbox-box--border-color: var(--sf-primary);
  }
  .sf-checkbox:not(.error):has(input:indeterminate):not(:has(input:disabled)) .sf-checkbox-box, .sf-checkbox:not(.error):has(input:checked):not(:has(input:disabled)) .sf-checkbox-box, .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):active) .sf-checkbox-box {
    --sf-checkbox-box--background-color: var(--sf-primary);
    --sf-checkbox-box--border-color: var(--sf-primary);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1\/2[\:has\(input\:indeterminate\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1\/2:has(input:indeterminate) > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1[\:has\(input\:indeterminate\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1:has(input:indeterminate) > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox.sf-checkbox--size-2 .sf-checkbox-box {
    --sf-checkbox-box--height: var(--sf-checkbox-size, var(--sf-text-height-2));
    --sf-checkbox-box--width: var(--sf-checkbox-size, var(--sf-text-height-2));
  }
  .sf-checkbox.sf-checkbox--size-2 > .sf-checkbox-container > .sf-checkbox-top > .sf-icon {
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-checkbox.sf-checkbox--size-2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
  }
  .sf-checkbox.sf-checkbox--size-2 .sf-checkbox-description {
    --sf-checkbox-description--font-size: var(--sf-text-size-1);
    --sf-checkbox-description--line-height: var(--sf-text-height-1);
  }
  .sf-checkbox.sf-checkbox--size-2 .sf-checkbox-label {
    --sf-checkbox-label--font-size: var(--sf-text-size-2);
    --sf-checkbox-label--line-height: var(--sf-text-height-2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2[\:has\(input\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2:has(input) > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-checkbox--size-2 {
    --sf-checkbox--gap: var(--sf-checkbox-gap, var(--sf-ui-2--text-space-x));
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2[\:has\(input\:indeterminate\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2:has(input:indeterminate) > .sf-checkbox-box .sf-icon {
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-checkbox:not(.error)[\:has\(input\:indeterminate\)][\:not-has\(input\:disabled\)] > .sf-checkbox-box .sf-icon,
  .sf-checkbox:not(.error)[\:has\(input\:checked\)][\:not-has\(input\:disabled\)] > .sf-checkbox-box .sf-icon,
  .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-checkbox:not(.error):has(input:indeterminate):not(:has(input:disabled)) > .sf-checkbox-box .sf-icon,
  .sf-checkbox:not(.error):has(input:checked):not(:has(input:disabled)) > .sf-checkbox-box .sf-icon,
  .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):active) > .sf-checkbox-box .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-checkbox[\:has\(input\:disabled\)] > .sf-checkbox-container > .sf-checkbox-top .sf-icon,
  .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:indeterminate\)] > .sf-checkbox-box .sf-icon,
  .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:checked\)] > .sf-checkbox-box .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-checkbox:has(input:disabled) > .sf-checkbox-container > .sf-checkbox-top .sf-icon,
  .sf-checkbox:has(input:disabled):has(input:indeterminate) > .sf-checkbox-box .sf-icon,
  .sf-checkbox:has(input:disabled):has(input:checked) > .sf-checkbox-box .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:not\(\:checked\)\)] .sf-checkbox-label,
  .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:indeterminate\)] .sf-checkbox-label,
  .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:checked\)] .sf-checkbox-label {
    --sf-checkbox-label--color: var(--sf-on-disable);
  }
  .sf-checkbox:has(input:disabled):has(input:not(:checked)) .sf-checkbox-label,
  .sf-checkbox:has(input:disabled):has(input:indeterminate) .sf-checkbox-label,
  .sf-checkbox:has(input:disabled):has(input:checked) .sf-checkbox-label {
    --sf-checkbox-label--color: var(--sf-on-disable);
  }
  .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] .sf-checkbox-box {
    --sf-checkbox-box--border-color: var(--sf-primary-hover);
  }
  .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):hover) .sf-checkbox-box {
    --sf-checkbox-box--border-color: var(--sf-primary-hover);
  }
  .sf-checkbox[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-checkbox-box {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-checkbox:has(input:not(:disabled):not(.disabled).focus-visible) .sf-checkbox-box {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-checkbox[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-checkbox-box {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-checkbox:has(input:not(:disabled):not(.disabled):focus-visible) .sf-checkbox-box {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* The global :focus-visible rule paints the ring on whatever holds the focus.
     Here the focus lives on the bare control while the ring belongs to the part
     the person sees, so the control gives its own ring up: one component, one
     ring. */
  .sf-checkbox input.focus-visible {
    outline: none;
  }
  .sf-checkbox input:focus-visible {
    outline: none;
  }
  .sf-checkbox[\:has\(input\:disabled\)] .sf-checkbox-box {
    --sf-checkbox-box--border-color: var(--sf-outline-disable);
  }
  .sf-checkbox:has(input:disabled) .sf-checkbox-box {
    --sf-checkbox-box--border-color: var(--sf-outline-disable);
  }
  .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:checked\,\%20input\:indeterminate\)] .sf-checkbox-box {
    --sf-checkbox-box--background-color: var(--sf-disable);
  }
  .sf-checkbox:has(input:disabled):has(input:checked, input:indeterminate) .sf-checkbox-box {
    --sf-checkbox-box--background-color: var(--sf-disable);
  }
  .sf-checkbox[\:has\(input\:disabled\)] .sf-checkbox-description {
    --sf-checkbox-description--color: var(--sf-on-disable);
  }
  .sf-checkbox:has(input:disabled) .sf-checkbox-description {
    --sf-checkbox-description--color: var(--sf-on-disable);
  }
}
@layer sf.states {
  @media (prefers-reduced-motion: reduce) {
    .sf-checkbox .sf-checkbox-box {
      transition-duration: 0s;
    }
  }
  @media (forced-colors: active) {
    .sf-checkbox .sf-checkbox-box {
      forced-color-adjust: none;
      background-color: Canvas;
      border-color: ButtonText;
    }
    .sf-checkbox .sf-checkbox-box .sf-icon {
      color: CanvasText;
    }
    .sf-checkbox[\:has\(input\:checked\,\%20input\:indeterminate\)] .sf-checkbox-box {
      background-color: Highlight;
      border-color: Highlight;
    }
    .sf-checkbox:has(input:checked, input:indeterminate) .sf-checkbox-box {
      background-color: Highlight;
      border-color: Highlight;
    }
    .sf-checkbox[\:has\(input\:checked\,\%20input\:indeterminate\)] .sf-checkbox-box .sf-icon {
      color: HighlightText;
    }
    .sf-checkbox:has(input:checked, input:indeterminate) .sf-checkbox-box .sf-icon {
      color: HighlightText;
    }
    .sf-checkbox[\:has\(input\:disabled\)] .sf-checkbox-box {
      background-color: Canvas;
      border-color: GrayText;
    }
    .sf-checkbox:has(input:disabled) .sf-checkbox-box {
      background-color: Canvas;
      border-color: GrayText;
    }
    .sf-checkbox[\:has\(input\:disabled\)] .sf-checkbox-box .sf-icon {
      color: GrayText;
    }
    .sf-checkbox:has(input:disabled) .sf-checkbox-box .sf-icon {
      color: GrayText;
    }
    .sf-checkbox[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-checkbox-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-checkbox-box--box-shadow: none;
    }
    .sf-checkbox:has(input:not(:disabled):not(.disabled).focus-visible) .sf-checkbox-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-checkbox-box--box-shadow: none;
    }
    .sf-checkbox[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-checkbox-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-checkbox-box--box-shadow: none;
    }
    .sf-checkbox:has(input:not(:disabled):not(.disabled):focus-visible) .sf-checkbox-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-checkbox-box--box-shadow: none;
    }
  }
}

/* docara-shell-source: smart/smart/checkbox/css/checkbox.css */
@layer sf.components {
  .sf-checkbox.sf-checkbox--size-1 > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1[\:has\(input\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1:has(input) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox.sf-checkbox--size-2 > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2[\:has\(input\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2:has(input) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
}
@layer sf.states {
  .sf-checkbox:not(.error).sf-checkbox--size-1[\:has\(input\:indeterminate\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-1:has(input:indeterminate) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-checkbox:not(.error)[\:has\(input\:checked\)][\:not-has\(input\:disabled\)] > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-checkbox:not(.error):has(input:checked):not(:has(input:disabled)) > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox:not(.error):has(input:enabled:not(:disabled):not(.disabled):active) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-checkbox[\:has\(input\:disabled\)] > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon, .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:indeterminate\)] > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox[\:has\(input\:disabled\)][\:has\(input\:checked\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-checkbox:has(input:disabled) > .sf-checkbox-container > .sf-checkbox-top > sf-icon > .sf-icon, .sf-checkbox:has(input:disabled):has(input:indeterminate) > .sf-checkbox-box > sf-icon > .sf-icon, .sf-checkbox:has(input:disabled):has(input:checked) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2[\:has\(input\:indeterminate\)] > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-checkbox:not(.error).sf-checkbox--size-2:has(input:indeterminate) > .sf-checkbox-box > sf-icon > .sf-icon {
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
}

/* docara-shell-source: runtime/component/icon-buttons/css/icon-buttons.css */
/* A button's border is inside its control height: the padding gives each side's
   border back. The side widths are registered as lengths, so a unitless 0
   written by a group, a tab row or a host still subtracts; unregistered, it
   would invalidate the padding. Measured before: outline, surface and every
   segmented button stood 2px taller than its size. */
@property --sf-icon-button--border-top-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-bottom-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-inline-start-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-inline-end-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  .sf-icon-button {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where a
       resting look is defined -- base, size, spacing, appearance, scheme -- and
       not by hover, focus, pressed, disabled, loading or a group's segments, so
       states and joined groups still show. */
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));
    --sf-icon-button--radius: var(--sf-icon-button-radius, var(--sf-radius--ui));
    border-end-end-radius: var(--sf-icon-button--radius);
    border-end-end-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    border-end-start-radius: var(--sf-icon-button--radius);
    border-end-start-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    border-start-end-radius: var(--sf-icon-button--radius);
    border-start-end-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    border-start-start-radius: var(--sf-icon-button--radius);
    border-start-start-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    -webkit-padding-start: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
            padding-inline-start: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    padding-top: calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));
    -webkit-padding-end: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
            padding-inline-end: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    padding-bottom: calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));
    /* The public border reaches every appearance, as on sf-button: the side
       widths are registered lengths inside the control height. Outline,
       surface and a group's segments set them after this, and win. */
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, 0);
    background-color: var(--sf-icon-button--background-color);
    border-color: transparent;
    border-color: var(--sf-icon-button--border-color, var(--sf-icon-button-border-color, transparent));
    border-width: 0;
    border-width: var(--sf-icon-button--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-icon-button--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-icon-button--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-icon-button--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-icon-button--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-icon-button--border-style, solid);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0);
    box-shadow: var(--sf-icon-button--focus-inset, 0 0 rgba(0, 0, 0, 0)), var(--sf-icon-button--box-shadow, 0 0 rgba(0, 0, 0, 0));
  }
  .sf-icon-button .sf-close-icon {
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
  }
  .sf-icon-button .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-surface-container));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface-inverse));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface-inverse));
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-icon-button--size-1 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
  }
  .sf-icon-button--size-1.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-icon-button--size-1.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-icon-button--size-1.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-icon-button--size-1.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-icon-button--size-1.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-icon-button--size-1.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-icon-button--size-2 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
  }
  .sf-icon-button--size-2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-icon-button--size-2.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-icon-button--size-2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-icon-button--size-2.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-icon-button--size-2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-icon-button--size-2.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-icon-button--size-3 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
  }
  .sf-icon-button--size-3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-icon-button--size-3.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-icon-button--size-3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-icon-button--size-3.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-icon-button--size-3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-icon-button--size-3.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/2 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
  }
  .sf-icon-button--size-1\/2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/2.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/2.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/2.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/3 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
  }
  .sf-icon-button--size-1\/3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/3.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/3.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/3.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-icon-button--outline {
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px));
  }
  .sf-icon-button.radius-default {
    border-radius: var(--sf-radius-default);
  }
  .sf-icon-button.radius-square {
    border-radius: var(--sf-radius-square);
  }
  .sf-icon-button.radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .sf-icon-button.segment-start {
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  .sf-icon-button.segment-middle {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button.segment-end {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  /* Surface, built on the neutral alpha ramp. Same reading as on the button: not
     a colour of its own but a degree of contrast against whatever is behind it,
     so one declaration is right in both themes. The icon keeps the role colour,
     because the fill is too faint to carry one. `--ghost` reads as `--link`, as
     on the button. */
  .sf-icon-button.sf-icon-button--surface {
    --sf-icon-button--background-color: transparent;
  }
  .sf-icon-button.sf-icon-button--surface {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-alpha-4));
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-alpha-8));
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--primary {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary));
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-secondary-container-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-secondary-container-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-on-surface-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-on-surface-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* The same second line the button draws: on a filled control the ring
       colour can sit next to the fill on one ramp and disappear into it, so the
       control's own ink separates them. Transparent where there is no fill to
       separate from. */
    --sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent);
  }
  .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* The same second line the button draws: on a filled control the ring
       colour can sit next to the fill on one ramp and disappear into it, so the
       control's own ink separates them. Transparent where there is no fill to
       separate from. */
    --sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary {
    --sf-icon-button--focus-ink: var(--sf-on-primary);
  }
  /* Flush against its neighbours, so the ring turns inwards. Same colour, same
     width, only the offset changes sign. */
  .sf-icon-button.segment-start:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled).focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-icon-button.segment-start:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled):focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
    .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
  }
  /* The states of the two ramp appearances: one step up on hover, another when
     pressed, and surface raises its border alongside. */
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-alpha-8);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover {
    --sf-icon-button--border-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active {
    --sf-icon-button--border-color: var(--sf-alpha-16);
  }
  .sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled) {
    --sf-icon-button--border-color: var(--sf-alpha-16);
  }
  .sf-icon-button.sf-icon-button--surface:disabled,
  .sf-icon-button.sf-icon-button--surface.disabled {
    --sf-icon-button--background-color: transparent;
    --sf-icon-button--border-color: var(--sf-alpha-4);
  }
  .sf-icon-button.sf-icon-button--surface:disabled,
  .sf-icon-button.sf-icon-button--surface.disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--surface:disabled > .sf-close > .sf-close-icon,
  .sf-icon-button.sf-icon-button--surface.disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
}
/* The destructive scheme. Every role it paints with is the error family's twin
   of the primary one -- fill, text, hover, active, disabled and the focus ink --
   so a destructive control behaves exactly like a primary one and only its
   colour says what it does. Added because the Framework had error roles and no
   way for a control to use them: a product that wanted a red delete had to
   reach past the component and set its colour by hand, and the next one would
   have done it again. The outline's border stays the neutral control outline,
   as it does for every other scheme. */
@layer sf.components {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active));
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error {
    --sf-icon-button--focus-ink: var(--sf-on-error);
  }
}
@layer sf.override {
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-icon-button.sf-icon-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
}
/* An icon button sets .loading as a button does (sf-icon-button loading) and
   had no rule for it: it went disabled with no sign of work. The same stripes
   as .sf-button.loading, defined here so the icon-button sheet alone draws them. */
@layer sf.components {
  .sf-icon-button {
    --sf-icon-button-loading-stripe: var(--sf-alpha-8);
  }
  .sf-icon-button > * {
    position: relative;
    z-index: 1;
  }
  .sf-icon-button.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }
  .sf-icon-button.loading::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    inset: -50%;
    background-image: repeating-linear-gradient(135deg, var(--sf-icon-button-loading-stripe) 0, var(--sf-icon-button-loading-stripe) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));
    -webkit-animation: sf-icon-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
            animation: sf-icon-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
    will-change: transform;
    pointer-events: none;
  }
  @-webkit-keyframes sf-icon-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @keyframes sf-icon-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-icon-button.loading::after {
      -webkit-animation: none;
              animation: none;
    }
  }
}

/* docara-shell-source: runtime/component/dropdown/css/dropdown.css */
/* A row's divider is inside its control height: the bottom padding gives the
   border back, so a standalone row and the same row in a list without
   dividers stand equally tall. The width is registered as a length, so a
   unitless 0 written by a list still subtracts; unregistered, it would
   invalidate the padding. Measured before: a standalone row stood one pixel
   taller than the control height at every size. */
@property --sf-list-item--border-bottom-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list-item {
    padding-left: var(--sf-list-item--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-list-item {
    padding-left: var(--sf-list-item--padding-inline-start);
    }
  }
  .sf-list-item:where(:dir(ltr)) {
    padding-left: var(--sf-list-item--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list-item {
    padding-right: var(--sf-list-item--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-list-item {
    padding-right: var(--sf-list-item--padding-inline-start);
    }
  }
  .sf-list-item:where(:dir(rtl)) {
    padding-right: var(--sf-list-item--padding-inline-start);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list-item {
    padding-right: var(--sf-list-item--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-list-item {
    padding-right: var(--sf-list-item--padding-inline-end);
    }
  }
  .sf-list-item:where(:dir(ltr)) {
    padding-right: var(--sf-list-item--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list-item {
    padding-left: var(--sf-list-item--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-list-item {
    padding-left: var(--sf-list-item--padding-inline-end);
    }
  }
  .sf-list-item:where(:dir(rtl)) {
    padding-left: var(--sf-list-item--padding-inline-end);
  }
  .sf-list-item {
    -webkit-padding-start: var(--sf-list-item--padding-inline-start);
            padding-inline-start: var(--sf-list-item--padding-inline-start);
    padding-top: var(--sf-list-item--padding-top);
    -webkit-padding-end: var(--sf-list-item--padding-inline-end);
            padding-inline-end: var(--sf-list-item--padding-inline-end);
    padding-bottom: calc(var(--sf-list-item--padding-bottom) - var(--sf-list-item--border-bottom-width));
    background-color: var(--sf-list-item--background-color);
    border-color: transparent;
    border-color: var(--sf-list-item--border-color, transparent);
    border-bottom-width: var(--sf-list-item--border-bottom-width);
    border-style: solid;
    border-style: var(--sf-list-item--border-style, solid);
    box-shadow: var(--sf-list-item--box-shadow);
    --sf-list-item--background-color: var(--sf-elevation-1--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-1--variant);
    --sf-list-item--border-color: var(--sf-outline-variant);
    --sf-list-item--border-bottom-width: var(--sf-px);
    --sf-list-item--border-style: solid;
    min-width: 0;
    min-inline-size: 0;
    transition-property: background-color, border-color, box-shadow, color;
    transition-duration: var(--sf-duration-fast);
    transition-timing-function: var(--sf-animation);
  }
  /* The wrap lays out its own row: it fills the option, so the selected mark
     that follows it sits at the end, and its picture and label share one centre
     line. Markup without the flex utilities used to shrink it to the label and
     put the mark right after the text. */
  .sf-list-item .sf-list-item-wrap {
    background-color: var(--sf-list-item-wrap--background-color);
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    min-inline-size: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list-item .sf-list-item-container {
    padding-right: var(--sf-list-item-container--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-list-item .sf-list-item-container {
    padding-right: var(--sf-list-item-container--padding-inline-end);
    }
  }
  .sf-list-item .sf-list-item-container:where(:dir(ltr)) {
    padding-right: var(--sf-list-item-container--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list-item .sf-list-item-container {
    padding-left: var(--sf-list-item-container--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-list-item .sf-list-item-container {
    padding-left: var(--sf-list-item-container--padding-inline-end);
    }
  }
  .sf-list-item .sf-list-item-container:where(:dir(rtl)) {
    padding-left: var(--sf-list-item-container--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list-item .sf-list-item-container {
    padding-left: var(--sf-list-item-container--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-list-item .sf-list-item-container {
    padding-left: var(--sf-list-item-container--padding-inline-start);
    }
  }
  .sf-list-item .sf-list-item-container:where(:dir(ltr)) {
    padding-left: var(--sf-list-item-container--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list-item .sf-list-item-container {
    padding-right: var(--sf-list-item-container--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-list-item .sf-list-item-container {
    padding-right: var(--sf-list-item-container--padding-inline-start);
    }
  }
  .sf-list-item .sf-list-item-container:where(:dir(rtl)) {
    padding-right: var(--sf-list-item-container--padding-inline-start);
  }
  .sf-list-item .sf-list-item-container {
    background-color: var(--sf-list-item-container--background-color);
    color: var(--sf-list-item-container--color);
    font-family: var(--sf-list-item-container--font-family);
    font-size: var(--sf-list-item-container--font-size);
    font-weight: var(--sf-list-item-container--font-weight);
    line-height: var(--sf-list-item-container--line-height);
    -webkit-padding-end: var(--sf-list-item-container--padding-inline-end);
            padding-inline-end: var(--sf-list-item-container--padding-inline-end);
    -webkit-padding-start: var(--sf-list-item-container--padding-inline-start);
            padding-inline-start: var(--sf-list-item-container--padding-inline-start);
    min-width: 0;
    min-inline-size: 0;
    word-wrap: anywhere;
  }
  .sf-list-item .sf-tag {
    background-color: var(--sf-tag--background-color);
  }
  .sf-list-item .sf-tag-container {
    font-size: var(--sf-tag-container--font-size);
    line-height: var(--sf-tag-container--line-height);
  }
  .sf-list-item .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-text-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-text-size-3));
    height: var(--sf-text-size-3);
    height: var(--sf-icon--height, var(--sf-text-size-3));
    width: var(--sf-text-size-3);
    width: var(--sf-icon--width, var(--sf-text-size-3));
    flex-shrink: 0;
  }
  .sf-list-item .sf-avatar-label-group-title {
    color: var(--sf-avatar-label-group-title--color);
    font-size: var(--sf-avatar-label-group-title--font-size);
    line-height: var(--sf-avatar-label-group-title--line-height);
  }
  .sf-list-item .sf-list-item-selected-item {
    background-color: var(--sf-list-item-selected-item--background-color);
  }
  .sf-list-item .sf-avatar {
    opacity: var(--sf-avatar--opacity);
  }
  .sf-list-item .sf-checkbox-box {
    border-color: transparent;
    border-color: var(--sf-checkbox-box--border-color, transparent);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-1 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-1 .sf-list-item-container {
    --sf-list-item-container--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-list-item-container--padding-inline-start: var(--sf-ui-1--text-space-x);
    --sf-list-item-container--font-size: var(--sf-text-size-1);
    --sf-list-item-container--line-height: var(--sf-text-height-1);
  }
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-1 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-1 .sf-list-item-container, .sf-list-item.sf-list-item--checkbox.sf-list-item--size-2 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-2 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-2 .sf-list-item-container, .sf-list-item.sf-list-item--checkbox.sf-list-item--size-3 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-3 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-3 .sf-list-item-container, .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1\/2 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-1\/2 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/2 .sf-list-item-container, .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1\/3 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-1\/3 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/3 .sf-list-item-container {
    --sf-list-item-container--font-family: var(--sf-text--family);
    --sf-list-item-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-list-item.sf-list-item--checkbox .sf-list-item-container, .sf-list-item.sf-list-item--text .sf-list-item-container, .sf-list-item.sf-list-item--icon .sf-list-item-container {
    --sf-list-item-container--color: var(--sf-on-surface);
  }
  .sf-list-item.sf-list-item--icon.sf-list-item--size-1 > .sf-list-item-wrap > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-list-item.selected.sf-list-item--text .sf-list-item-selected-item, .sf-list-item.selected.sf-list-item--icon .sf-list-item-selected-item {
    --sf-list-item-selected-item--background-color: transparent;
  }
  .sf-list-item.selected.sf-list-item--text.sf-list-item--size-1 > .sf-list-item-selected-item > .sf-icon, .sf-list-item.selected.sf-list-item--icon.sf-list-item--size-1 > .sf-list-item-selected-item > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-list-item.selected.sf-list-item--text > .sf-list-item-selected-item > .sf-icon, .sf-list-item.selected.sf-list-item--icon > .sf-list-item-selected-item > .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-list-item.disabled.sf-list-item--checkbox .sf-list-item-container, .sf-list-item.disabled.sf-list-item--text .sf-list-item-container, .sf-list-item.disabled.sf-list-item--icon .sf-list-item-container {
    --sf-list-item-container--color: var(--sf-on-disable);
  }
  .sf-list-item.disabled.sf-list-item--avatar .sf-avatar-label-group-title {
    --sf-avatar-label-group-title--color: var(--sf-on-disable);
  }
  .sf-list-item.disabled.sf-list-item--icon > .sf-list-item-wrap > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-2 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-2 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-2 .sf-list-item-container {
    --sf-list-item-container--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-list-item-container--padding-inline-start: var(--sf-ui-2--text-space-x);
    --sf-list-item-container--font-size: var(--sf-text-size-2);
    --sf-list-item-container--line-height: var(--sf-text-height-2);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-2 .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-2);
    --sf-tag-container--line-height: var(--sf-text-height-2);
  }
  .sf-list-item.sf-list-item--icon.sf-list-item--size-2 > .sf-list-item-wrap > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-list-item.selected.sf-list-item--text.sf-list-item--size-2 > .sf-list-item-selected-item > .sf-icon, .sf-list-item.selected.sf-list-item--icon.sf-list-item--size-2 > .sf-list-item-selected-item > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-list-item.disabled.sf-list-item--checkbox .sf-checkbox-box {
    --sf-checkbox-box--border-color: var(--sf-on-disable);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-3 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-3 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-3 .sf-list-item-container {
    --sf-list-item-container--padding-inline-end: var(--sf-ui-3--text-space-x);
    --sf-list-item-container--padding-inline-start: var(--sf-ui-3--text-space-x);
    --sf-list-item-container--font-size: var(--sf-text-size-3);
    --sf-list-item-container--line-height: var(--sf-text-height-3);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-3 .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-3);
    --sf-tag-container--line-height: var(--sf-text-height-3);
  }
  .sf-list-item.sf-list-item--icon.sf-list-item--size-3 > .sf-list-item-wrap > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-list-item.selected.sf-list-item--text.sf-list-item--size-3 > .sf-list-item-selected-item > .sf-icon, .sf-list-item.selected.sf-list-item--icon.sf-list-item--size-3 > .sf-list-item-selected-item > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-list-item.disabled.sf-list-item--avatar.sf-list-item--size-3 .sf-avatar {
    --sf-avatar--opacity: var(--sf-opacity-30);
  }
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1\/2, .sf-list-item.sf-list-item--avatar.sf-list-item--size-1\/2, .sf-list-item.sf-list-item--text.sf-list-item--size-1\/2, .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/2, .sf-list-item.sf-list-item--avatar.sf-list-item--size-1\/3 {
    --sf-list-item--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1\/2 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-1\/2 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/2 .sf-list-item-container {
    --sf-list-item-container--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-list-item-container--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
    --sf-list-item-container--font-size: var(--sf-text-size-1\/2);
    --sf-list-item-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/2 > .sf-list-item-wrap > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-list-item.selected.sf-list-item--text.sf-list-item--size-1\/2 > .sf-list-item-selected-item > .sf-icon, .sf-list-item.selected.sf-list-item--icon.sf-list-item--size-1\/2 > .sf-list-item-selected-item > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-list-item.disabled.sf-list-item--checkbox.sf-list-item--size-1\/2, .sf-list-item.disabled.sf-list-item--avatar.sf-list-item--size-1\/2, .sf-list-item.disabled.sf-list-item--text.sf-list-item--size-1\/2, .sf-list-item.disabled.sf-list-item--icon.sf-list-item--size-1\/2, .sf-list-item.disabled.sf-list-item--avatar.sf-list-item--size-1\/3 {
    --sf-list-item--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1\/2, .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1\/3, .sf-list-item.sf-list-item--text.sf-list-item--size-1\/3, .sf-list-item.sf-list-item--color.sf-list-item--size-1\/3, .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/3 {
    --sf-list-item--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-list-item.disabled.sf-list-item--color.sf-list-item--size-1\/2, .sf-list-item.disabled.sf-list-item--checkbox.sf-list-item--size-1\/3, .sf-list-item.disabled.sf-list-item--text.sf-list-item--size-1\/3, .sf-list-item.disabled.sf-list-item--color.sf-list-item--size-1\/3, .sf-list-item.disabled.sf-list-item--icon.sf-list-item--size-1\/3 {
    --sf-list-item--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-list-item.sf-list-item--checkbox.sf-list-item--size-1\/3 .sf-list-item-container, .sf-list-item.sf-list-item--text.sf-list-item--size-1\/3 .sf-list-item-container, .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/3 .sf-list-item-container {
    --sf-list-item-container--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
    --sf-list-item-container--padding-inline-start: var(--sf-ui-1\/3--text-space-x);
    --sf-list-item-container--font-size: var(--sf-text-size-1\/3);
    --sf-list-item-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1\/3 .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/3);
    --sf-tag-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-list-item.sf-list-item--icon.sf-list-item--size-1\/3 > .sf-list-item-wrap > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-list-item.selected.sf-list-item--text.sf-list-item--size-1\/3 > .sf-list-item-selected-item > .sf-icon, .sf-list-item.selected.sf-list-item--icon.sf-list-item--size-1\/3 > .sf-list-item-selected-item > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-list-item.sf-list-item--avatar.sf-list-item--size-1\/3 .sf-avatar-label-group-title {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-1\/3);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-1\/3);
  }
  .sf-list-item--size-1 {
    --sf-list-item--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-list-item--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-list-item--padding-inline-start: var(--sf-ui-1--space-x);
    --sf-list-item--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-list-item--size-2 {
    --sf-list-item--padding-bottom: var(--sf-ui-2--space-y-tightness-default);
    --sf-list-item--padding-inline-end: var(--sf-ui-2--space-x);
    --sf-list-item--padding-inline-start: var(--sf-ui-2--space-x);
    --sf-list-item--padding-top: var(--sf-ui-2--space-y-tightness-default);
  }
  .sf-list-item--size-3 {
    --sf-list-item--padding-bottom: var(--sf-ui-2--space-y-tightness-default);
    --sf-list-item--padding-inline-end: var(--sf-ui-3--space-x);
    --sf-list-item--padding-inline-start: var(--sf-ui-3--space-x);
    --sf-list-item--padding-top: var(--sf-ui-2--space-y-tightness-default);
  }
  .sf-list-item--size-1\/2 {
    --sf-list-item--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-list-item--padding-inline-start: var(--sf-ui-1\/2--space-x);
  }
  .sf-list-item--size-1\/3 {
    --sf-list-item--padding-inline-end: var(--sf-ui-1\/3--space-x);
    --sf-list-item--padding-inline-start: var(--sf-ui-1\/3--space-x);
  }
  .sf-list [role=option].sf-list-item:not(:disabled):not(.disabled):hover {
    --sf-list-item--background-color: var(--sf-primary-container-hover);
  }
  .sf-list-item.selected {
    --sf-list-item--background-color: var(--sf-primary-container-active);
  }
  /* An option sits flush against the options above and below it. */
  .sf-list [role=option].sf-list-item:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-list [role=option].sf-list-item:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-list-item.disabled {
    --sf-list-item--border-color: var(--sf-outline-disable);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/space-between (.justify-between) align-items/center (.items-center) justify-content/flex-start (.justify-start) */
  .sf-list-item--checkbox .sf-list-item-wrap, .sf-list-item--text .sf-list-item-wrap, .sf-list-item--icon .sf-list-item-wrap {
    --sf-list-item-wrap--background-color: transparent;
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-list-item--checkbox .sf-list-item-container, .sf-list-item--text .sf-list-item-container, .sf-list-item--icon .sf-list-item-container {
    --sf-list-item-container--background-color: transparent;
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-list-item--color .sf-tag.sf-tag--color, .sf-list [role=option].sf-list-item.sf-list-item--color:not(:disabled):not(.disabled):hover .sf-tag.sf-tag--color, .sf-list [role=option].sf-list-item.sf-list-item--color:not(:disabled):not(.disabled).focus-visible .sf-tag.sf-tag--color, .sf-list-item.disabled.sf-list-item--color .sf-tag.sf-tag--color {
    --sf-tag--background-color: var(--sf-transparent);
  }
  .sf-list-item--color .sf-tag.sf-tag--color, .sf-list [role=option].sf-list-item.sf-list-item--color:not(:disabled):not(.disabled):hover .sf-tag.sf-tag--color, .sf-list [role=option].sf-list-item.sf-list-item--color:not(:disabled):not(.disabled):focus-visible .sf-tag.sf-tag--color, .sf-list-item.disabled.sf-list-item--color .sf-tag.sf-tag--color {
    --sf-tag--background-color: var(--sf-transparent);
  }
  .sf-list-item .sf-checkbox {
    pointer-events: none;
    flex-shrink: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-list-item {
      transition-duration: 0s;
    }
  }
}
@layer sf.states {
  /* A colour option is a dot and a label, like an icon option, not a tag inside
     an option: the tag markup it is written with keeps no fill, no padding and
     no gap, the dot takes the place of the icon and the label the place and
     inline padding of an option label. In the states layer, because the tag's
     own size 2 and 3 padding lives there and outranked this at those sizes. */
  .sf-list-item.sf-list-item--color.sf-list-item--size-1\/3 {
    --sf-list-item--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1\/2 {
    --sf-list-item--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1 {
    --sf-list-item--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-2 {
    --sf-list-item--padding-bottom: var(--sf-ui-2--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-2--space-y-tightness-default);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-3 {
    --sf-list-item--padding-bottom: var(--sf-ui-3--space-y-tightness-default);
    --sf-list-item--padding-top: var(--sf-ui-3--space-y-tightness-default);
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1\/3 .sf-tag.sf-tag {
    --sf-tag--background-color: transparent;
    --sf-tag--block: 0;
    --sf-tag--inline-start: 0;
    --sf-tag--inline-end: 0;
    --sf-tag--label-start: var(--sf-ui-1\/3--text-space-x);
    --sf-tag--label-end: var(--sf-ui-1\/3--text-space-x);
    gap: 0;
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1\/2 .sf-tag.sf-tag {
    --sf-tag--background-color: transparent;
    --sf-tag--block: 0;
    --sf-tag--inline-start: 0;
    --sf-tag--inline-end: 0;
    --sf-tag--label-start: var(--sf-ui-1\/2--text-space-x);
    --sf-tag--label-end: var(--sf-ui-1\/2--text-space-x);
    gap: 0;
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-1 .sf-tag.sf-tag {
    --sf-tag--background-color: transparent;
    --sf-tag--block: 0;
    --sf-tag--inline-start: 0;
    --sf-tag--inline-end: 0;
    --sf-tag--label-start: var(--sf-ui-1--text-space-x);
    --sf-tag--label-end: var(--sf-ui-1--text-space-x);
    gap: 0;
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-2 .sf-tag.sf-tag {
    --sf-tag--background-color: transparent;
    --sf-tag--block: 0;
    --sf-tag--inline-start: 0;
    --sf-tag--inline-end: 0;
    --sf-tag--label-start: var(--sf-ui-2--text-space-x);
    --sf-tag--label-end: var(--sf-ui-2--text-space-x);
    gap: 0;
  }
  .sf-list-item.sf-list-item--color.sf-list-item--size-3 .sf-tag.sf-tag {
    --sf-tag--background-color: transparent;
    --sf-tag--block: 0;
    --sf-tag--inline-start: 0;
    --sf-tag--inline-end: 0;
    --sf-tag--label-start: var(--sf-ui-3--text-space-x);
    --sf-tag--label-end: var(--sf-ui-3--text-space-x);
    gap: 0;
  }
}
@layer sf.states {
  /* An avatar option is as tall as a text option of its size: the avatar takes
     the line, like an icon, and its initials half of it. Avatar sizes are their
     own, larger scale, which made avatar rows taller than the rest of their list. */
  .sf-list-item.sf-list-item--avatar.sf-list-item--size-1\/3 .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1\/3);
    --sf-avatar--width: var(--sf-text-height-1\/3);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1\/3) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1\/3);
  }
  .sf-list-item.sf-list-item--avatar.sf-list-item--size-1\/2 .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1\/2);
    --sf-avatar--width: var(--sf-text-height-1\/2);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1\/2) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1\/2);
  }
  .sf-list-item.sf-list-item--avatar.sf-list-item--size-1 .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1);
    --sf-avatar--width: var(--sf-text-height-1);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1);
  }
  .sf-list-item.sf-list-item--avatar.sf-list-item--size-2 .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-2);
    --sf-avatar--width: var(--sf-text-height-2);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-2) / 2));
    --sf-avatar--line-height: var(--sf-text-height-2);
  }
  .sf-list-item.sf-list-item--avatar.sf-list-item--size-3 .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-3);
    --sf-avatar--width: var(--sf-text-height-3);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-3) / 2));
    --sf-avatar--line-height: var(--sf-text-height-3);
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/flex-end (.items-end) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-list {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-list {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-list {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-list {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-list {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
    }
  }
  .sf-list:where(:dir(ltr)) {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-list {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
    }
  }
  .sf-list:where(:dir(rtl)) {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-list {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
    }
  }
  .sf-list:where(:dir(ltr)) {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-list {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
    }
  }
  .sf-list:where(:dir(rtl)) {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-list {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-list {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-list {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-list {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-list:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-list--padding-right, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-list {
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-list--padding-right, var(--sf-space-1\/3));
    }
  }
  .sf-list:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-list--padding-right, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-list--padding-right, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-list {
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-list--padding-right, var(--sf-space-1\/3));
    }
  }
  .sf-list:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-list--padding-right, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-list {
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-list--padding-left, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-list {
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-list--padding-left, var(--sf-space-1\/3));
    }
  }
  .sf-list:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-list--padding-left, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-list {
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-list--padding-left, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-list {
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-list--padding-left, var(--sf-space-1\/3));
    }
  }
  .sf-list:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-list--padding-left, var(--sf-space-1\/3));
  }
  .sf-list {
    background-color: var(--sf-surface-0);
    background-color: var(--sf-list--background-color, var(--sf-surface-0));
    border-width: var(--sf-px);
    border-width: var(--sf-list--border-width, var(--sf-px));
    border-bottom-width: var(--sf-px);
    border-bottom-width: var(--sf-list--border-bottom-width, var(--sf-list--border-width, var(--sf-px)));
    border-color: transparent;
    border-color: var(--sf-list--border-color, var(--sf-outline-variant, transparent));
    border-end-end-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-list--border-bottom-right-radius, var(--sf-radius--surface));
    border-end-start-radius: var(--sf-radius--surface);
    border-end-start-radius: var(--sf-list--border-bottom-left-radius, var(--sf-radius--surface));
    border-inline-end-width: var(--sf-px);
    border-inline-end-width: var(--sf-list--border-right-width, var(--sf-list--border-width, var(--sf-px)));
    border-inline-start-width: var(--sf-px);
    border-inline-start-width: var(--sf-list--border-left-width, var(--sf-list--border-width, var(--sf-px)));
    border-start-end-radius: var(--sf-radius--surface);
    border-start-end-radius: var(--sf-list--border-top-right-radius, var(--sf-radius--surface));
    border-start-start-radius: var(--sf-radius--surface);
    border-start-start-radius: var(--sf-list--border-top-left-radius, var(--sf-radius--surface));
    border-style: solid;
    border-style: var(--sf-list--border-style, solid);
    border-top-width: var(--sf-px);
    border-top-width: var(--sf-list--border-top-width, var(--sf-list--border-width, var(--sf-px)));
    gap: var(--sf-space-1\/3);
    gap: var(--sf-list--gap, var(--sf-space-1\/3));
    padding-bottom: var(--sf-space-1\/3);
    padding-bottom: var(--sf-list--padding-bottom, var(--sf-space-1\/3));
    -webkit-padding-end: var(--sf-space-1\/3);
            padding-inline-end: var(--sf-space-1\/3);
    -webkit-padding-end: var(--sf-list--padding-right, var(--sf-space-1\/3));
            padding-inline-end: var(--sf-list--padding-right, var(--sf-space-1\/3));
    -webkit-padding-start: var(--sf-space-1\/3);
            padding-inline-start: var(--sf-space-1\/3);
    -webkit-padding-start: var(--sf-list--padding-left, var(--sf-space-1\/3));
            padding-inline-start: var(--sf-list--padding-left, var(--sf-space-1\/3));
    padding-top: var(--sf-space-1\/3);
    padding-top: var(--sf-list--padding-top, var(--sf-space-1\/3));
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) */
  .sf-list .sf-list-wrap {
    --sf-list-wrap--background-color: transparent;
    background-color: var(--sf-list-wrap--background-color);
  }
  /* utility-hint: flex/1 (.flex-1) 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) */
  .sf-list .sf-list-container {
    --sf-list-container--background-color: transparent;
    background-color: var(--sf-list-container--background-color);
  }
}
/* The popup of a dropdown is a menu surface, and it now reads like the
   context menu, which owners and users already found right. Before, its
   options borrowed the look of a list row: a divider under every option, a
   highlight that ran edge to edge with square corners, and a flat panel with a
   border instead of a lift. The same surface, lift, inset and corner the
   context menu uses are applied here, scoped to the dropdown -- in place and
   in the portal, where the list is wrapped in an .sf-dropdown context -- so a
   list item anywhere else keeps its row look.

   The same surface is available on its own as .sf-list--menu, because a menu
   list is not the dropdown's property: a list of options anchored to any
   control -- a popover's content, for one -- is the same thing, and the only
   alternative was a consumer writing these tokens again in its own stylesheet.

   The option row is laid out here as well. The dropdown's own script puts
   the check mark into a selected option, and that mark lands in line only
   when the option is a flex row; written without the flex class, the mark
   fell under the label and the selected option stood twice as tall. A layout
   the component's own script depends on is the component's to set. */
@layer sf.components {
  .sf-dropdown .sf-list,
  .sf-list--menu {
    --sf-list--border-width: 0;
    --sf-list--background-color: var(--sf-elevation-2--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
    --sf-list--padding-top: var(--sf-space-1\/4);
    --sf-list--padding-bottom: var(--sf-space-1\/4);
    --sf-list--padding-left: var(--sf-space-1\/4);
    --sf-list--padding-right: var(--sf-space-1\/4);
    /* The lift goes through the variable the dropdown stylesheet reads. Its own
       rule set the variable only under .open, a class the script never puts
       on the root -- it writes sf-dropdown--open, and the portal context drops
       the open modifiers altogether -- so the list never had a shadow. */
    --sf-list--box-shadow: var(--sf-elevation-2--shadow);
  }
  .sf-dropdown .sf-list .sf-list-item,
  .sf-list--menu .sf-list-item {
    --sf-list-item--border-bottom-width: 0;
    --sf-list-item--background-color: transparent;
    display: flex;
    align-items: center;
    border-radius: var(--sf-radius--ui);
  }
  .sf-dropdown .sf-list [role=option].sf-list-item:not(:disabled):not(.disabled):hover,
  .sf-list--menu [role=option].sf-list-item:not(:disabled):not(.disabled):hover {
    --sf-list-item--background-color: var(--sf-surface-transparent-hover);
  }
  .sf-dropdown .sf-list .sf-list-item.selected,
  .sf-list--menu .sf-list-item.selected {
    --sf-list-item--background-color: var(--sf-primary-container);
  }
}
@media (forced-colors: active) {
  .sf-dropdown .sf-list,
  .sf-list--menu {
    border: var(--sf-px) solid CanvasText;
  }
}
/* A heading names the stretch of list under it. It is not an option: a pointer
   passes through it, a keyboard steps over it, and a reader is told it carries
   no choice. It stays while its stretch scrolls, because a list long enough to
   need headings is long enough to lose which one you are inside of. */
@layer sf.components {
  .sf-list-heading {
    position: sticky;
    top: 0;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    /* The surface's own colour, read from the list that sets it: `inherit`
       would take a wrapper's transparent background and the rows would scroll
       through the heading. */
    background-color: var(--sf-surface-0);
    background-color: var(--sf-list--background-color, var(--sf-surface-0));
    padding-top: var(--sf-space-1\/4);
    padding-bottom: var(--sf-space-1\/4);
    padding-block: var(--sf-space-1\/4);
    padding-left: var(--sf-space-1\/2);
    padding-right: var(--sf-space-1\/2);
    padding-inline: var(--sf-space-1\/2);
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-list-item--padding-inline-start, var(--sf-space-1\/2));
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-list-item--padding-inline-start, var(--sf-space-1\/2));
    padding-inline: var(--sf-list-item--padding-inline-start, var(--sf-space-1\/2));
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-label-small--size);
    line-height: var(--sf-label-small--height);
    font-weight: 500;
    font-weight: var(--sf-weight-medium, 500);
  }
  .sf-list-heading:not(:first-child) {
    margin-top: var(--sf-space-1\/4);
    -webkit-margin-before: var(--sf-space-1\/4);
            margin-block-start: var(--sf-space-1\/4);
    border-top: var(--sf-px) solid var(--sf-outline-variant);
    -webkit-border-before: var(--sf-px) solid var(--sf-outline-variant);
            border-block-start: var(--sf-px) solid var(--sf-outline-variant);
    padding-top: var(--sf-space-1\/2);
    -webkit-padding-before: var(--sf-space-1\/2);
            padding-block-start: var(--sf-space-1\/2);
  }
  .sf-list-heading-container {
    min-width: 0;
    min-inline-size: 0;
    word-wrap: anywhere;
  }
}
/* Several options in a row. A hundred icons in a column is a column nobody
   scrolls to the end of; in a grid the same hundred are read at a glance, and
   each option keeps the row's own hit area, hover and selected tint. The label
   is the option's code, which the search reads and a pointer sees as a title --
   drawn in the cell it would make every cell as wide as the longest name.

   Keyed off the container rather than off the dropdown's root: the open list is
   moved into a portal, which carries the root's context but not its modifiers,
   so a rule hung off `.sf-dropdown--grid` reached the list in place and never
   the one a person is actually looking at. */
@layer sf.components {
  .sf-list-container--grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-columns: repeat(var(--sf-list-container--columns, 6), minmax(0, 1fr));
    grid-gap: var(--sf-px);
    gap: var(--sf-px);
    /* A grid asks for the width its columns need: the list otherwise takes the
       width of the control it hangs from, and a chooser narrow enough to hold a
       glyph made six columns of eleven pixels each. */
    min-width: calc(6 * var(--sf-ui-1--control-height));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height));
    min-width: calc(6 * var(--sf-ui-1--control-height));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)));
    min-inline-size: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)));
  }
  /* The surface holding a grid asks for the same width. The list is sized from
     the control it hangs from, which for a chooser the width of one glyph left
     six columns two glyphs wide. */
  .sf-list[\:has\(.sf-list-container--grid\)] {
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
    min-inline-size: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
  }
  .sf-list[\:has\(.sf-list-container--grid\)] {
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
    min-inline-size: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
  }
  .sf-list[\:has\(.sf-list-container--grid\)] {
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
    min-inline-size: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
  }
  .sf-list:has(.sf-list-container--grid) {
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-inline-size: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(6 * var(--sf-ui-1--control-height) + var(--sf-space-1));
    min-width: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
    min-inline-size: calc(var(--sf-list-container--columns, 6) * var(--sf-list--cell, var(--sf-ui-1--control-height)) + var(--sf-space-1));
  }
  .sf-list-container--grid .sf-list-item {
    justify-content: center;
    aspect-ratio: 1;
    padding-left: 0;
    padding-right: 0;
    padding-inline: 0;
  }
  .sf-list-container--grid .sf-list-item .sf-list-item-wrap {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
  }
  .sf-list-container--grid .sf-list-item .sf-list-item-container {
    display: none;
  }
  /* A grid is read at a glance, so it is as tall as a few rows and scrolls
     rather than running the height of the screen: a hundred and twenty glyphs
     six to a row is twenty rows, and twenty rows is a column again. */
  .sf-list-container-wrap[\:has\(.sf-list-container--grid\)] {
    max-height: 16rem;
    max-block-size: 16rem;
    max-height: 16rem;
    max-height: var(--sf-dropdown--grid-height, 16rem);
    max-block-size: var(--sf-dropdown--grid-height, 16rem);
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
  }
  .sf-list-container-wrap[\:has\(.sf-list-container--grid\)] {
    max-height: 16rem;
    max-block-size: 16rem;
    max-height: 16rem;
    max-height: var(--sf-dropdown--grid-height, 16rem);
    max-height: 16rem;
    max-block-size: 16rem;
    max-height: 16rem;
    max-height: var(--sf-dropdown--grid-height, 16rem);
    max-block-size: var(--sf-dropdown--grid-height, 16rem);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
  }
  .sf-list-container-wrap[\:has\(.sf-list-container--grid\)] {
    max-height: 16rem;
    max-height: 16rem;
    max-block-size: 16rem;
    max-height: 16rem;
    max-height: 16rem;
    max-height: var(--sf-dropdown--grid-height, 16rem);
    max-height: 16rem;
    max-block-size: 16rem;
    max-height: 16rem;
    max-height: var(--sf-dropdown--grid-height, 16rem);
    max-block-size: var(--sf-dropdown--grid-height, 16rem);
    overflow-x: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
  }
  .sf-list-container-wrap:has(.sf-list-container--grid) {
    max-height: 16rem;
    max-block-size: 16rem;
    max-height: 16rem;
    max-height: var(--sf-dropdown--grid-height, 16rem);
    max-block-size: var(--sf-dropdown--grid-height, 16rem);
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
  }
}
/* A list that does not hang from a field takes a width of its own: sized from
   the control it opens under -- an icon button, say -- it would be one
   character wide, and left to its content it grows to the longest name in it,
   which for a list of field names is most of the panel. A width it is told,
   and names that do not fit wrap. */
@layer sf.components {
  .sf-list--free-width {
    width: 18rem;
    inline-size: 18rem;
    width: 18rem;
    width: var(--sf-dropdown--list-width, 18rem);
    inline-size: var(--sf-dropdown--list-width, 18rem);
  }
  /* A grid is as wide as its columns: a picker of size-1/2 icons stood in an
     18rem panel with a third of it empty (owner, 2026-10-14). */
  .sf-list--free-width[\:has\(.sf-list-container--grid\)] {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    inline-size: -webkit-min-content;
    inline-size: -moz-min-content;
    inline-size: min-content;
    width: min-content;
    width: var(--sf-dropdown--list-width, -webkit-min-content);
    width: var(--sf-dropdown--list-width, -moz-min-content);
    width: var(--sf-dropdown--list-width, min-content);
    inline-size: var(--sf-dropdown--list-width, -webkit-min-content);
    inline-size: var(--sf-dropdown--list-width, -moz-min-content);
    inline-size: var(--sf-dropdown--list-width, min-content);
  }
  .sf-list--free-width[\:has\(.sf-list-container--grid\)] {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    inline-size: -webkit-min-content;
    inline-size: -moz-min-content;
    inline-size: min-content;
    width: min-content;
    width: var(--sf-dropdown--list-width, -webkit-min-content);
    width: var(--sf-dropdown--list-width, -moz-min-content);
    width: var(--sf-dropdown--list-width, min-content);
    width: min-content;
    inline-size: min-content;
    width: min-content;
    width: var(--sf-dropdown--list-width, min-content);
    inline-size: var(--sf-dropdown--list-width, -webkit-min-content);
    inline-size: var(--sf-dropdown--list-width, -moz-min-content);
    inline-size: var(--sf-dropdown--list-width, min-content);
  }
  .sf-list--free-width[\:has\(.sf-list-container--grid\)] {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    width: min-content;
    inline-size: -webkit-min-content;
    inline-size: -moz-min-content;
    inline-size: min-content;
    width: min-content;
    width: min-content;
    width: var(--sf-dropdown--list-width, -webkit-min-content);
    width: var(--sf-dropdown--list-width, -moz-min-content);
    width: var(--sf-dropdown--list-width, min-content);
    width: min-content;
    inline-size: min-content;
    width: min-content;
    width: var(--sf-dropdown--list-width, min-content);
    inline-size: var(--sf-dropdown--list-width, -webkit-min-content);
    inline-size: var(--sf-dropdown--list-width, -moz-min-content);
    inline-size: var(--sf-dropdown--list-width, min-content);
  }
  .sf-list--free-width:has(.sf-list-container--grid) {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    inline-size: -webkit-min-content;
    inline-size: -moz-min-content;
    inline-size: min-content;
    width: min-content;
    width: var(--sf-dropdown--list-width, -webkit-min-content);
    width: var(--sf-dropdown--list-width, -moz-min-content);
    width: var(--sf-dropdown--list-width, min-content);
    inline-size: var(--sf-dropdown--list-width, -webkit-min-content);
    inline-size: var(--sf-dropdown--list-width, -moz-min-content);
    inline-size: var(--sf-dropdown--list-width, min-content);
  }
  /* Its columns are as wide as a cell, so the search field above them -- which
     takes the panel's width and asks for none -- cannot stretch them. */
  .sf-list--free-width[\:has\(.sf-list-container--grid\)] > .sf-input {
    width: 0;
    inline-size: 0;
    min-width: 100%;
    min-inline-size: 100%;
  }
  .sf-list--free-width[\:has\(.sf-list-container--grid\)] > .sf-input {
    width: 0;
    width: 0;
    inline-size: 0;
    min-width: 100%;
    min-width: 100%;
    min-inline-size: 100%;
  }
  .sf-list--free-width:has(.sf-list-container--grid) > .sf-input {
    width: 0;
    inline-size: 0;
    min-width: 100%;
    min-inline-size: 100%;
  }
  .sf-list--free-width .sf-list-container--grid {
    grid-template-columns: repeat(6, var(--sf-ui-1--control-height));
    grid-template-columns: repeat(var(--sf-list-container--columns, 6), var(--sf-list--cell, var(--sf-ui-1--control-height)));
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/4) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-dropdown {
    background-color: transparent;
    background-color: var(--sf-dropdown--background-color, transparent);
    gap: var(--sf-space-1\/4);
    gap: var(--sf-dropdown--gap, var(--sf-space-1\/4));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) gap/var(--sf-dropdown-field--gap) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    padding-right: var(--sf-dropdown-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    padding-right: var(--sf-dropdown-field--padding-inline-end);
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(ltr)) {
    padding-right: var(--sf-dropdown-field--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    padding-left: var(--sf-dropdown-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    padding-left: var(--sf-dropdown-field--padding-inline-end);
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(rtl)) {
    padding-left: var(--sf-dropdown-field--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    padding-left: var(--sf-dropdown-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-field {
    padding-left: var(--sf-dropdown-field--padding-inline-start);
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(ltr)) {
    padding-left: var(--sf-dropdown-field--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    padding-right: var(--sf-dropdown-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-field {
    padding-right: var(--sf-dropdown-field--padding-inline-start);
    }
  }
  .sf-dropdown .sf-dropdown-field:where(:dir(rtl)) {
    padding-right: var(--sf-dropdown-field--padding-inline-start);
  }
  .sf-dropdown .sf-dropdown-field {
    --sf-dropdown-field--border: var(--sf-px) solid;
    background-color: var(--sf-dropdown-field--background-color);
    border: var(--sf-dropdown-field--border);
    border-color: transparent;
    border-color: var(--sf-dropdown-field--border-color, transparent);
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-dropdown-field--border-end-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-dropdown-field--border-end-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-dropdown-field--border-start-end-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-dropdown-field--border-start-start-radius, var(--sf-dropdown--radius, var(--sf-radius--ui)));
    box-shadow: var(--sf-dropdown-field--box-shadow);
    gap: var(--sf-dropdown-field--gap);
    padding-bottom: var(--sf-dropdown-field--padding-bottom);
    -webkit-padding-end: var(--sf-dropdown-field--padding-inline-end);
            padding-inline-end: var(--sf-dropdown-field--padding-inline-end);
    -webkit-padding-start: var(--sf-dropdown-field--padding-inline-start);
            padding-inline-start: var(--sf-dropdown-field--padding-inline-start);
    padding-top: var(--sf-dropdown-field--padding-top);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-end);
    }
  }
  .sf-dropdown .sf-icon-button:where(:dir(ltr)) {
    padding-right: var(--sf-icon-button--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-dropdown .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-end);
    }
  }
  .sf-dropdown .sf-icon-button:where(:dir(rtl)) {
    padding-left: var(--sf-icon-button--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-start);
    }
  }
  .sf-dropdown .sf-icon-button:where(:dir(ltr)) {
    padding-left: var(--sf-icon-button--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-dropdown .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-start);
    }
  }
  .sf-dropdown .sf-icon-button:where(:dir(rtl)) {
    padding-right: var(--sf-icon-button--padding-inline-start);
  }
  .sf-dropdown .sf-icon-button {
    --sf-icon-button--padding-bottom: var(--sf-space-1\/4);
    --sf-icon-button--padding-inline-end: var(--sf-space-1\/4);
    --sf-icon-button--padding-inline-start: var(--sf-space-1\/4);
    --sf-icon-button--padding-top: var(--sf-space-1\/4);
    padding-bottom: var(--sf-icon-button--padding-bottom);
    -webkit-padding-end: var(--sf-icon-button--padding-inline-end);
            padding-inline-end: var(--sf-icon-button--padding-inline-end);
    -webkit-padding-start: var(--sf-icon-button--padding-inline-start);
            padding-inline-start: var(--sf-icon-button--padding-inline-start);
    padding-top: var(--sf-icon-button--padding-top);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown input {
    padding-right: var(--sf-dropdown-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown input {
    padding-right: var(--sf-dropdown-input--padding-inline-end);
    }
  }
  .sf-dropdown input:where(:dir(ltr)) {
    padding-right: var(--sf-dropdown-input--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown input {
    padding-left: var(--sf-dropdown-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-dropdown input {
    padding-left: var(--sf-dropdown-input--padding-inline-end);
    }
  }
  .sf-dropdown input:where(:dir(rtl)) {
    padding-left: var(--sf-dropdown-input--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown input {
    padding-left: var(--sf-dropdown-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-dropdown input {
    padding-left: var(--sf-dropdown-input--padding-inline-start);
    }
  }
  .sf-dropdown input:where(:dir(ltr)) {
    padding-left: var(--sf-dropdown-input--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown input {
    padding-right: var(--sf-dropdown-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-dropdown input {
    padding-right: var(--sf-dropdown-input--padding-inline-start);
    }
  }
  .sf-dropdown input:where(:dir(rtl)) {
    padding-right: var(--sf-dropdown-input--padding-inline-start);
  }
  .sf-dropdown input {
    background-color: var(--sf-dropdown-input--background-color);
    color: var(--sf-dropdown-input--color);
    font-family: var(--sf-dropdown-input--font-family);
    font-size: var(--sf-dropdown-input--font-size);
    font-weight: var(--sf-dropdown-input--font-weight);
    line-height: var(--sf-dropdown-input--line-height);
    -webkit-padding-end: var(--sf-dropdown-input--padding-inline-end);
            padding-inline-end: var(--sf-dropdown-input--padding-inline-end);
    -webkit-padding-start: var(--sf-dropdown-input--padding-inline-start);
            padding-inline-start: var(--sf-dropdown-input--padding-inline-start);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-dropdown-label--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-dropdown .sf-dropdown-label {
    --sf-dropdown-label--background-color: transparent;
    --sf-dropdown-label--gap: var(--sf-space-1\/4);
    background-color: var(--sf-dropdown-label--background-color);
    gap: var(--sf-dropdown-label--gap);
  }
  .sf-dropdown .sf-dropdown-required {
    --sf-dropdown-required--color: var(--sf-error);
    --sf-dropdown-required--font-family: var(--sf-text--family);
    --sf-dropdown-required--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-dropdown-required--color);
    font-family: var(--sf-dropdown-required--font-family);
    font-size: var(--sf-dropdown-required--font-size);
    font-weight: var(--sf-dropdown-required--font-weight);
    line-height: var(--sf-dropdown-required--line-height);
  }
  .sf-dropdown .sf-dropdown-text {
    --sf-dropdown-text--color: var(--sf-on-surface-variant);
    --sf-dropdown-text--font-family: var(--sf-text--family);
    --sf-dropdown-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-dropdown-text--color);
    font-family: var(--sf-dropdown-text--font-family);
    font-size: var(--sf-dropdown-text--font-size);
    font-weight: var(--sf-dropdown-text--font-weight);
    line-height: var(--sf-dropdown-text--line-height);
  }
  .sf-dropdown .sf-dropdown-placeholder {
    color: var(--sf-dropdown-placeholder--color);
    font-family: var(--sf-dropdown-placeholder--font-family);
    font-size: var(--sf-dropdown-placeholder--font-size);
    line-height: var(--sf-dropdown-placeholder--line-height);
  }
  /* utility-hint: gap/var(--sf-dropdown-tag-container--gap) */
  .sf-dropdown .sf-dropdown-tag-container {
    background-color: var(--sf-dropdown-tag-container--background-color);
    gap: var(--sf-dropdown-tag-container--gap);
  }
  .sf-dropdown .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-dropdown .sf-list {
    box-shadow: var(--sf-list--box-shadow);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-tag {
    padding-right: var(--sf-tag--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-tag {
    padding-right: var(--sf-tag--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
    }
  }
  .sf-dropdown .sf-tag:where(:dir(ltr)) {
    padding-right: var(--sf-tag--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-tag {
    padding-left: var(--sf-tag--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-dropdown .sf-tag {
    padding-left: var(--sf-tag--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
    }
  }
  .sf-dropdown .sf-tag:where(:dir(rtl)) {
    padding-left: var(--sf-tag--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-tag {
    padding-left: var(--sf-tag--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-tag {
    padding-left: var(--sf-tag--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
    }
  }
  .sf-dropdown .sf-tag:where(:dir(ltr)) {
    padding-left: var(--sf-tag--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-tag {
    padding-right: var(--sf-tag--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-dropdown .sf-tag {
    padding-right: var(--sf-tag--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
    }
  }
  .sf-dropdown .sf-tag:where(:dir(rtl)) {
    padding-right: var(--sf-tag--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
  }
  .sf-dropdown .sf-tag {
    background-color: var(--sf-tag--background-color);
    -webkit-padding-end: var(--sf-tag--padding-inline-end);
            padding-inline-end: var(--sf-tag--padding-inline-end);
    -webkit-padding-end: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
            padding-inline-end: var(--sf-tag--inline-end, var(--sf-tag--padding-inline-end));
    -webkit-padding-start: var(--sf-tag--padding-inline-start);
            padding-inline-start: var(--sf-tag--padding-inline-start);
    -webkit-padding-start: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
            padding-inline-start: var(--sf-tag--inline-start, var(--sf-tag--padding-inline-start));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-tag-alt {
    padding-right: var(--sf-tag-alt--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-tag-alt {
    padding-right: var(--sf-tag-alt--padding-inline-end);
    }
  }
  .sf-dropdown .sf-tag-alt:where(:dir(ltr)) {
    padding-right: var(--sf-tag-alt--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-tag-alt {
    padding-left: var(--sf-tag-alt--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-dropdown .sf-tag-alt {
    padding-left: var(--sf-tag-alt--padding-inline-end);
    }
  }
  .sf-dropdown .sf-tag-alt:where(:dir(rtl)) {
    padding-left: var(--sf-tag-alt--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-tag-alt {
    padding-left: var(--sf-tag-alt--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-tag-alt {
    padding-left: var(--sf-tag-alt--padding-inline-start);
    }
  }
  .sf-dropdown .sf-tag-alt:where(:dir(ltr)) {
    padding-left: var(--sf-tag-alt--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-tag-alt {
    padding-right: var(--sf-tag-alt--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-dropdown .sf-tag-alt {
    padding-right: var(--sf-tag-alt--padding-inline-start);
    }
  }
  .sf-dropdown .sf-tag-alt:where(:dir(rtl)) {
    padding-right: var(--sf-tag-alt--padding-inline-start);
  }
  .sf-dropdown .sf-tag-alt {
    background-color: var(--sf-tag-alt--background-color);
    -webkit-padding-end: var(--sf-tag-alt--padding-inline-end);
            padding-inline-end: var(--sf-tag-alt--padding-inline-end);
    -webkit-padding-start: var(--sf-tag-alt--padding-inline-start);
            padding-inline-start: var(--sf-tag-alt--padding-inline-start);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  /* utility-hint: display/flex (.flex) */
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input {
    --sf-dropdown-input--padding-inline-end: var(--sf-text-size-4);
    --sf-dropdown-input--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::placeholder, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-surface-variant);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-surface-variant);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-surface-variant);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-surface-variant);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-surface-variant);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text input {
    --sf-dropdown-input--font-size: var(--sf-text-size-1);
    --sf-dropdown-input--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-1.sf-dropdown--filled.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text input {
    --sf-dropdown-input--font-family: var(--sf-text--family);
    --sf-dropdown-input--font-weight: var(--sf-font-weight-regular);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text input {
    --sf-dropdown-input--color: var(--sf-on-surface);
  }
  .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-required {
    --sf-dropdown-required--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-required--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-text {
    --sf-dropdown-text--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-outline-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-outline-disable);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon {
    --sf-icon--color: transparent;
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon {
    --sf-icon--color: transparent;
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)][\:has\(\%3E\%20.sf-dropdown-field\:hover\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)][\:has\(\%3E\%20.sf-dropdown-field\:hover\)] .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-primary-hover);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag:not(:has(> .sf-dropdown-field > :disabled)):has(> .sf-dropdown-field:hover) .sf-dropdown-field, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)):has(> .sf-dropdown-field:hover) .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-primary-hover);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-container);
    --sf-dropdown-field--border-color: var(--sf-transparent-for-focus);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-container);
    --sf-dropdown-field--border-color: var(--sf-transparent-for-focus);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag .sf-dropdown-field .sf-dropdown-tag-container .sf-tag {
    --sf-tag--background-color: var(--sf-primary-container);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::-webkit-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::-moz-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input:-ms-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::-ms-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::-webkit-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::-moz-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input:-ms-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::-ms-input-placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::placeholder, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] input, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] input {
    --sf-dropdown-input--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) input, .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) input {
    --sf-dropdown-input--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-disable);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag:has(> .sf-dropdown-field > :disabled) .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-transparent-for-focus);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-transparent-for-focus);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-transparent-for-focus);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-transparent-for-focus);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-dropdown-field {
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)][\:has\(\%3E\%20.sf-dropdown-field\:hover\)] .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)][\:has\(\%3E\%20.sf-dropdown-field\:hover\)] .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)):has(> .sf-dropdown-field:hover) .sf-dropdown-field, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag:not(:has(> .sf-dropdown-field > :disabled)):has(> .sf-dropdown-field:hover) .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-container-hover);
  }
  /* utility-hint: display/flex (.flex) */
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input {
    --sf-dropdown-input--padding-inline-end: var(--sf-text-size-5);
    --sf-dropdown-input--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::placeholder, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-dropdown.sf-dropdown--size-2.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-2.sf-dropdown--filled.sf-dropdown--text input {
    --sf-dropdown-input--font-size: var(--sf-text-size-2);
    --sf-dropdown-input--line-height: var(--sf-text-height-2);
  }
  .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-required {
    --sf-dropdown-required--font-size: var(--sf-text-size-1);
    --sf-dropdown-required--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-text {
    --sf-dropdown-text--font-size: var(--sf-text-size-1);
    --sf-dropdown-text--line-height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag .sf-dropdown-field .sf-dropdown-tag-container .sf-tag {
    --sf-tag--background-color: var(--sf-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag[\:has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:has(> .sf-dropdown-field > :disabled) > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--outlined.sf-dropdown--tag:has(> .sf-dropdown-field > :disabled) > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag:has(> .sf-dropdown-field > :disabled) > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--tag > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--tag > .sf-dropdown-field > .sf-icon-button.sf-icon-button--link.sf-icon-button--icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field {
    min-height: var(--sf-ui-1\/2--control-height);
    min-block-size: var(--sf-ui-1\/2--control-height);
    --sf-dropdown-field--gap: var(--sf-space-1\/4);
    --sf-dropdown-field--padding-bottom: calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px));
    --sf-dropdown-field--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-dropdown-field--padding-inline-start: var(--sf-ui-1\/2--space-x);
    --sf-dropdown-field--padding-top: calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px));
  }
  /* utility-hint: display/flex (.flex) */
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input {
    --sf-dropdown-input--padding-inline-end: var(--sf-text-size-3);
    --sf-dropdown-input--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::placeholder, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--outlined.sf-dropdown--text input, .sf-dropdown.sf-dropdown--size-1\/2.sf-dropdown--filled.sf-dropdown--text input {
    --sf-dropdown-input--font-size: var(--sf-text-size-1\/2);
    --sf-dropdown-input--line-height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-required {
    --sf-dropdown-required--font-size: var(--sf-text-size-1\/3);
    --sf-dropdown-required--line-height: var(--sf-text-height-1\/3);
  }
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-text {
    --sf-dropdown-text--font-size: var(--sf-text-size-1\/3);
    --sf-dropdown-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    --sf-dropdown-field--gap: var(--sf-space-1\/4);
    --sf-dropdown-field--padding-bottom: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px));
    --sf-dropdown-field--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-dropdown-field--padding-inline-start: var(--sf-ui-1--space-x);
    --sf-dropdown-field--padding-top: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px));
  }
  .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field {
    min-height: var(--sf-ui-2--control-height);
    min-block-size: var(--sf-ui-2--control-height);
    --sf-dropdown-field--gap: var(--sf-space-1\/3);
    --sf-dropdown-field--padding-bottom: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px));
    --sf-dropdown-field--padding-inline-end: var(--sf-ui-2--space-x);
    --sf-dropdown-field--padding-inline-start: var(--sf-ui-2--space-x);
    --sf-dropdown-field--padding-top: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px));
  }
  /* The field fills the control, so its ring turns inwards. */
  .sf-dropdown[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-dropdown-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-dropdown-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown[\:has\(\%3E\%20.sf-dropdown-field\%20input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-dropdown-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown:has(> .sf-dropdown-field input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-dropdown-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown.open .sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-primary-active);
  }
  .sf-dropdown.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder {
    --sf-dropdown-placeholder--font-family: var(--sf-text--family);
  }
  .sf-dropdown.sf-dropdown--text .sf-dropdown-field input::-moz-placeholder {
    --sf-dropdown-placeholder--font-family: var(--sf-text--family);
  }
  .sf-dropdown.sf-dropdown--text .sf-dropdown-field input:-ms-input-placeholder {
    --sf-dropdown-placeholder--font-family: var(--sf-text--family);
  }
  .sf-dropdown.sf-dropdown--text .sf-dropdown-field input::-ms-input-placeholder {
    --sf-dropdown-placeholder--font-family: var(--sf-text--family);
  }
  .sf-dropdown.sf-dropdown--text .sf-dropdown-field input::placeholder {
    --sf-dropdown-placeholder--font-family: var(--sf-text--family);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-dropdown.sf-dropdown--tag .sf-dropdown-tag-container {
    --sf-dropdown-tag-container--gap: var(--sf-space-1\/3);
  }
}
/* A filled field reads as a field only by its fill, so while someone is typing
   in it -- the list open or focus anywhere inside, by pointer or keyboard -- it becomes the
   ordinary field: the surface of a bordered field and a visible boundary. The
   fill comes back when focus leaves. Error, disabled and read-only fields keep
   their own look. */
@layer sf.components {
  /* Doubled classes: it has to outrank the hover rule, which also matches while
     the pointer that opened the list is still over the field. */
  .sf-dropdown.sf-dropdown.sf-dropdown--filled.open:not(.error)[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled.open:not(.error):not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled[focus-within]:not(.error)[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled[focus-within]:not(.error):not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled.open:not(.error)[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)] .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled.open:not(.error):not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled:not(.error)[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)][focus-within] .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled:not(.error):not(:has(> .sf-dropdown-field > :disabled))[focus-within] .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled:not(.error)[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)][focus-within] .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled:not(.error)[\:not-has\(\%3E\%20.sf-dropdown-field\%20\%3E\%20\:disabled\)]:focus-within .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--filled:not(.error):not(:has(> .sf-dropdown-field > :disabled)):focus-within .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--background-color: var(--sf-surface-0);
    --sf-dropdown-field--border-color: var(--sf-outline);
  }
}
@layer sf.components {
  .sf-dropdown {
    position: relative;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-dropdown > .sf-dropdown-field,
  .sf-dropdown > .sf-dropdown-field > input:not([type=hidden]),
  .sf-dropdown .sf-dropdown-tag-container {
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-dropdown > .sf-dropdown-field > input:not([type=hidden]) {
    flex: 1;
    width: 100%;
    inline-size: 100%;
  }
  .sf-dropdown .sf-dropdown-tag-container {
    flex: 1;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
    }
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
  }
  .sf-dropdown .sf-dropdown-tag-container > .sf-tag {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-tag--border-top-left-radius, var(--sf-radius--ui));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-tag--border-top-right-radius, var(--sf-radius--ui));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-radius--ui));
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-radius--ui));
  }
  /* The label row is a flex row whatever the markup says, so its height is its
     text's line and not the surrounding line box: a label written without the
     flex class stood 24px tall over a 20px text and put the field 4px further
     from it than a text field's. */
  .sf-dropdown .sf-dropdown-label {
    display: flex;
  }
  /* A tag in the field stays one line: a narrow field shortens the label with an
     ellipsis instead of breaking it, so the field keeps its height. */
  .sf-dropdown .sf-dropdown-tag-container .sf-tag {
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-dropdown .sf-dropdown-tag-container .sf-tag-container {
    min-width: 0;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The field's text line for each size, on the root so a tag and a picture can
     read it (the input's own variables live on the input). Pictures take the
     whole line, the ladder size a list item gives them too (24 at size 1 on
     desktop); the field's block padding gives up the border instead, so the
     control stays at its height: 40 = 1 + 7 + 24 + 7 + 1. */
  .sf-dropdown.sf-dropdown--size-1\/2 {
    --sf-dropdown-tag-line--height: var(--sf-text-height-1\/2);
  }
  .sf-dropdown.sf-dropdown--size-1 {
    --sf-dropdown-tag-line--height: var(--sf-text-height-1);
  }
  .sf-dropdown.sf-dropdown--size-2 {
    --sf-dropdown-tag-line--height: var(--sf-text-height-2);
  }
  .sf-dropdown {
    --sf-dropdown-tag-line--box: var(--sf-dropdown-tag-line--height);
  }
  /* A selected tag sits on the field's own text line, so a field holding tags is
     as tall as one holding text. The tag itself knows how to do that: the script
     renders it inline (sf-tag--inline) one size below the field, which gives the
     label one text step down; the field only tells it how tall its line is.
     Only size 1/2 does this; from size 1 up the chip has its own line. */
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-tag-container {
    --sf-tag--line: var(--sf-dropdown-tag-line--box);
  }
  /* From size 1 up the tag is a compact chip of the field's own size, so the
     field keeps only the step between its default and compact padding, less the
     border: 3px around the chips, and a field of chips is as tall as a field of
     text. */
  .sf-dropdown.sf-dropdown.sf-dropdown--tag.sf-dropdown--size-1 > .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--padding-top: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-ui-1--space-y-tightness-low) - var(--sf-px));
    --sf-dropdown-field--padding-bottom: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-ui-1--space-y-tightness-low) - var(--sf-px));
    --sf-dropdown-field--padding-inline-start: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-ui-1--space-y-tightness-low) - var(--sf-px));
  }
  .sf-dropdown.sf-dropdown.sf-dropdown--tag.sf-dropdown--size-2 > .sf-dropdown-field.sf-dropdown-field {
    --sf-dropdown-field--padding-top: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-ui-2--space-y-tightness-low) - var(--sf-px));
    --sf-dropdown-field--padding-bottom: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-ui-2--space-y-tightness-low) - var(--sf-px));
    --sf-dropdown-field--padding-inline-start: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-ui-2--space-y-tightness-low) - var(--sf-px));
  }
  .sf-dropdown .sf-dropdown-tag-container .sf-tag > button:not(.does-not-exist) {
    flex-shrink: 0;
  }
  .sf-dropdown .sf-dropdown-tag-container .sf-tag > .sf-icon {
    flex-shrink: 0;
  }
  .sf-dropdown .sf-dropdown-tag-container .sf-tag > .sf-avatar {
    flex-shrink: 0;
  }
  .sf-dropdown .sf-dropdown-tag-container .sf-tag > .sf-tag-color-icon {
    flex-shrink: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown-field > button {
    right: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    right: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown-field > button {
    right: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    right: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
    }
  }
  .sf-dropdown-field > button:where(:dir(ltr)) {
    right: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    right: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown-field > button {
    left: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    left: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-dropdown-field > button {
    left: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    left: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
    }
  }
  .sf-dropdown-field > button:where(:dir(rtl)) {
    left: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    left: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown-field > button {
    right: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown-field > button {
    right: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    }
  }
  .sf-dropdown-field > button:where(:dir(ltr)) {
    right: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown-field > button {
    left: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-dropdown-field > button {
    left: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    }
  }
  .sf-dropdown-field > button:where(:dir(rtl)) {
    left: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
  }
  .sf-dropdown-field > button {
    /* The chevron's glyph, not the button around it, ends at the field's
       padding: that is where an option's check ends in the open list, so the two
       share an axis. The button's own padding is given back. */
    inset-inline-end: calc(var(--sf-dropdown-field--padding-inline-end) - 0px);
    inset-inline-end: calc(var(--sf-dropdown-field--padding-inline-end) - var(--sf-icon-button--padding-inline-end, 0px));
    position: absolute;
  }
  .sf-dropdown.sf-dropdown--tag > .sf-dropdown-field > button {
    position: static;
    flex-shrink: 0;
    /* In flow, so wrapped tags never run under it -- but no taller than the
       field's text line, or a field holding tags grows past a field holding
       text. The icon stays centred and may overhang the line; it does not take
       part in the line height. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--sf-dropdown-tag-line--box);
    block-size: var(--sf-dropdown-tag-line--box);
    width: var(--sf-dropdown-tag-line--box);
    inline-size: var(--sf-dropdown-tag-line--box);
    min-height: 0;
    min-block-size: 0;
    min-width: 0;
    min-inline-size: 0;
    padding: 0;
  }
  .sf-dropdown .sf-list {
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% + var(--sf-space-1\/4));
    z-index: 10;
  }
  .sf-dropdown.sf-dropdown--filled.sf-dropdown--tag .sf-list .sf-list-item .sf-tag {
    --sf-tag--background-color: transparent;
  }
  .sf-dropdown .sf-list[hidden] {
    display: none !important;
  }
  .sf-list-item {
    position: relative;
  }
  .sf-list-item.focus-visible {
    z-index: 1;
  }
  .sf-list-item:focus-visible {
    z-index: 1;
  }
  .sf-dropdown .sf-list .sf-list-item[hidden] {
    display: none !important;
  }
  .sf-dropdown-value {
    position: absolute;
    width: var(--sf-a1);
    inline-size: var(--sf-a1);
    height: var(--sf-a1);
    block-size: var(--sf-a1);
    overflow: hidden;
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    white-space: nowrap;
  }
  .sf-list [role=option] .sf-checkbox {
    pointer-events: none;
  }
  .sf-list [role=option],
  .sf-list [role=option] .sf-list-item-wrap,
  .sf-list [role=option] .sf-list-item-container {
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-list [role=option] .sf-list-item-container {
    word-wrap: anywhere;
  }
  /* A long label wraps; its picture keeps its shape. */
  .sf-list [role=option] .sf-list-item-wrap > .sf-checkbox {
    flex-shrink: 0;
  }
  .sf-list [role=option] .sf-list-item-wrap > .sf-icon {
    flex-shrink: 0;
  }
  .sf-list [role=option] .sf-list-item-wrap > .sf-avatar {
    flex-shrink: 0;
  }
  .sf-list [role=option] .sf-list-item-wrap > .sf-flag {
    flex-shrink: 0;
  }
  .sf-list [role=option] .sf-list-item-wrap .sf-tag-color-icon {
    flex-shrink: 0;
  }
}
@layer sf.states {
  .sf-dropdown .sf-dropdown-field[\:has\(\%3E\%20\[aria-haspopup\].focus-visible\)] {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown .sf-dropdown-field:has(> [aria-haspopup].focus-visible) {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown .sf-dropdown-field[\:has\(\%3E\%20\[aria-haspopup\]\:focus-visible\)] {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown .sf-dropdown-field:has(> [aria-haspopup]:focus-visible) {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-dropdown .sf-dropdown-field > button[aria-haspopup].focus-visible {
    --sf-icon-button--box-shadow: none;
    box-shadow: none;
    outline: none;
  }
  .sf-dropdown .sf-dropdown-field > button[aria-haspopup]:focus-visible {
    --sf-icon-button--box-shadow: none;
    box-shadow: none;
    outline: none;
  }
  /* The text control inside the field gives its ring up for the same reason the
     button does: the field already carries one for the whole control. */
  .sf-dropdown .sf-dropdown-field input.focus-visible {
    outline: none;
  }
  .sf-dropdown .sf-dropdown-field input:focus-visible {
    outline: none;
  }
  @media (forced-colors: active) {
    .sf-dropdown .sf-dropdown-field[\:has\(\%3E\%20\[aria-haspopup\].focus-visible\)],
    .sf-list [role=option].focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(-1 * var(--sf-focus-outline-width));
    }
    .sf-dropdown .sf-dropdown-field:has(> [aria-haspopup].focus-visible),
    .sf-list [role=option].focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(-1 * var(--sf-focus-outline-width));
    }
    .sf-dropdown .sf-dropdown-field[\:has\(\%3E\%20\[aria-haspopup\]\:focus-visible\)],
    .sf-list [role=option].focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(-1 * var(--sf-focus-outline-width));
    }
    .sf-dropdown .sf-dropdown-field[\:has\(\%3E\%20\[aria-haspopup\]\:focus-visible\)],
    .sf-list [role=option]:focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(-1 * var(--sf-focus-outline-width));
    }
    .sf-dropdown .sf-dropdown-field:has(> [aria-haspopup]:focus-visible),
    .sf-list [role=option]:focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(-1 * var(--sf-focus-outline-width));
    }
  }
}
@layer sf.components {
  /* The picture of a single choice, in front of its label in the field. The
     ceiling is the field line: a picture's own box must never set the field's
     height, whatever kind of picture comes next. */
  .sf-dropdown .sf-dropdown-field > .sf-dropdown-field-visual {
    flex-shrink: 0;
    max-height: var(--sf-dropdown-tag-line--box);
    max-block-size: var(--sf-dropdown-tag-line--box);
  }
  /* The label follows the picture at the size's text step, the step an option
     label keeps from its picture, so the value and the option label start on
     one axis. The step is the picture's margin alone: the field's own gap would
     add 4px that the option does not have. */
  .sf-dropdown .sf-dropdown-field[\:has\(\%3E\%20.sf-dropdown-field-visual\)] {
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
  .sf-dropdown .sf-dropdown-field:has(> .sf-dropdown-field-visual) {
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-right: var(--sf-ui-1\/2--text-space-x);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-right: var(--sf-ui-1\/2--text-space-x);
    }
  }
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual:where(:dir(ltr)) {
    margin-right: var(--sf-ui-1\/2--text-space-x);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-left: var(--sf-ui-1\/2--text-space-x);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-left: var(--sf-ui-1\/2--text-space-x);
    }
  }
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual:where(:dir(rtl)) {
    margin-left: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-dropdown.sf-dropdown--size-1\/2 .sf-dropdown-field > .sf-dropdown-field-visual {
    -webkit-margin-end: var(--sf-ui-1\/2--text-space-x);
            margin-inline-end: var(--sf-ui-1\/2--text-space-x);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-right: var(--sf-ui-1--text-space-x);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-right: var(--sf-ui-1--text-space-x);
    }
  }
  .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual:where(:dir(ltr)) {
    margin-right: var(--sf-ui-1--text-space-x);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-left: var(--sf-ui-1--text-space-x);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-left: var(--sf-ui-1--text-space-x);
    }
  }
  .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual:where(:dir(rtl)) {
    margin-left: var(--sf-ui-1--text-space-x);
  }
  .sf-dropdown.sf-dropdown--size-1 .sf-dropdown-field > .sf-dropdown-field-visual {
    -webkit-margin-end: var(--sf-ui-1--text-space-x);
            margin-inline-end: var(--sf-ui-1--text-space-x);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-right: var(--sf-ui-2--text-space-x);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-right: var(--sf-ui-2--text-space-x);
    }
  }
  .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual:where(:dir(ltr)) {
    margin-right: var(--sf-ui-2--text-space-x);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-left: var(--sf-ui-2--text-space-x);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual {
    margin-left: var(--sf-ui-2--text-space-x);
    }
  }
  .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual:where(:dir(rtl)) {
    margin-left: var(--sf-ui-2--text-space-x);
  }
  .sf-dropdown.sf-dropdown--size-2 .sf-dropdown-field > .sf-dropdown-field-visual {
    -webkit-margin-end: var(--sf-ui-2--text-space-x);
            margin-inline-end: var(--sf-ui-2--text-space-x);
  }
  /* A flag keeps its proportions at the optical size of an icon on the same
     line: three quarters of it, as an icon's glyph fills about three quarters of
     its box. The list gives its flags the same size, so they match. */
  .sf-dropdown .sf-dropdown-field > .sf-flag.sf-dropdown-field-visual {
    --sf-flag--size: calc(var(--sf-dropdown-tag-line--box) * 3 / 4);
  }
  /* No taller than the field line, or a field with a picture grows past a field
     without one (an avatar made a size 1 field 50px, an icon 42px). The colour
     dot is sized here because its size otherwise lives on the tag around it. */
  .sf-dropdown .sf-dropdown-field > .sf-icon.sf-dropdown-field-visual {
    --sf-icon--font-size: var(--sf-dropdown-tag-line--box);
    --sf-icon--height: var(--sf-dropdown-tag-line--box);
    --sf-icon--width: var(--sf-dropdown-tag-line--box);
  }
  .sf-dropdown .sf-dropdown-field > .sf-avatar.sf-dropdown-field-visual {
    --sf-avatar--height: var(--sf-dropdown-tag-line--box);
    --sf-avatar--width: var(--sf-dropdown-tag-line--box);
    /* Two initials fit a line-sized circle at half its height. */
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-dropdown-tag-line--box) / 2));
    --sf-avatar--line-height: var(--sf-dropdown-tag-line--box);
  }
  .sf-dropdown .sf-dropdown-field > .sf-tag-color-icon.sf-dropdown-field-visual {
    --sf-tag-color-icon--height: var(--sf-dropdown-tag-line--box);
    --sf-tag-color-icon--width: var(--sf-dropdown-tag-line--box);
    --sf-tag-color-icon--border-radius: var(--sf-radius-circle);
    border-radius: var(--sf-radius-circle);
    height: var(--sf-dropdown-tag-line--box);
    block-size: var(--sf-dropdown-tag-line--box);
    width: var(--sf-dropdown-tag-line--box);
    inline-size: var(--sf-dropdown-tag-line--box);
  }
  /* The picture takes the input's leading step, so the label follows it at one
     gap instead of a gap plus the input's own padding. Doubled class: the
     per-size input rules set the same variable. */
  .sf-dropdown.sf-dropdown .sf-dropdown-field.sf-dropdown-field[\:has\(\%3E\%20.sf-dropdown-field-visual\)] > input:not([type=hidden]) {
    --sf-dropdown-input--padding-inline-start: 0;
  }
  .sf-dropdown.sf-dropdown .sf-dropdown-field.sf-dropdown-field:has(> .sf-dropdown-field-visual) > input:not([type=hidden]) {
    --sf-dropdown-input--padding-inline-start: 0;
  }
  /* A value longer than the field ends in an ellipsis rather than a cut letter. */
  .sf-dropdown .sf-dropdown-field > input:not([type=hidden]) {
    text-overflow: ellipsis;
  }
}
@layer sf.states {
  /* The open list lines up with its field: a picture, a label and the check sit
     on the same vertical axes as the picture, the value and the chevron above.
     The list adds its own inset, so an option gives that much back from its
     padding; the field adds its border, so the option adds that. Measured
     before: every option picture sat 3px right of the field's. */
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--avatar.sf-list-item--size-1\/2 .sf-avatar-label-group {
    --sf-avatar-label-group--gap: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--avatar.sf-list-item--size-1 .sf-avatar-label-group {
    --sf-avatar-label-group--gap: var(--sf-ui-1--text-space-x);
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--avatar.sf-list-item--size-2 .sf-avatar-label-group {
    --sf-avatar-label-group--gap: var(--sf-ui-2--text-space-x);
  }
  .sf-dropdown .sf-list .sf-list-item .sf-avatar-label-group > .sf-avatar {
    flex-shrink: 0;
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--size-1\/2 {
    --sf-list-item--padding-inline-start: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - var(--sf-list--padding-left, 0px));
    --sf-list-item--padding-inline-end: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - var(--sf-list--padding-right, 0px));
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--size-1\/2 .sf-list-item-wrap > .sf-flag {
    --sf-flag--size: calc(var(--sf-text-height-1\/2) * 3 / 4);
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--size-1 {
    --sf-list-item--padding-inline-start: calc(var(--sf-ui-1--space-x) + var(--sf-px) - var(--sf-list--padding-left, 0px));
    --sf-list-item--padding-inline-end: calc(var(--sf-ui-1--space-x) + var(--sf-px) - var(--sf-list--padding-right, 0px));
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--size-1 .sf-list-item-wrap > .sf-flag {
    --sf-flag--size: calc(var(--sf-text-height-1) * 3 / 4);
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--size-2 {
    --sf-list-item--padding-inline-start: calc(var(--sf-ui-2--space-x) + var(--sf-px) - var(--sf-list--padding-left, 0px));
    --sf-list-item--padding-inline-end: calc(var(--sf-ui-2--space-x) + var(--sf-px) - var(--sf-list--padding-right, 0px));
  }
  .sf-dropdown .sf-list .sf-list-item.sf-list-item--size-2 .sf-list-item-wrap > .sf-flag {
    --sf-flag--size: calc(var(--sf-text-height-2) * 3 / 4);
  }
}
/* A trigger the consumer supplied stands as it is: the dropdown gives it the
   press that opens the list and nothing else -- no border, no field height, no
   chevron of its own. What it looks like is the consumer's business, which is
   the point of handing one in. */
@layer sf.components {
  .sf-dropdown .sf-dropdown-trigger {
    cursor: pointer;
  }
  .sf-dropdown[\:has\(\%3E\%20.sf-dropdown-trigger\)] {
    display: inline-flex;
    width: auto;
    inline-size: auto;
  }
  .sf-dropdown[\:has\(\%3E\%20.sf-dropdown-trigger\)] {
    display: inline-flex;
    width: auto;
    width: auto;
    inline-size: auto;
  }
  .sf-dropdown:has(> .sf-dropdown-trigger) {
    display: inline-flex;
    width: auto;
    inline-size: auto;
  }
}

/* docara-shell-source: runtime/component/inputs/css/inputs.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-input .sf-input-field input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .sf-input .sf-input-right,
  .sf-input .sf-input-field > .sf-icon,
  .sf-input .sf-input-field > .sf-icon-hint {
    flex-shrink: 0;
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/4) justify-content/flex-start (.justify-start) */
  .sf-input {
    min-width: 0;
    min-inline-size: 0;
    --sf-input--radius: var(--sf-input-radius, var(--sf-radius--ui));
    background-color: transparent;
    background-color: var(--sf-input--background-color, transparent);
    gap: var(--sf-space-1\/4);
    gap: var(--sf-input--gap, var(--sf-space-1\/4));
  }
  .sf-input .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-input-field--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-input-field--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-input-field--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-input-field--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-input-field--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-input-field--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-input-field--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-input-field--border-start-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-end);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    padding-right: var(--sf-input-field--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-end);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    padding-left: var(--sf-input-field--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-start);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    padding-left: var(--sf-input-field--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-start);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    padding-right: var(--sf-input-field--padding-inline-start);
  }
  .sf-input .sf-input-field {
    min-width: 0;
    min-inline-size: 0;
    --sf-input-field--border: var(--sf-px) solid;
    --sf-input-field--border-end-end-radius: var(--sf-input--radius);
    --sf-input-field--border-end-start-radius: var(--sf-input--radius);
    --sf-input-field--border-start-end-radius: var(--sf-input--radius);
    --sf-input-field--border-start-start-radius: var(--sf-input--radius);
    background-color: var(--sf-input-field--background-color);
    border: 0 solid;
    border: var(--sf-input-field--border, 0 solid);
    border-color: transparent;
    border-color: var(--sf-input-field--border-color, transparent);
    border-end-end-radius: var(--sf-input-field--border-end-end-radius);
    border-end-start-radius: var(--sf-input-field--border-end-start-radius);
    border-start-end-radius: var(--sf-input-field--border-start-end-radius);
    border-start-start-radius: var(--sf-input-field--border-start-start-radius);
    box-shadow: var(--sf-input-field--box-shadow);
    padding-bottom: var(--sf-input-field--padding-bottom);
    -webkit-padding-end: var(--sf-input-field--padding-inline-end);
            padding-inline-end: var(--sf-input-field--padding-inline-end);
    -webkit-padding-start: var(--sf-input-field--padding-inline-start);
            padding-inline-start: var(--sf-input-field--padding-inline-start);
    padding-top: var(--sf-input-field--padding-top);
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--sf-animation);
  }
  .sf-input .sf-input-hint {
    --sf-input-hint--background-color: transparent;
    background-color: var(--sf-input-hint--background-color);
  }
  /* utility-hint: flex/1 (.flex-1) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-end);
    }
  }
  .sf-input .sf-input-field input:where(:dir(ltr)) {
    padding-right: var(--sf-input-input--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-end);
    }
  }
  .sf-input .sf-input-field input:where(:dir(rtl)) {
    padding-left: var(--sf-input-input--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-start);
    }
  }
  .sf-input .sf-input-field input:where(:dir(ltr)) {
    padding-left: var(--sf-input-input--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-start);
    }
  }
  .sf-input .sf-input-field input:where(:dir(rtl)) {
    padding-right: var(--sf-input-input--padding-inline-start);
  }
  .sf-input .sf-input-field input {
    min-width: 0;
    min-inline-size: 0;
    --sf-input-input--background-color: transparent;
    background-color: var(--sf-input-input--background-color);
    color: var(--sf-input-input--color);
    color: var(--sf-input-color, var(--sf-input-input--color));
    font-family: var(--sf-input-input--font-family);
    font-size: var(--sf-input-input--font-size);
    line-height: var(--sf-input-input--line-height);
    -webkit-padding-end: var(--sf-input-input--padding-inline-end);
            padding-inline-end: var(--sf-input-input--padding-inline-end);
    -webkit-padding-start: var(--sf-input-input--padding-inline-start);
            padding-inline-start: var(--sf-input-input--padding-inline-start);
  }
  .sf-input .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input.sf-input--filled .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input .sf-input-left {
    --sf-input-left--background-color: transparent;
    background-color: var(--sf-input-left--background-color);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-end);
    }
  }
  .sf-input .sf-input-right:where(:dir(ltr)) {
    padding-right: var(--sf-input-right--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-end);
    }
  }
  .sf-input .sf-input-right:where(:dir(rtl)) {
    padding-left: var(--sf-input-right--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-start);
    }
  }
  .sf-input .sf-input-right:where(:dir(ltr)) {
    padding-left: var(--sf-input-right--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-start);
    }
  }
  .sf-input .sf-input-right:where(:dir(rtl)) {
    padding-right: var(--sf-input-right--padding-inline-start);
  }
  .sf-input .sf-input-right {
    --sf-input-right--background-color: transparent;
    background-color: var(--sf-input-right--background-color);
    -webkit-padding-end: var(--sf-input-right--padding-inline-end);
            padding-inline-end: var(--sf-input-right--padding-inline-end);
    -webkit-padding-start: var(--sf-input-right--padding-inline-start);
            padding-inline-start: var(--sf-input-right--padding-inline-start);
  }
  .sf-input .sf-input-text {
    --sf-input-text--color: var(--sf-on-surface-variant);
    --sf-input-text--font-family: var(--sf-text--family);
    --sf-input-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-input-text--color);
    font-family: var(--sf-input-text--font-family);
    font-size: var(--sf-input-text--font-size);
    font-weight: var(--sf-input-text--font-weight);
    line-height: var(--sf-input-text--line-height);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-b0) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-input .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--background-color: transparent;
    background-color: var(--sf-input-hint-text-wrap--background-color);
    color: var(--sf-input-hint-text-wrap--color);
    font-family: var(--sf-input-hint-text-wrap--font-family);
    font-size: var(--sf-input-hint-text-wrap--font-size);
    font-weight: var(--sf-input-hint-text-wrap--font-weight);
    gap: var(--sf-b0);
    line-height: var(--sf-input-hint-text-wrap--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-input-label--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-input .sf-input-label {
    --sf-input-label--background-color: transparent;
    --sf-input-label--gap: var(--sf-space-1\/4);
    background-color: var(--sf-input-label--background-color);
    gap: var(--sf-input-label--gap);
  }
  .sf-input .sf-input-required {
    --sf-input-required--color: var(--sf-error);
    --sf-input-required--font-family: var(--sf-text--family);
    --sf-input-required--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-input-required--color);
    font-family: var(--sf-input-required--font-family);
    font-size: var(--sf-input-required--font-size);
    font-weight: var(--sf-input-required--font-weight);
    line-height: var(--sf-input-required--line-height);
  }
  .sf-input.sf-input--size-1 .sf-input-field .sf-input-right .sf-input-text, .sf-input.sf-input--size-2 .sf-input-label .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1);
    --sf-input-text--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--bordered > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--filled > .sf-input-field > .sf-input-hint > .sf-icon {
    /* A glyph is non-text graphics, and WCAG 1.4.11 asks 3:1 of it.
     --sf-on-surface-muted is 3.18:1 light and 2.92:1 dark, so it sat on the
     line in one theme and under it in the other. --sf-on-surface-variant is
     the Framework's own paler-than-text role, 6.47 and 5.95, and the one a
     label already reads in (owner, 2026-10-08). */
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-left .sf-icon, .sf-input.sf-input--size-1 > .sf-input-field > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-input.sf-input--size-1 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/2);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1 .sf-input-hint-text-wrap, .sf-input.sf-input--size-2 .sf-input-hint-text-wrap, .sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-family: var(--sf-text--family);
    --sf-input-hint-text-wrap--font-weight: var(--sf-font-weight-regular);
  }
  .sf-input.sf-input--bordered .sf-input-hint-text-wrap, .sf-input.sf-input--filled .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--color: var(--sf-on-surface-variant);
  }
  .sf-input.sf-input--size-1 input {
    --sf-input-input--font-size: var(--sf-text-size-1);
    --sf-input-input--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 input, .sf-input.sf-input--size-2 input, .sf-input.sf-input--size-1\/2 input {
    --sf-input-input--font-family: var(--sf-text--family);
  }
  .sf-input.sf-input--bordered input, .sf-input.sf-input--filled input {
    --sf-input-input--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--size-1 .sf-input-label .sf-input-text, .sf-input.sf-input--size-1\/2 .sf-input-field .sf-input-right .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1\/2);
    --sf-input-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1\/2);
    --sf-input-required--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-input.error.sf-input--bordered .sf-input-field {
    --sf-input-field--background-color: var(--sf-transparent-for-focus);
    --sf-input-field--border-color: var(--sf-error);
  }
  .sf-input.error.sf-input--bordered .sf-input-hint-text-wrap, .sf-input.error.sf-input--filled .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--color: var(--sf-error);
  }
  .sf-input.error.sf-input--filled .sf-input-field {
    --sf-input-field--background-color: var(--sf-error-container);
  }
  .sf-input.sf-input--size-2 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-input.sf-input--size-2 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1);
    --sf-input-required--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-input.sf-input--size-2 .sf-input-field .sf-input-right .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-2);
    --sf-input-text--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-left .sf-icon, .sf-input.sf-input--size-2 > .sf-input-field > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 input {
    --sf-input-input--font-size: var(--sf-text-size-2);
    --sf-input-input--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-label .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1\/3);
    --sf-input-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-left .sf-icon, .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/3);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/2 input {
    --sf-input-input--font-size: var(--sf-text-size-1\/2);
    --sf-input-input--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1\/3);
    --sf-input-required--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-input.sf-input--size-1 .sf-input-field {
    height: var(--sf-ui-1--control-height);
    block-size: var(--sf-ui-1--control-height);
    --sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));
    --sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));
    --sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));
    --sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-input.sf-input--size-1 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 .sf-input-field {
    height: var(--sf-ui-2--control-height);
    block-size: var(--sf-ui-2--control-height);
    --sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));
    --sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));
    --sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));
    --sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-input.sf-input--size-2 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field {
    height: var(--sf-ui-1\/2--control-height);
    block-size: var(--sf-ui-1\/2--control-height);
    --sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));
    --sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.error > .sf-input-field > .sf-input-hint > .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
}
@layer sf.states {
  .sf-input:not(.error).sf-input--bordered[\:not-has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline));
  }
  .sf-input:not(.error).sf-input--bordered:not(:has(input:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline));
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input.sf-input--bordered[\:has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline-disable);
  }
  .sf-input.sf-input--bordered:has(input:disabled) .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline-disable);
  }
  .sf-input.sf-input--bordered[\:has\(input\:disabled\)] input, .sf-input.sf-input--filled[\:has\(input\:disabled\)] input {
    --sf-input-input--color: var(--sf-on-disable);
  }
  .sf-input.sf-input--bordered:has(input:disabled) input, .sf-input.sf-input--filled:has(input:disabled) input {
    --sf-input-input--color: var(--sf-on-disable);
  }
  .sf-input.sf-input--filled[\:has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-disable);
  }
  .sf-input.sf-input--filled:has(input:disabled) .sf-input-field {
    --sf-input-field--background-color: var(--sf-disable);
  }
  .sf-input:not(.error).sf-input--filled[\:not-has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus));
  }
  .sf-input:not(.error).sf-input--filled:not(:has(input:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus));
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-left .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input:has(input:disabled) > .sf-input-field > .sf-input-left .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-text {
    --sf-input-text--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-text {
    --sf-input-text--color: var(--sf-on-disable);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  /* The ring belongs to the field the person sees, not to the bare control
     inside it. An outline keeps the field's own shadow free for state. */
  .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* The global :focus-visible rule paints the ring on whatever holds the focus.
     Here the focus lives on the bare control while the ring belongs to the part
     the person sees, so the control gives its own ring up: one component, one
     ring.

     Not only for keyboard focus. A text field matches :focus-visible on a mouse
     click too -- browsers decide that deliberately, because the person is about
     to type -- so gating this on :not(--pointer-focus) did not remove the ring,
     it moved it: off the field, onto the bare input inside, where it drew a
     tight square inside the rounded field. The field's border already turns to
     the focus colour in both cases and is what marks the focus after a click. */
  .sf-input input.focus-visible {
    outline: none;
  }
  .sf-input input:focus-visible {
    outline: none;
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:-moz-read-only\:not\(\:disabled\)\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:read-only\:not\(\:disabled\)\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:-moz-read-only:not(:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:read-only:not(:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
}
@layer sf.states {
  @media (prefers-reduced-motion: reduce) {
    .sf-input .sf-input-field {
      transition-duration: 0s;
    }
  }
}
@layer sf.states {
  @media (forced-colors: active) {
    .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
    .sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled).focus-visible) .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
    .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
    .sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled):focus-visible) .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
  }
}
/* A filled field reads as a field only by its fill, so while someone is typing
   in it -- focus anywhere inside, by pointer or keyboard -- it becomes the
   ordinary field: the surface of a bordered field and a visible boundary. The
   fill comes back when focus leaves. Error, disabled and read-only fields keep
   their own look. */
@layer sf.states {
  /* In sf.states with the filled rest and hover rules it has to follow. */
  /* Focus anywhere within the field changes the fill, not the focus ring,
     which stays keyboard-only (:focus-visible) under the field focus
     contract. */
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\[focus-within\]\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\[focus-within\]\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only)[focus-within]) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only)[focus-within]) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:focus-within\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:focus-within\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):focus-within) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):focus-within) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  /* The boundary of the ordinary field. Without it the field was the surface
     with a transparent border: visible while the pointer hovered it, gone as
     soon as the pointer left, with the caret still inside -- and invisible on a
     surface-0 panel such as the dropdown list. Lighter than the hover rule, so
     hover still colours it. */
  .sf-input:not(.error).sf-input--filled[\:has\(input\[focus-within\]\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
  .sf-input:not(.error).sf-input--filled:has(input[focus-within]) .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:focus-within\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
  .sf-input:not(.error).sf-input--filled:has(input:focus-within) .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
}

/* docara-shell-source: runtime/component/avatars/css/avatars.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-add-button .sf-icon-button {
    border-style: dashed;
  }
}
@layer sf.components {
  .sf-avatar-card.sf-avatar-card--square img,
  .sf-avatar-card.sf-avatar-card-square img {
    aspect-ratio: 1/1;
  }
  .sf-avatar-card img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sf-avatar-card.sf-avatar-card--portrait img,
  .sf-avatar-card.sf-avatar-card-portrait img {
    aspect-ratio: 9/16;
  }
  .disabled .sf-avatar,
  .disabled .sf-avatar:hover,
  .disabled .sf-avatar:focus,
  .disabled .sf-avatar:active {
    --sf-avatar--border-color: transparent;
  }
  .sf-add-button {
    position: relative;
    display: flex;
    align-items: center;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-add-button .sf-tooltip {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-add-button .sf-tooltip {
    left: 50%;
    }
  }
  .sf-add-button .sf-tooltip:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-add-button .sf-tooltip {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-add-button .sf-tooltip {
    right: 50%;
    }
  }
  .sf-add-button .sf-tooltip:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-add-button .sf-tooltip {
    position: absolute;
    inset-inline-start: 50%;
    bottom: calc(100% + var(--sf-space-1));
    inset-block-end: calc(100% + var(--sf-space-1));
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: var(--sf-z-index-9);
    display: none;
    pointer-events: none;
  }
  .sf-add-button:hover .sf-tooltip,
  .sf-add-button[focus-within] .sf-tooltip {
    display: block;
  }
  .sf-add-button:hover .sf-tooltip,
  .sf-add-button:focus-within .sf-tooltip {
    display: block;
  }
}
@layer sf.components {
  .sf-avatar-badge {
    background-color: transparent;
    background-color: var(--sf-avatar-badge--background-color, transparent);
    width: var(--sf-avatar-badge--width);
  }
  .sf-avatar-badge--size-1 {
    --sf-avatar-badge--width: var(--sf-text-size-1\/2);
  }
  .sf-avatar-badge--size-2 {
    --sf-avatar-badge--width: var(--sf-text-size-1);
  }
  .sf-avatar-badge--size-3 {
    --sf-avatar-badge--width: var(--sf-text-size-2);
  }
  .sf-avatar-badge--size-1\/4 {
    --sf-avatar-badge--width: var(--sf-text-size-1\/5);
  }
  .sf-avatar-badge--size-1\/3 {
    --sf-avatar-badge--width: var(--sf-text-size-1\/4);
  }
  .sf-avatar-badge--size-1\/2 {
    --sf-avatar-badge--width: var(--sf-text-size-1\/3);
  }
}
@layer sf.components {
  /* utility-hint: display/block */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-online-indicator {
    border-bottom-right-radius: var(--sf-radius-circle);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-online-indicator {
    border-bottom-right-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-online-indicator {
    border-bottom-left-radius: var(--sf-radius-circle);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-online-indicator {
    border-bottom-left-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-online-indicator {
    border-bottom-left-radius: var(--sf-radius-circle);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-online-indicator {
    border-bottom-left-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-online-indicator {
    border-bottom-right-radius: var(--sf-radius-circle);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-online-indicator {
    border-bottom-right-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-online-indicator {
    border-right-width: var(--sf-px);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-online-indicator {
    border-right-width: var(--sf-px);
    }
  }
  .sf-online-indicator:where(:dir(ltr)) {
    border-right-width: var(--sf-px);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-online-indicator {
    border-left-width: var(--sf-px);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-online-indicator {
    border-left-width: var(--sf-px);
    }
  }
  .sf-online-indicator:where(:dir(rtl)) {
    border-left-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-online-indicator {
    border-left-width: var(--sf-px);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-online-indicator {
    border-left-width: var(--sf-px);
    }
  }
  .sf-online-indicator:where(:dir(ltr)) {
    border-left-width: var(--sf-px);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-online-indicator {
    border-right-width: var(--sf-px);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-online-indicator {
    border-right-width: var(--sf-px);
    }
  }
  .sf-online-indicator:where(:dir(rtl)) {
    border-right-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-online-indicator {
    border-top-right-radius: var(--sf-radius-circle);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-online-indicator {
    border-top-right-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-online-indicator {
    border-top-left-radius: var(--sf-radius-circle);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-online-indicator {
    border-top-left-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-online-indicator {
    border-top-left-radius: var(--sf-radius-circle);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-online-indicator {
    border-top-left-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-circle);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-online-indicator {
    border-top-right-radius: var(--sf-radius-circle);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-online-indicator {
    border-top-right-radius: var(--sf-radius-circle);
    }
  }
  .sf-online-indicator:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-circle);
  }
  .sf-online-indicator {
    border-bottom-width: var(--sf-px);
    border-color: transparent;
    border-color: var(--sf-surface-0, transparent);
    border-end-end-radius: var(--sf-radius-circle);
    border-end-start-radius: var(--sf-radius-circle);
    border-inline-end-width: var(--sf-px);
    border-inline-start-width: var(--sf-px);
    border-start-end-radius: var(--sf-radius-circle);
    border-start-start-radius: var(--sf-radius-circle);
    border-top-width: var(--sf-px);
    width: var(--sf-online-indicator--width);
    height: var(--sf-online-indicator--height);
    background-color: var(--sf-online-indicator--background-color);
    --sf-online-indicator--height: var(--sf-b6);
    --sf-online-indicator--width: var(--sf-b6);
  }
  .sf-online-indicator--size-1 {
    --sf-online-indicator--height: var(--sf-b2);
    --sf-online-indicator--width: var(--sf-b2);
  }
  .sf-online-indicator--size-2 {
    --sf-online-indicator--height: var(--sf-b6);
    --sf-online-indicator--width: var(--sf-b6);
  }
  .sf-online-indicator--size-3 {
    --sf-online-indicator--height: var(--sf-c0);
    --sf-online-indicator--width: var(--sf-c0);
  }
  .sf-online-indicator--size-1\/4 {
    --sf-online-indicator--height: var(--sf-a6);
    --sf-online-indicator--width: var(--sf-a6);
  }
  .sf-online-indicator--size-1\/3 {
    --sf-online-indicator--height: var(--sf-a8);
    --sf-online-indicator--width: var(--sf-a8);
  }
  .sf-online-indicator--size-1\/2 {
    --sf-online-indicator--height: var(--sf-b0);
    --sf-online-indicator--width: var(--sf-b0);
  }
  .sf-online-indicator--offline {
    --sf-online-indicator--background-color: var(--sf-on-surface-muted);
  }
  .sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-avatar-card {
    background-color: transparent;
    background-color: var(--sf-avatar-card--background-color, transparent);
    gap: var(--sf-space-1\/3);
    gap: var(--sf-avatar-card--gap, var(--sf-space-1\/3));
  }
  .sf-avatar-card .sf-avatar-card-image {
    background-color: transparent;
    background-color: var(--sf-avatar-card-image--background-color, transparent);
  }
  /* utility-hint: flex/1 (.flex-1) 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) */
  .sf-avatar-card .sf-avatar-card-content {
    background-color: transparent;
    background-color: var(--sf-avatar-card-content--background-color, transparent);
    color: var(--sf-on-surface);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text-size-1);
    font-weight: var(--sf-font-weight-medium);
    line-height: var(--sf-text-height-1);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-avatar-card-row--gap, var(--sf-space-1\/4)) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-avatar-card .sf-avatar-card-row {
    background-color: transparent;
    background-color: var(--sf-avatar-card-row--background-color, transparent);
    color: var(--sf-on-surface-variant);
    color: var(--sf-avatar-card-row--color, var(--sf-on-surface-variant));
    font-family: var(--sf-text--family);
    font-family: var(--sf-avatar-card-row--font-family, var(--sf-text--family));
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-avatar-card-row--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-avatar-card-row--font-weight, var(--sf-font-weight-regular));
    gap: var(--sf-space-1\/4);
    gap: var(--sf-avatar-card-row--gap, var(--sf-space-1\/4));
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-avatar-card-row--line-height, var(--sf-text-height-1));
  }
  .sf-avatar-card .sf-icon {
    font-size: var(--sf-text-height-1);
    font-size: var(--sf-icon--font-size, var(--sf-text-height-1));
    height: var(--sf-text-height-1);
    height: var(--sf-icon--height, var(--sf-text-height-1));
    width: var(--sf-text-height-1);
    width: var(--sf-icon--width, var(--sf-text-height-1));
  }
  .sf-avatar-card .sf-avatar-card-title {
    color: var(--sf-on-surface);
    color: var(--sf-avatar-card-title--color, var(--sf-on-surface));
    font-family: var(--sf-text--family);
    font-family: var(--sf-avatar-card-title--font-family, var(--sf-text--family));
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-avatar-card-title--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-medium);
    font-weight: var(--sf-avatar-card-title--font-weight, var(--sf-font-weight-medium));
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-avatar-card-title--line-height, var(--sf-text-height-1));
  }
}
@layer sf.components {
  /* utility-hint: display/block */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-avatar {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-circle);
    border-bottom-left-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-avatar {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-circle);
    border-bottom-right-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-avatar {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-circle);
    border-top-left-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-avatar {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    }
  }
  .sf-avatar:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-circle);
    border-top-right-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar {
    border-right-width: 0;
    border-right-width: var(--sf-avatar--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-avatar {
    border-right-width: 0;
    border-right-width: var(--sf-avatar--border-inline-end-width, 0);
    }
  }
  .sf-avatar:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-avatar--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar {
    border-left-width: 0;
    border-left-width: var(--sf-avatar--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-avatar {
    border-left-width: 0;
    border-left-width: var(--sf-avatar--border-inline-end-width, 0);
    }
  }
  .sf-avatar:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-avatar--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar {
    border-left-width: 0;
    border-left-width: var(--sf-avatar--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-avatar {
    border-left-width: 0;
    border-left-width: var(--sf-avatar--border-inline-start-width, 0);
    }
  }
  .sf-avatar:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-avatar--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar {
    border-right-width: 0;
    border-right-width: var(--sf-avatar--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-avatar {
    border-right-width: 0;
    border-right-width: var(--sf-avatar--border-inline-start-width, 0);
    }
  }
  .sf-avatar:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-avatar--border-inline-start-width, 0);
  }
  .sf-avatar {
    border-end-end-radius: var(--sf-radius-circle);
    border-end-end-radius: var(--sf-avatar--border-bottom-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    border-end-start-radius: var(--sf-radius-circle);
    border-end-start-radius: var(--sf-avatar--border-bottom-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    border-start-end-radius: var(--sf-radius-circle);
    border-start-end-radius: var(--sf-avatar--border-top-right-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    border-start-start-radius: var(--sf-radius-circle);
    border-start-start-radius: var(--sf-avatar--border-top-left-radius, var(--sf-avatar-radius, var(--sf-radius-circle)));
    color: var(--sf-on-surface-variant);
    color: var(--sf-avatar--color, var(--sf-avatar-color, var(--sf-on-surface-variant)));
    font-family: var(--sf-text--family);
    font-family: var(--sf-avatar--font-family, var(--sf-text--family));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-avatar--font-weight, var(--sf-font-weight-regular));
    width: var(--sf-avatar--width);
    height: var(--sf-avatar--height);
    background-color: var(--sf-avatar--background-color);
    font-size: var(--sf-avatar--font-size);
    line-height: var(--sf-avatar--line-height);
    white-space: nowrap;
    border-color: transparent;
    border-color: var(--sf-avatar--border-color, var(--sf-avatar-border-color, transparent));
    border-width: 0;
    border-width: var(--sf-avatar--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-avatar--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-avatar--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-avatar--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-avatar--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-avatar--border-style, solid);
    box-shadow: var(--sf-avatar--box-shadow);
    --sf-avatar--background-color: var(--sf-avatar-background-color, transparent);
    --sf-avatar--border-top-width: var(--sf-avatar-border-width, var(--sf-px));
    --sf-avatar--border-bottom-width: var(--sf-avatar-border-width, var(--sf-px));
    --sf-avatar--border-inline-start-width: var(--sf-avatar-border-width, var(--sf-px));
    --sf-avatar--border-inline-end-width: var(--sf-avatar-border-width, var(--sf-px));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-bottom-right-radius: var(--sf-avatar-badge--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-bottom-right-radius: var(--sf-avatar-badge--border-end-end-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-avatar-badge--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-bottom-left-radius: var(--sf-avatar-badge--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-bottom-left-radius: var(--sf-avatar-badge--border-end-end-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-avatar-badge--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-bottom-left-radius: var(--sf-avatar-badge--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-bottom-left-radius: var(--sf-avatar-badge--border-end-start-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-avatar-badge--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-bottom-right-radius: var(--sf-avatar-badge--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-bottom-right-radius: var(--sf-avatar-badge--border-end-start-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-avatar-badge--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-top-right-radius: var(--sf-avatar-badge--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-top-right-radius: var(--sf-avatar-badge--border-start-end-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-avatar-badge--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-top-left-radius: var(--sf-avatar-badge--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-top-left-radius: var(--sf-avatar-badge--border-start-end-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-avatar-badge--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-top-left-radius: var(--sf-avatar-badge--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-avatar .sf-avatar-badge {
    border-top-left-radius: var(--sf-avatar-badge--border-start-start-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-avatar-badge--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-top-right-radius: var(--sf-avatar-badge--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-avatar .sf-avatar-badge {
    border-top-right-radius: var(--sf-avatar-badge--border-start-start-radius);
    }
  }
  .sf-avatar .sf-avatar-badge:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-avatar-badge--border-start-start-radius);
  }
  .sf-avatar .sf-avatar-badge {
    border: 0 solid;
    border: var(--sf-avatar-badge--border, 0 solid);
    border-color: transparent;
    border-color: var(--sf-avatar-badge--border-color, transparent);
    border-end-end-radius: var(--sf-avatar-badge--border-end-end-radius);
    border-end-start-radius: var(--sf-avatar-badge--border-end-start-radius);
    border-start-end-radius: var(--sf-avatar-badge--border-start-end-radius);
    border-start-start-radius: var(--sf-avatar-badge--border-start-start-radius);
    border-style: solid;
    border-style: var(--sf-avatar-badge--border-style, solid);
    border-width: 0;
    border-width: var(--sf-avatar-badge--border-width, 0);
  }
  .sf-avatar .sf-icon {
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-avatar .sf-online-indicator {
    background-color: var(--sf-online-indicator--background-color);
  }
  .sf-avatar .sf-avatar-badge.sf-avatar-badge--company {
    --sf-avatar-badge--border: var(--sf-px) solid;
    --sf-avatar-badge--border-end-end-radius: var(--sf-radius-circle);
    --sf-avatar-badge--border-end-start-radius: var(--sf-radius-circle);
    --sf-avatar-badge--border-start-end-radius: var(--sf-radius-circle);
    --sf-avatar-badge--border-start-start-radius: var(--sf-radius-circle);
    --sf-avatar-badge--border-style: solid;
    --sf-avatar-badge--border-width: var(--sf-px);
    --sf-avatar-badge--border-color: var(--sf-surface-0);
  }
  .sf-avatar.sf-avatar--size-2 .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-4);
    --sf-icon--height: var(--sf-icon-size-4);
    --sf-icon--width: var(--sf-icon-size-4);
  }
  .sf-avatar.sf-avatar--size-3 .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-5);
    --sf-icon--height: var(--sf-icon-size-5);
    --sf-icon--width: var(--sf-icon-size-5);
  }
  .sf-avatar.sf-avatar--size-1\/2 .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-2);
    --sf-icon--height: var(--sf-icon-size-2);
    --sf-icon--width: var(--sf-icon-size-2);
  }
  .sf-avatar.sf-avatar--size-1\/3 .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-1);
    --sf-icon--height: var(--sf-icon-size-1);
    --sf-icon--width: var(--sf-icon-size-1);
  }
  .sf-avatar.sf-avatar--size-1\/4 .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-1\/3);
    --sf-icon--height: var(--sf-icon-size-1\/3);
    --sf-icon--width: var(--sf-icon-size-1\/3);
  }
  .sf-avatar--size-1 {
    --sf-avatar--font-size: var(--sf-text-size-1);
    --sf-avatar--height: var(--sf-ui-1--control-height);
    --sf-avatar--line-height: var(--sf-text-height-1);
    --sf-avatar--width: var(--sf-ui-1--control-height);
  }
  .sf-avatar--size-2 {
    --sf-avatar--font-size: var(--sf-text-size-2);
    --sf-avatar--height: var(--sf-ui-2--control-height);
    --sf-avatar--line-height: var(--sf-text-height-2);
    --sf-avatar--width: var(--sf-ui-2--control-height);
  }
  .sf-avatar--size-3 {
    --sf-avatar--font-size: var(--sf-text-size-3);
    --sf-avatar--height: var(--sf-ui-3--control-height);
    --sf-avatar--line-height: var(--sf-text-height-3);
    --sf-avatar--width: var(--sf-ui-3--control-height);
  }
  .sf-avatar--size-1\/2 {
    --sf-avatar--font-size: var(--sf-text-size-1\/2);
    --sf-avatar--height: var(--sf-ui-1\/2--control-height);
    --sf-avatar--line-height: var(--sf-text-height-1\/2);
    --sf-avatar--width: var(--sf-ui-1\/2--control-height);
  }
  .sf-avatar--size-1\/3 {
    --sf-avatar--font-size: var(--sf-text-size-1\/3);
    --sf-avatar--height: var(--sf-ui-1\/3--control-height);
    --sf-avatar--line-height: var(--sf-text-height-1\/3);
    --sf-avatar--width: var(--sf-ui-1\/3--control-height);
  }
  .sf-avatar--size-1\/4 {
    --sf-avatar--font-size: var(--sf-text-size-1\/4);
    --sf-avatar--height: var(--sf-text-height-1\/2);
    --sf-avatar--line-height: var(--sf-text-height-1\/4);
    --sf-avatar--width: var(--sf-text-height-1\/2);
  }
  .sf-avatar--placeholder, .sf-avatar--text {
    --sf-avatar--background-color: var(--sf-avatar-background-color, var(--sf-surface-container));
  }
  .sf-avatar--square {
    --sf-avatar--border-bottom-right-radius: var(--sf-avatar-radius, var(--sf-radius--ui));
    --sf-avatar--border-bottom-left-radius: var(--sf-avatar-radius, var(--sf-radius--ui));
    --sf-avatar--border-top-right-radius: var(--sf-avatar-radius, var(--sf-radius--ui));
    --sf-avatar--border-top-left-radius: var(--sf-avatar-radius, var(--sf-radius--ui));
  }
  .sf-avatar-image {
    width: 100%;
    inline-size: 100%;
    height: 100%;
    block-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: inherit;
  }
}
@layer sf.states {
  button.sf-avatar:not(:disabled):not(.disabled):hover .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  a.sf-avatar:not(:disabled):not(.disabled):hover .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  button.sf-avatar.focus-visible:not(:disabled):not(.disabled) .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  a.sf-avatar.focus-visible:not(:disabled):not(.disabled) .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  button.sf-avatar:not(:disabled):not(.disabled):hover .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  a.sf-avatar:not(:disabled):not(.disabled):hover .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  button.sf-avatar:not(:disabled):not(.disabled).focus-visible .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  button.sf-avatar:not(:disabled):not(.disabled):focus-visible .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  a.sf-avatar:not(:disabled):not(.disabled).focus-visible .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  a.sf-avatar:not(:disabled):not(.disabled):focus-visible .sf-online-indicator.sf-online-indicator--online {
    --sf-online-indicator--background-color: var(--sf-success);
  }
  button.sf-avatar:not(:disabled):not(.disabled):hover {
    --sf-avatar--border-color: var(--sf-primary-hover);
    --sf-avatar--border-style: solid;
    --sf-avatar--border-width: var(--sf-px);
  }
  a.sf-avatar:not(:disabled):not(.disabled):hover {
    --sf-avatar--border-color: var(--sf-primary-hover);
    --sf-avatar--border-style: solid;
    --sf-avatar--border-width: var(--sf-px);
  }
  button.sf-avatar.focus-visible:not(:disabled):not(.disabled) {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  a.sf-avatar.focus-visible:not(:disabled):not(.disabled) {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  button.sf-avatar:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  button.sf-avatar:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  a.sf-avatar:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  a.sf-avatar:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
}
@layer sf.components {
  /* An avatar beside a label takes the label's line of a form size, the way an
     icon does, and its initials half of it. Its own sizes are control heights. */
  .sf-avatar.sf-avatar--line-1\/2 {
    --sf-avatar--height: var(--sf-text-height-1\/2);
    --sf-avatar--width: var(--sf-text-height-1\/2);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1\/2) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1\/2);
  }
  .sf-avatar.sf-avatar--line-1 {
    --sf-avatar--height: var(--sf-text-height-1);
    --sf-avatar--width: var(--sf-text-height-1);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1);
  }
  .sf-avatar.sf-avatar--line-2 {
    --sf-avatar--height: var(--sf-text-height-2);
    --sf-avatar--width: var(--sf-text-height-2);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-2) / 2));
    --sf-avatar--line-height: var(--sf-text-height-2);
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-avatar-label-group {
    background-color: transparent;
    background-color: var(--sf-avatar-label-group--background-color, transparent);
    gap: var(--sf-avatar-label-group--gap);
  }
  /* 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) */
  .sf-avatar-label-group .sf-avatar-label-group-container {
    background-color: transparent;
    background-color: var(--sf-avatar-label-group-container--background-color, transparent);
  }
  .sf-avatar-label-group .sf-avatar-label-group-title {
    color: var(--sf-on-surface);
    color: var(--sf-avatar-label-group-title--color, var(--sf-on-surface));
    font-family: var(--sf-text--family);
    font-family: var(--sf-avatar-label-group-title--font-family, var(--sf-text--family));
    font-size: var(--sf-avatar-label-group-title--font-size);
    font-weight: var(--sf-font-weight-medium);
    font-weight: var(--sf-avatar-label-group-title--font-weight, var(--sf-font-weight-medium));
    line-height: var(--sf-avatar-label-group-title--line-height);
  }
  .sf-avatar-label-group .sf-avatar-label-group-text {
    color: var(--sf-on-surface-variant);
    color: var(--sf-avatar-label-group-text--color, var(--sf-on-surface-variant));
    font-family: var(--sf-text--family);
    font-family: var(--sf-avatar-label-group-text--font-family, var(--sf-text--family));
    font-size: var(--sf-avatar-label-group-text--font-size);
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-avatar-label-group-text--font-weight, var(--sf-font-weight-regular));
    line-height: var(--sf-avatar-label-group-text--line-height);
  }
  .sf-avatar-label-group--size-1 .sf-avatar-label-group-title {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-1);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-1);
  }
  .sf-avatar-label-group.sf-avatar-label-group--size-2.sf-avatar-label-group--status-icon-company .sf-avatar-label-group-text, .sf-avatar-label-group--size-1 .sf-avatar-label-group-text {
    --sf-avatar-label-group-text--font-size: var(--sf-text-size-1);
    --sf-avatar-label-group-text--line-height: var(--sf-text-height-1);
  }
  .sf-avatar-label-group--size-2 .sf-avatar-label-group-title {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-2);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-2);
  }
  .sf-avatar-label-group.sf-avatar-label-group--size-2 .sf-avatar-label-group-text {
    --sf-avatar-label-group-text--font-size: var(--sf-text-size-2);
    --sf-avatar-label-group-text--line-height: var(--sf-text-height-2);
  }
  .sf-avatar-label-group--size-3 .sf-avatar-label-group-title {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-3);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-3);
  }
  .sf-avatar-label-group--size-3 .sf-avatar-label-group-text {
    --sf-avatar-label-group-text--font-size: var(--sf-text-size-3);
    --sf-avatar-label-group-text--line-height: var(--sf-text-height-3);
  }
  .sf-avatar-label-group--size-1\/2 .sf-avatar-label-group-title {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-1\/2);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-1\/2);
  }
  .sf-avatar-label-group--size-1\/2 .sf-avatar-label-group-text {
    --sf-avatar-label-group-text--font-size: var(--sf-text-size-1\/2);
    --sf-avatar-label-group-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-avatar-label-group--size-1\/3 .sf-avatar-label-group-title,
  .sf-avatar-label-group--size-1\/3 .sf-avatar-label-group-text {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-1\/3);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-1\/3);
    --sf-avatar-label-group-text--font-size: var(--sf-text-size-1\/3);
    --sf-avatar-label-group-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-avatar-label-group--size-1\/4 .sf-avatar-label-group-title,
  .sf-avatar-label-group--size-1\/4 .sf-avatar-label-group-text {
    --sf-avatar-label-group-title--font-size: var(--sf-text-size-1\/4);
    --sf-avatar-label-group-title--line-height: var(--sf-text-height-1\/4);
    --sf-avatar-label-group-text--font-size: var(--sf-text-size-1\/4);
    --sf-avatar-label-group-text--line-height: var(--sf-text-height-1\/4);
  }
  .sf-avatar-label-group--size-1, .sf-avatar-label-group--size-2 {
    --sf-avatar-label-group--gap: var(--sf-space-1\/2);
  }
  .sf-avatar-label-group--size-3 {
    --sf-avatar-label-group--gap: var(--sf-space-1);
  }
  .sf-avatar-label-group--size-1\/2 {
    --sf-avatar-label-group--gap: var(--sf-space-1\/3);
  }
  .sf-avatar-label-group--size-1\/3,
  .sf-avatar-label-group--size-1\/4 {
    --sf-avatar-label-group--gap: var(--sf-space-1\/4);
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-avatar-group {
    gap: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + * {
    margin-left: calc(var(--sf-space-1\/4) * -1);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + * {
    margin-left: calc(var(--sf-space-1\/4) * -1);
    }
  }
  .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + *:where(:dir(ltr)) {
    margin-left: calc(var(--sf-space-1\/4) * -1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + * {
    margin-right: calc(var(--sf-space-1\/4) * -1);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + * {
    margin-right: calc(var(--sf-space-1\/4) * -1);
    }
  }
  .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + *:where(:dir(rtl)) {
    margin-right: calc(var(--sf-space-1\/4) * -1);
  }
  .sf-avatar-group.sf-avatar-group--size-xs .sf-avatar-group-avatars > * + * {
    -webkit-margin-start: calc(var(--sf-space-1\/4) * -1);
            margin-inline-start: calc(var(--sf-space-1\/4) * -1);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not(:focus-within):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(:focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not(:focus-within):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(.focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(:focus-visible):not([focus-within]):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  .sf-avatar-group .sf-avatar:not(:hover):not(:active):not(:focus):not(:focus-visible):not(:focus-within):not(:disabled):not(:visited):not(:checked):not(:indeterminate) {
    border: var(--sf-px) solid;
    border-color: transparent;
    border-color: var(--sf-white, transparent);
    border-style: solid;
    border-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + * {
    margin-left: calc(var(--sf-space-1\/3) * -1);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + * {
    margin-left: calc(var(--sf-space-1\/3) * -1);
    }
  }
  .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + *:where(:dir(ltr)) {
    margin-left: calc(var(--sf-space-1\/3) * -1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + * {
    margin-right: calc(var(--sf-space-1\/3) * -1);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + * {
    margin-right: calc(var(--sf-space-1\/3) * -1);
    }
  }
  .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + *:where(:dir(rtl)) {
    margin-right: calc(var(--sf-space-1\/3) * -1);
  }
  .sf-avatar-group.sf-avatar-group--size-sm .sf-avatar-group-avatars > * + * {
    -webkit-margin-start: calc(var(--sf-space-1\/3) * -1);
            margin-inline-start: calc(var(--sf-space-1\/3) * -1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + * {
    margin-left: calc(var(--sf-space-1\/2) * -1);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + * {
    margin-left: calc(var(--sf-space-1\/2) * -1);
    }
  }
  .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + *:where(:dir(ltr)) {
    margin-left: calc(var(--sf-space-1\/2) * -1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + * {
    margin-right: calc(var(--sf-space-1\/2) * -1);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + * {
    margin-right: calc(var(--sf-space-1\/2) * -1);
    }
  }
  .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + *:where(:dir(rtl)) {
    margin-right: calc(var(--sf-space-1\/2) * -1);
  }
  .sf-avatar-group.sf-avatar-group--size-md .sf-avatar-group-avatars > * + * {
    -webkit-margin-start: calc(var(--sf-space-1\/2) * -1);
            margin-inline-start: calc(var(--sf-space-1\/2) * -1);
  }
}

/* docara-shell-source: runtime/component/tags/css/tags.css */
@charset "UTF-8";
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-a1) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-tag{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-tag{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-tag{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-tag{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-tag{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(ltr)){
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-tag{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(rtl)){
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-tag{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(ltr)){
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-tag{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    }
  }
  .sf-tag:where(:dir(rtl)){
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag{
    padding-left: var(--sf-tag--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-tag{
    padding-left: var(--sf-tag--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
    }
  }
  .sf-tag:where(:dir(ltr)){
    padding-left: var(--sf-tag--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag{
    padding-right: var(--sf-tag--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-tag{
    padding-right: var(--sf-tag--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
    }
  }
  .sf-tag:where(:dir(rtl)){
    padding-right: var(--sf-tag--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag{
    padding-right: var(--sf-tag--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-tag{
    padding-right: var(--sf-tag--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
    }
  }
  .sf-tag:where(:dir(ltr)){
    padding-right: var(--sf-tag--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag{
    padding-left: var(--sf-tag--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-tag{
    padding-left: var(--sf-tag--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
    }
  }
  .sf-tag:where(:dir(rtl)){
    padding-left: var(--sf-tag--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
  }
  .sf-tag {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where a
       resting look is defined -- base, size, spacing, type, appearance -- and
       not by hover, pressed, selected or disabled, so states still show. An
       inline tag keeps the insets its host gives it. */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 0;
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-tag--border-bottom-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-tag--border-bottom-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-tag--border-top-right-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-tag--border-top-left-radius, var(--sf-tag-radius, var(--sf-radius--ui)));
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    gap: var(--sf-a1);
    gap: var(--sf-tag--gap, var(--sf-tag-gap, var(--sf-a1)));
    -webkit-padding-start: var(--sf-tag--padding-inline-start);
            padding-inline-start: var(--sf-tag--padding-inline-start);
    -webkit-padding-start: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
            padding-inline-start: var(--sf-tag--inline-start, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-start)));
    padding-top: var(--sf-tag--padding-top);
    padding-top: var(--sf-tag--block, var(--sf-tag-padding-block, var(--sf-tag--padding-top)));
    -webkit-padding-end: var(--sf-tag--padding-inline-end);
            padding-inline-end: var(--sf-tag--padding-inline-end);
    -webkit-padding-end: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
            padding-inline-end: var(--sf-tag--inline-end, var(--sf-tag-padding-inline, var(--sf-tag--padding-inline-end)));
    padding-bottom: var(--sf-tag--padding-bottom);
    padding-bottom: var(--sf-tag--block, var(--sf-tag-padding-block, var(--sf-tag--padding-bottom)));
    background-color: var(--sf-tag--background-color);
    box-shadow: var(--sf-tag--box-shadow);
    margin: 0;
    max-width: 100%;
    max-inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    transition: background-color var(--sf-duration-fast) var(--sf-animation), color var(--sf-duration-fast) var(--sf-animation), box-shadow var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-tag--interactive {
    cursor: pointer;
  }
  .sf-tag .sf-tag-check {
    align-items: center;
    height: var(--sf-icon-size-1);
    block-size: var(--sf-icon-size-1);
    border: var(--sf-px) solid var(--sf-outline);
    border-radius: var(--sf-radius--ui);
    color: var(--sf-on-primary-container);
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--sf-icon-size-1);
    inline-size: var(--sf-icon-size-1);
    justify-content: center;
  }
  .sf-tag .sf-tag-check::before {
    content: "✓";
    font-size: var(--sf-text-size-1\/2);
    line-height: var(--sf-text-height-1\/2);
    opacity: 0;
  }
  .sf-tag.active .sf-tag-check {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
  }
  .sf-tag.active .sf-tag-check::before {
    opacity: 1;
  }
  .sf-tag .sf-avatar {
    height: var(--sf-avatar--height);
    opacity: var(--sf-avatar--opacity);
    width: var(--sf-avatar--width);
  }
  .sf-tag .sf-close-icon {
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
  }
  .sf-tag .sf-dot-item {
    background-color: var(--sf-dot-item--background-color);
  }
  .sf-tag .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon--font-size);
    height: var(--sf-icon--height);
    width: var(--sf-icon--width);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag .sf-icon-button{
    padding-right: var(--sf-icon-button--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-tag .sf-icon-button{
    padding-right: var(--sf-icon-button--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
    }
  }
  .sf-tag .sf-icon-button:where(:dir(ltr)){
    padding-right: var(--sf-icon-button--padding-inline-end);
    padding-right: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag .sf-icon-button{
    padding-left: var(--sf-icon-button--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-tag .sf-icon-button{
    padding-left: var(--sf-icon-button--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
    }
  }
  .sf-tag .sf-icon-button:where(:dir(rtl)){
    padding-left: var(--sf-icon-button--padding-inline-end);
    padding-left: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag .sf-icon-button{
    padding-left: var(--sf-icon-button--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-tag .sf-icon-button{
    padding-left: var(--sf-icon-button--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
    }
  }
  .sf-tag .sf-icon-button:where(:dir(ltr)){
    padding-left: var(--sf-icon-button--padding-inline-start);
    padding-left: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag .sf-icon-button{
    padding-right: var(--sf-icon-button--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-tag .sf-icon-button{
    padding-right: var(--sf-icon-button--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
    }
  }
  .sf-tag .sf-icon-button:where(:dir(rtl)){
    padding-right: var(--sf-icon-button--padding-inline-start);
    padding-right: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
  }
  .sf-tag .sf-icon-button {
    padding-bottom: var(--sf-icon-button--padding-bottom);
    -webkit-padding-end: var(--sf-icon-button--padding-inline-end);
            padding-inline-end: var(--sf-icon-button--padding-inline-end);
    -webkit-padding-end: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
            padding-inline-end: var(--sf-tag--inline-end, var(--sf-icon-button--padding-inline-end));
    -webkit-padding-start: var(--sf-icon-button--padding-inline-start);
            padding-inline-start: var(--sf-icon-button--padding-inline-start);
    -webkit-padding-start: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
            padding-inline-start: var(--sf-tag--inline-start, var(--sf-icon-button--padding-inline-start));
    padding-top: var(--sf-icon-button--padding-top);
    padding-top: var(--sf-tag--block, var(--sf-icon-button--padding-top));
  }
  .sf-tag .sf-tag-color-icon {
    border-radius: var(--sf-tag-color-icon--border-radius);
    height: var(--sf-tag-color-icon--height);
    opacity: var(--sf-tag-color-icon--opacity);
    width: var(--sf-tag-color-icon--width);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag .sf-tag-container{
    padding-right: var(--sf-tag-container--padding-inline-end);
    padding-right: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-tag .sf-tag-container{
    padding-right: var(--sf-tag-container--padding-inline-end);
    padding-right: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
    }
  }
  .sf-tag .sf-tag-container:where(:dir(ltr)){
    padding-right: var(--sf-tag-container--padding-inline-end);
    padding-right: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag .sf-tag-container{
    padding-left: var(--sf-tag-container--padding-inline-end);
    padding-left: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-tag .sf-tag-container{
    padding-left: var(--sf-tag-container--padding-inline-end);
    padding-left: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
    }
  }
  .sf-tag .sf-tag-container:where(:dir(rtl)){
    padding-left: var(--sf-tag-container--padding-inline-end);
    padding-left: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag .sf-tag-container{
    padding-left: var(--sf-tag-container--padding-inline-start);
    padding-left: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-tag .sf-tag-container{
    padding-left: var(--sf-tag-container--padding-inline-start);
    padding-left: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
    }
  }
  .sf-tag .sf-tag-container:where(:dir(ltr)){
    padding-left: var(--sf-tag-container--padding-inline-start);
    padding-left: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag .sf-tag-container{
    padding-right: var(--sf-tag-container--padding-inline-start);
    padding-right: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-tag .sf-tag-container{
    padding-right: var(--sf-tag-container--padding-inline-start);
    padding-right: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
    }
  }
  .sf-tag .sf-tag-container:where(:dir(rtl)){
    padding-right: var(--sf-tag-container--padding-inline-start);
    padding-right: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
  }
  .sf-tag .sf-tag-container {
    --sf-tag-container--background-color: transparent;
    background-color: var(--sf-tag-container--background-color);
    color: var(--sf-tag-container--color);
    font-family: var(--sf-tag-container--font-family);
    font-size: var(--sf-tag-container--font-size);
    font-size: var(--sf-tag--font-size, var(--sf-tag-container--font-size));
    font-weight: var(--sf-tag-container--font-weight);
    line-height: var(--sf-tag-container--line-height);
    line-height: var(--sf-tag--inline-line, var(--sf-tag--line-height, var(--sf-tag-container--line-height)));
    -webkit-padding-end: var(--sf-tag-container--padding-inline-end);
            padding-inline-end: var(--sf-tag-container--padding-inline-end);
    -webkit-padding-end: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
            padding-inline-end: var(--sf-tag--label-end, var(--sf-tag-container--padding-inline-end));
    -webkit-padding-start: var(--sf-tag-container--padding-inline-start);
            padding-inline-start: var(--sf-tag-container--padding-inline-start);
    -webkit-padding-start: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
            padding-inline-start: var(--sf-tag--label-start, var(--sf-tag-container--padding-inline-start));
    min-width: 0;
    min-inline-size: 0;
    word-wrap: anywhere;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tag .sf-tag-count{
    padding-right: var(--sf-tag-count--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-tag .sf-tag-count{
    padding-right: var(--sf-tag-count--padding-inline-end);
    }
  }
  .sf-tag .sf-tag-count:where(:dir(ltr)){
    padding-right: var(--sf-tag-count--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tag .sf-tag-count{
    padding-left: var(--sf-tag-count--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-tag .sf-tag-count{
    padding-left: var(--sf-tag-count--padding-inline-end);
    }
  }
  .sf-tag .sf-tag-count:where(:dir(rtl)){
    padding-left: var(--sf-tag-count--padding-inline-end);
  }
  .sf-tag .sf-tag-count {
    background-color: var(--sf-tag-count--background-color);
    color: var(--sf-tag-count--color);
    font-family: var(--sf-tag-count--font-family);
    font-size: var(--sf-tag-count--font-size);
    font-weight: var(--sf-tag-count--font-weight);
    line-height: var(--sf-tag-count--line-height);
    -webkit-padding-end: var(--sf-tag-count--padding-inline-end);
            padding-inline-end: var(--sf-tag-count--padding-inline-end);
  }
  .sf-tag.sf-tag--size-1.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag .sf-icon-button.sf-icon-button--link.sf-icon-button--close {
    --sf-icon-button--padding-bottom: var(--sf-space-1\/4);
    --sf-icon-button--padding-inline-end: var(--sf-space-1\/4);
    --sf-icon-button--padding-inline-start: var(--sf-space-1\/4);
    --sf-icon-button--padding-top: var(--sf-space-1\/4);
  }
  .sf-tag.sf-tag--size-1 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1);
    --sf-tag-color-icon--width: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1);
    --sf-tag-color-icon--width: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1);
    --sf-tag-color-icon--width: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--color .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--color .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--success .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--success .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--success .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--error .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--error .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--error .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--warning .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--warning .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--warning .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1);
    --sf-tag-container--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-family: var(--sf-text--family);
    --sf-tag-container--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--color .sf-tag-container, .sf-tag.sf-tag--checkbox .sf-tag-container, .sf-tag.sf-tag--icon .sf-tag-container, .sf-tag.sf-tag--default .sf-tag-container, .sf-tag.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--color: var(--sf-tag-color, var(--sf-on-surface));
  }
  .sf-tag.sf-tag--size-1.sf-tag--success {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-success-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--success {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-success-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--success {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-success-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--success .sf-dot-item {
    --sf-dot-item--background-color: var(--sf-success);
  }
  .sf-tag.sf-tag--success .sf-tag-container {
    --sf-tag-container--color: var(--sf-tag-color, var(--sf-success));
  }
  .sf-tag.sf-tag--size-1.sf-tag--error {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-error-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--error {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-error-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--error {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-error-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--error .sf-dot-item {
    --sf-dot-item--background-color: var(--sf-error);
  }
  .sf-tag.sf-tag--error .sf-tag-container {
    --sf-tag-container--color: var(--sf-tag-color, var(--sf-error));
  }
  .sf-tag.sf-tag--size-1.sf-tag--warning {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-warning-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--warning {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-warning-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--warning {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-warning-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--warning .sf-dot-item {
    --sf-dot-item--background-color: var(--sf-warning);
  }
  .sf-tag.sf-tag--warning .sf-tag-container {
    --sf-tag-container--color: var(--sf-tag-color, var(--sf-warning));
  }
  .sf-tag.sf-tag--size-1.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-3);
    --sf-icon--height: var(--sf-icon-size-3);
    --sf-icon--width: var(--sf-icon-size-3);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-3);
    --sf-icon--height: var(--sf-icon-size-3);
    --sf-icon--width: var(--sf-icon-size-3);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-3);
    --sf-icon--height: var(--sf-icon-size-3);
    --sf-icon--width: var(--sf-icon-size-3);
  }
  .sf-tag.sf-tag--icon .sf-icon {
    /* --sf-outline is the role of a boundary. A glyph is read, not drawn round
       something, so it takes the paler of the two roles for what stands on a
       surface: 6.47:1 light and 5.95:1 dark, against 4.47 and 5.95. */
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--space-x);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-tag.sf-tag--size-1 .sf-tag-count {
    --sf-tag-count--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-2 .sf-tag-count {
    --sf-tag-count--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-3 .sf-tag-count {
    --sf-tag-count--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1);
    --sf-tag-count--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1);
    --sf-tag-count--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1);
    --sf-tag-count--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-family: var(--sf-text--family);
    --sf-tag-count--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-family: var(--sf-text--family);
    --sf-tag-count--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-family: var(--sf-text--family);
    --sf-tag-count--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-family: var(--sf-text--family);
    --sf-tag-count--font-weight: var(--sf-font-weight-regular);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-family: var(--sf-text--family);
    --sf-tag-count--font-weight: var(--sf-font-weight-regular);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-tag.sf-tag--default .sf-tag-count {
    --sf-tag-count--color: var(--sf-tag-color, var(--sf-on-surface));
    --sf-tag-count--background-color: transparent;
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--success {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-success-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--success {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-success-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--success .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--success .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--error .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--error .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--warning .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--warning .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--color .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--color .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--success .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--error .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--warning .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--color .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--checkbox .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar .sf-tag-container {
    --sf-tag-container--font-size: var(--sf-text-size-1\/2);
    --sf-tag-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--error {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-error-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--error {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-error-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--warning {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-warning-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--warning {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-warning-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-surface-container));
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1\/2);
    --sf-tag-color-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1\/2);
    --sf-tag-color-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-2);
    --sf-icon--height: var(--sf-icon-size-2);
    --sf-icon--width: var(--sf-icon-size-2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-2);
    --sf-icon--height: var(--sf-icon-size-2);
    --sf-icon--width: var(--sf-icon-size-2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/4);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default .sf-tag-container {
    --sf-tag-container--padding-inline-end: var(--sf-space-1\/4);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-tag.sf-tag--size-1\/2 .sf-tag-count {
    --sf-tag-count--padding-inline-end: var(--sf-space-1\/4);
  }
  .sf-tag.sf-tag--size-1\/3 .sf-tag-count {
    --sf-tag-count--padding-inline-end: var(--sf-space-1\/4);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1\/2);
    --sf-tag-count--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1\/2);
    --sf-tag-count--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1\/2);
    --sf-avatar--width: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1\/2);
    --sf-avatar--width: var(--sf-text-height-1\/2);
  }
  .sf-tag--size-1 {
    --sf-tag--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag--size-2 {
    --sf-tag--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag--size-3 {
    --sf-tag--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-tag--padding-inline-start: var(--sf-ui-1--space-x);
  }
  .sf-tag.sf-tag--size-1 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-tag--padding-inline-start);
  }
  .sf-tag.sf-tag--size-2 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-tag--padding-inline-start);
  }
  .sf-tag.sf-tag--size-3 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-tag--padding-inline-start);
  }
  .sf-tag--size-1\/2 {
    --sf-tag--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-tag--padding-inline-start: var(--sf-ui-1\/2--space-x);
  }
  .sf-tag--size-1\/3 {
    --sf-tag--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-tag--padding-inline-start: var(--sf-ui-1\/2--space-x);
  }
  .sf-tag.sf-tag--size-1\/2 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--color .sf-tag-color-icon {
    --sf-tag-color-icon--border-radius: var(--sf-radius-circle);
  }
  /* Surface and ghost, built on the neutral alpha ramp. On a tag the appearance
     is a separate axis from `type`, because a tag's type says what it carries —
     an icon, an avatar, a checkbox — or what it reports — success, error,
     warning. Only the neutral types take an appearance: a status tag carries its
     meaning in its colour, and draining that colour would drain the meaning.

     The boundary is an inset shadow rather than a border, because the tag is
     built with `border: 0` and a real border would make every tag two pixels
     taller than the one beside it. */
  .sf-tag.sf-tag--appearance-surface.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-alpha-4));
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-8);
  }
  .sf-tag.sf-tag--appearance-surface.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-alpha-4));
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-8);
  }
  .sf-tag.sf-tag--appearance-surface.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-alpha-4));
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-8);
  }
  .sf-tag.sf-tag--appearance-surface.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-alpha-4));
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-8);
  }
  .sf-tag.sf-tag--appearance-surface.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, var(--sf-alpha-4));
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-8);
  }
  .sf-tag.sf-tag--appearance-ghost.sf-tag--color {
    --sf-tag--background-color: var(--sf-tag-background-color, transparent);
  }
  .sf-tag.sf-tag--appearance-ghost.sf-tag--icon {
    --sf-tag--background-color: var(--sf-tag-background-color, transparent);
  }
  .sf-tag.sf-tag--appearance-ghost.sf-tag--default {
    --sf-tag--background-color: var(--sf-tag-background-color, transparent);
  }
  .sf-tag.sf-tag--appearance-ghost.sf-tag--avatar {
    --sf-tag--background-color: var(--sf-tag-background-color, transparent);
  }
  .sf-tag.sf-tag--appearance-ghost.sf-tag--checkbox {
    --sf-tag--background-color: var(--sf-tag-background-color, transparent);
  }
}
@layer sf.states {
  .sf-tag.sf-tag--interactive.sf-tag--success:not(:disabled):not(.disabled):hover {
    --sf-tag--background-color: var(--sf-success-container-hover);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--success:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--success:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--success:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--success.active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--success.active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--success.active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--success.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--success.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--success.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--error.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--error.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--error.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--warning.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--warning.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--warning.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--color.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--color.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--color.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--avatar.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--avatar.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--avatar.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--checkbox.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--checkbox.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.disabled .sf-dot-item {
    --sf-dot-item--background-color: var(--sf-disable);
  }
  .sf-tag.sf-tag--success.disabled .sf-tag-container, .sf-tag.sf-tag--error.disabled .sf-tag-container, .sf-tag.sf-tag--warning.disabled .sf-tag-container, .sf-tag.sf-tag--color.disabled .sf-tag-container, .sf-tag.sf-tag--checkbox.disabled .sf-tag-container, .sf-tag.sf-tag--icon.disabled .sf-tag-container, .sf-tag.sf-tag--default.disabled .sf-tag-container, .sf-tag.sf-tag--avatar.disabled .sf-tag-container {
    --sf-tag-container--color: var(--sf-on-disable);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--error:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--error:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--error:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--error.active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--error.active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--error.active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--error:not(:disabled):not(.disabled):hover {
    --sf-tag--background-color: var(--sf-error-container-hover);
  }
  .sf-tag.sf-tag--interactive.sf-tag--warning:not(:disabled):not(.disabled):hover {
    --sf-tag--background-color: var(--sf-warning-container-hover);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--warning:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--warning:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--warning:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--warning.active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--warning.active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--warning.active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--color:not(:disabled):not(.disabled):hover, .sf-tag.sf-tag--interactive.sf-tag--checkbox:not(:disabled):not(.disabled):hover, .sf-tag.sf-tag--interactive.sf-tag--icon:not(:disabled):not(.disabled):hover, .sf-tag.sf-tag--interactive.sf-tag--default:not(:disabled):not(.disabled):hover, .sf-tag.sf-tag--interactive.sf-tag--avatar:not(:disabled):not(.disabled):hover {
    --sf-tag--background-color: var(--sf-surface-container-hover);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--color:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--color:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--color:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--icon:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--icon:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--icon:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--default:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--default:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--default:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--avatar:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--avatar:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--avatar:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--checkbox:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--checkbox:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--color.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--color.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--color.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--icon.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--icon.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--icon.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--default.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--default.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--default.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--avatar.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--avatar.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--avatar.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--checkbox.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--checkbox.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--color.disabled .sf-tag-color-icon {
    --sf-tag-color-icon--opacity: var(--sf-opacity-30);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1.sf-tag--checkbox:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-2.sf-tag--checkbox:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-3.sf-tag--checkbox:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--checkbox.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--checkbox.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--checkbox.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1.sf-tag--checkbox.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-2.sf-tag--checkbox.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-3.sf-tag--checkbox.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-tag.sf-tag--icon.disabled .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-tag.sf-tag--default.disabled .sf-tag-count {
    --sf-tag-count--color: var(--sf-on-disable);
  }
  .sf-tag.sf-tag--avatar.disabled .sf-avatar {
    --sf-avatar--opacity: var(--sf-opacity-30);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--success:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--success:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--success.active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--success.active {
    --sf-tag--background-color: var(--sf-success-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--success.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--success.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--error.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--error.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--warning.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--warning.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--color.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--color.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar.disabled {
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--error:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--error:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--error.active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--error.active {
    --sf-tag--background-color: var(--sf-error-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--warning:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--warning:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--warning.active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--warning.active {
    --sf-tag--background-color: var(--sf-warning-container-active);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--color:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--color:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--icon:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--icon:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--default:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--default:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/2.sf-tag--avatar:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--interactive.sf-tag--size-1\/3.sf-tag--avatar:not(:disabled):not(.disabled):active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--color.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--color.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--icon.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--icon.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--default.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--default.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/2.sf-tag--avatar.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag.sf-tag--size-1\/3.sf-tag--avatar.active {
    --sf-tag--background-color: var(--sf-primary-container);
    --sf-tag--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-tag--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-tag--interactive:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-tag--interactive:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* The remove action sits inside the tag, so its ring turns inwards and stays
     off the tag's own edge. */
  .sf-tag--removable > .sf-icon-button:not(:disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-tag--removable > .sf-icon-button:not(:disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-tag.disabled {
    --sf-tag--background-color: var(--sf-disable);
  }
  @media (forced-colors: active) {
    .sf-tag--interactive.focus-visible,
    .sf-tag--removable > .sf-icon-button.focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-tag--interactive:focus-visible,
    .sf-tag--removable > .sf-icon-button:focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-tag {
      transition: none;
    }
  }
  /* The states of the two ramp appearances: one step up on hover, with surface
     raising its boundary alongside. */
  .sf-tag.sf-tag--interactive.sf-tag--appearance-surface:not(:disabled):not(.disabled):hover,
  .sf-tag.sf-tag--interactive.sf-tag--appearance-ghost:not(:disabled):not(.disabled):hover {
    --sf-tag--background-color: var(--sf-alpha-8);
  }
  .sf-tag.sf-tag--interactive.sf-tag--appearance-surface:not(:disabled):not(.disabled):hover {
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-12);
  }
  /* Pressed and selected keep the primary container the tag already uses for
     both. That is the tag's own language — on a tag, pressing shows what being
     chosen looks like — and an appearance is not a reason to make one tag answer
     differently from the one beside it. So the ramp governs rest and hover here,
     not selection. */
  .sf-tag.sf-tag--appearance-surface:disabled {
    --sf-tag--background-color: transparent;
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-4);
  }
  .sf-tag.sf-tag--appearance-surface.disabled {
    --sf-tag--background-color: transparent;
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-4);
  }
  .sf-tag.sf-tag--appearance-ghost:disabled {
    --sf-tag--background-color: transparent;
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-4);
  }
  .sf-tag.sf-tag--appearance-ghost.disabled {
    --sf-tag--background-color: transparent;
    --sf-tag--box-shadow: inset 0 0 0 var(--sf-px) var(--sf-alpha-4);
  }
  /* Every size publishes its text on the root, so density, inline and an
     embedding component can read it. Sizes 1/3, 2 and 3 borrow the type, state
     and colour rules of 1/2 and 1 (aliased above) and set their own text and
     spacing here. */
  .sf-tag.sf-tag--size-1\/3 {
    --sf-tag--font-size: var(--sf-text-size-1\/3);
    --sf-tag--line-height: var(--sf-text-height-1\/3);
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-tag--inline-start: var(--sf-tag-padding-inline, var(--sf-ui-1\/3--space-x));
    --sf-tag--inline-end: var(--sf-tag-padding-inline, var(--sf-ui-1\/3--space-x));
  }
  .sf-tag.sf-tag--size-1\/3 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1\/3);
    --sf-tag-color-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2 {
    --sf-tag--font-size: var(--sf-text-size-1\/2);
    --sf-tag--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1 {
    --sf-tag--font-size: var(--sf-text-size-1);
    --sf-tag--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2 {
    --sf-tag--font-size: var(--sf-text-size-2);
    --sf-tag--line-height: var(--sf-text-height-2);
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-2--space-y-tightness-default));
    --sf-tag--inline-start: var(--sf-tag-padding-inline, var(--sf-ui-2--space-x));
    --sf-tag--inline-end: var(--sf-tag-padding-inline, var(--sf-ui-2--space-x));
  }
  .sf-tag.sf-tag--size-2 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-2);
    --sf-tag-color-icon--width: var(--sf-text-height-2);
  }
  .sf-tag.sf-tag--size-3 {
    --sf-tag--font-size: var(--sf-text-size-3);
    --sf-tag--line-height: var(--sf-text-height-3);
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-3--space-y-tightness-default));
    --sf-tag--inline-start: var(--sf-tag-padding-inline, var(--sf-ui-3--space-x));
    --sf-tag--inline-end: var(--sf-tag-padding-inline, var(--sf-ui-3--space-x));
  }
  .sf-tag.sf-tag--size-3 .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-3);
    --sf-tag-color-icon--width: var(--sf-text-height-3);
  }
  /* Density, with the names the buttons use: compact, comfortable and spacious
     move the block padding of each size one step each way. */
  .sf-tag.sf-tag--size-1\/3.spacing-compact {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-tag.sf-tag--size-1\/3.spacing-comfortable {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-tag.sf-tag--size-1\/3.spacing-spacious {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-tag.sf-tag--size-1\/2.spacing-compact {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-tag.sf-tag--size-1\/2.spacing-comfortable {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-tag.sf-tag--size-1\/2.spacing-spacious {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-tag.sf-tag--size-1.spacing-compact {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-tag.sf-tag--size-1.spacing-comfortable {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-tag.sf-tag--size-1.spacing-spacious {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-tag.sf-tag--size-2.spacing-compact {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-tag.sf-tag--size-2.spacing-comfortable {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-tag.sf-tag--size-2.spacing-spacious {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-tag.sf-tag--size-3.spacing-compact {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-tag.sf-tag--size-3.spacing-comfortable {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-tag.sf-tag--size-3.spacing-spacious {
    --sf-tag--block: var(--sf-tag-padding-block, var(--sf-ui-3--space-y-tightness-highest));
  }
  /* Inline: a tag that sits on the text line of another control -- a selected
     value in a dropdown, an input or a table cell. No block padding, one small
     inline step on each side, the label flush, and the remove button and its
     mark sized to the line. The line is the text line of the tag itself unless
     the host publishes --sf-tag--line (a dropdown passes its field line less
     the border). Doubled class: it has to outrank size and density, which set
     the same layer. */
  .sf-tag.sf-tag--inline.sf-tag--inline {
    --sf-tag--block: 0;
    --sf-tag--inline-start: var(--sf-space-1\/3);
    --sf-tag--inline-end: var(--sf-space-1\/4);
    --sf-tag--label-start: 0;
    --sf-tag--label-end: 0;
    --sf-tag--inline-line: var(--sf-tag--line);
    gap: var(--sf-space-1\/3);
    min-height: var(--sf-tag--line-height);
    min-block-size: var(--sf-tag--line-height);
    min-height: var(--sf-tag--line-height);
    min-height: var(--sf-tag--line, var(--sf-tag--line-height));
    min-block-size: var(--sf-tag--line, var(--sf-tag--line-height));
  }
  /* The short end step makes room for a remove button; without one the tag
     keeps the same step on both sides. */
  .sf-tag.sf-tag--inline.sf-tag--inline[\:not-has\(\%3E\%20.sf-icon-button\)] {
    --sf-tag--inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--inline.sf-tag--inline:not(:has(> .sf-icon-button)) {
    --sf-tag--inline-end: var(--sf-space-1\/3);
  }
  .sf-tag.sf-tag--inline.sf-tag--inline > .sf-icon-button {
    height: var(--sf-tag--line-height);
    block-size: var(--sf-tag--line-height);
    height: var(--sf-tag--line-height);
    height: var(--sf-tag--line, var(--sf-tag--line-height));
    block-size: var(--sf-tag--line, var(--sf-tag--line-height));
    width: var(--sf-tag--line-height);
    inline-size: var(--sf-tag--line-height);
    width: var(--sf-tag--line-height);
    width: var(--sf-tag--line, var(--sf-tag--line-height));
    inline-size: var(--sf-tag--line, var(--sf-tag--line-height));
    min-height: 0;
    min-block-size: 0;
    min-width: 0;
    min-inline-size: 0;
    padding: 0;
  }
  /* Inline and compact together: a chip that fills a control of its own size,
     with the compact block padding of its size and its own text line. */
  .sf-tag.sf-tag--inline.sf-tag--inline.sf-tag--size-1\/3.spacing-compact {
    --sf-tag--block: var(--sf-ui-1\/3--space-y-tightness-low);
  }
  .sf-tag.sf-tag--inline.sf-tag--inline.sf-tag--size-1\/2.spacing-compact {
    --sf-tag--block: var(--sf-ui-1\/2--space-y-tightness-low);
  }
  .sf-tag.sf-tag--inline.sf-tag--inline.sf-tag--size-1.spacing-compact {
    --sf-tag--block: var(--sf-ui-1--space-y-tightness-low);
  }
  .sf-tag.sf-tag--inline.sf-tag--inline.sf-tag--size-2.spacing-compact {
    --sf-tag--block: var(--sf-ui-2--space-y-tightness-low);
  }
  .sf-tag.sf-tag--inline.sf-tag--inline.sf-tag--size-3.spacing-compact {
    --sf-tag--block: var(--sf-ui-3--space-y-tightness-low);
  }
  /* The remove mark follows the label: 0.7 of its font size. The button keeps
     the whole line, so the target does not shrink with the mark. */
  .sf-tag.sf-tag--inline.sf-tag--inline .sf-close-icon {
    --sf-close-icon--height: calc(var(--sf-tag--font-size) * 0.7);
    --sf-close-icon--width: calc(var(--sf-tag--font-size) * 0.7);
  }
}
@layer sf.overrides {
  .sf-tag > .sf-icon-button.sf-icon-button--link.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-surface-variant);
  }
}
@layer sf.states {
  /* A tag is a control of its size, and its parts take the ladder like a
     button's: the label keeps the size's text step on both sides, so a text-only
     tag centres its text (it sat right of centre); a picture before the
     label is the line high and the label follows it at the same step, with no
     gap of the tag's own (the step was larger than a button's). Measured before: an icon
     was a size larger at 1/3, which made the tag taller than its neighbours, and
     a size smaller at 2 and 3. Inline tags in a field set --sf-tag--label-* and keep
     their own insets. */
  .sf-tag.sf-tag--size-1\/3 {
    --sf-tag--gap: var(--sf-tag-gap, 0);
  }
  .sf-tag.sf-tag--size-1\/3 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-ui-1\/3--text-space-x);
    --sf-tag-container--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
  }
  .sf-tag.sf-tag--size-1\/3 .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1\/3);
    --sf-tag-count--line-height: var(--sf-text-height-1\/3);
    --sf-tag-count--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
  }
  .sf-tag.sf-tag--size-1\/3 > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3 > .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1\/3);
    --sf-tag-color-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-tag.sf-tag--size-1\/3 > .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1\/3);
    --sf-avatar--width: var(--sf-text-height-1\/3);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1\/3) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1\/3);
  }
  .sf-tag.sf-tag--size-1\/2 {
    --sf-tag--gap: var(--sf-tag-gap, 0);
  }
  .sf-tag.sf-tag--size-1\/2 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
    --sf-tag-container--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-tag.sf-tag--size-1\/2 .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1\/2);
    --sf-tag-count--line-height: var(--sf-text-height-1\/2);
    --sf-tag-count--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-tag.sf-tag--size-1\/2 > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2 > .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1\/2);
    --sf-tag-color-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1\/2 > .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1\/2);
    --sf-avatar--width: var(--sf-text-height-1\/2);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1\/2) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--size-1 {
    --sf-tag--gap: var(--sf-tag-gap, 0);
  }
  .sf-tag.sf-tag--size-1 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-ui-1--text-space-x);
    --sf-tag-container--padding-inline-end: var(--sf-ui-1--text-space-x);
  }
  .sf-tag.sf-tag--size-1 .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-1);
    --sf-tag-count--line-height: var(--sf-text-height-1);
    --sf-tag-count--padding-inline-end: var(--sf-ui-1--text-space-x);
  }
  .sf-tag.sf-tag--size-1 > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1 > .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-1);
    --sf-tag-color-icon--width: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-1 > .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-1);
    --sf-avatar--width: var(--sf-text-height-1);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-1) / 2));
    --sf-avatar--line-height: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--size-2 {
    --sf-tag--gap: var(--sf-tag-gap, 0);
  }
  .sf-tag.sf-tag--size-2 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-ui-2--text-space-x);
    --sf-tag-container--padding-inline-end: var(--sf-ui-2--text-space-x);
  }
  .sf-tag.sf-tag--size-2 .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-2);
    --sf-tag-count--line-height: var(--sf-text-height-2);
    --sf-tag-count--padding-inline-end: var(--sf-ui-2--text-space-x);
  }
  .sf-tag.sf-tag--size-2 > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-tag.sf-tag--size-2 > .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-2);
    --sf-tag-color-icon--width: var(--sf-text-height-2);
  }
  .sf-tag.sf-tag--size-2 > .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-2);
    --sf-avatar--width: var(--sf-text-height-2);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-2) / 2));
    --sf-avatar--line-height: var(--sf-text-height-2);
  }
  .sf-tag.sf-tag--size-3 {
    --sf-tag--gap: var(--sf-tag-gap, 0);
  }
  .sf-tag.sf-tag--size-3 .sf-tag-container {
    --sf-tag-container--padding-inline-start: var(--sf-ui-3--text-space-x);
    --sf-tag-container--padding-inline-end: var(--sf-ui-3--text-space-x);
  }
  .sf-tag.sf-tag--size-3 .sf-tag-count {
    --sf-tag-count--font-size: var(--sf-text-size-3);
    --sf-tag-count--line-height: var(--sf-text-height-3);
    --sf-tag-count--padding-inline-end: var(--sf-ui-3--text-space-x);
  }
  .sf-tag.sf-tag--size-3 > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-tag.sf-tag--size-3 > .sf-tag-color-icon {
    --sf-tag-color-icon--height: var(--sf-text-height-3);
    --sf-tag-color-icon--width: var(--sf-text-height-3);
  }
  .sf-tag.sf-tag--size-3 > .sf-avatar {
    --sf-avatar--height: var(--sf-text-height-3);
    --sf-avatar--width: var(--sf-text-height-3);
    --sf-avatar--font-size: min(var(--sf-text-size-1\/3), calc(var(--sf-text-height-3) / 2));
    --sf-avatar--line-height: var(--sf-text-height-3);
  }
}
@layer sf.states {
  /* The remove mark is drawn by the tag, whatever the close markup carries: a
     close written without a size class had no glyph at all, so a removable tag
     in plain markup showed no mark. The mark is 0.7 of the label's font size at
     every size, the rule inline tags in a field already follow, and it sits
     after the label at the label's own end step. The button keeps no padding of
     its own and reaches a target of --sf-c2 around the mark (WCAG 2.2, 2.5.8), the way
     a checkbox's native control does. */
  .sf-tag > .sf-icon-button.sf-icon-button--close {
    /* Stated outright: the tag's own button rule pads with the tag's insets
       (at size 2 that made the button several times wider than its mark). */
    padding: 0;
    position: relative;
  }
  .sf-tag > .sf-icon-button.sf-icon-button--close::after {
    content: "";
    position: absolute;
    top: min(var(--sf-px) * 0, (100% - var(--sf-c2)) / 2);
    right: min(var(--sf-px) * 0, (100% - var(--sf-c2)) / 2);
    bottom: min(var(--sf-px) * 0, (100% - var(--sf-c2)) / 2);
    left: min(var(--sf-px) * 0, (100% - var(--sf-c2)) / 2);
    inset: min(var(--sf-px) * 0, (100% - var(--sf-c2)) / 2) min(var(--sf-px) * 0, (100% - var(--sf-c2)) / 2);
  }
  .sf-tag > .sf-icon-button.sf-icon-button--close > .sf-close {
    --sf-close--padding-top: 0;
    --sf-close--padding-bottom: 0;
    --sf-close--padding-inline-start: 0;
    --sf-close--padding-inline-end: 0;
  }
  .sf-tag > .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.998%201.41504L9.41309%208L15.998%2014.5859L14.584%2016.001L7.99902%209.41504L1.41406%2016.001L0%2014.5859L6.58398%208L0%201.41504L1.41406%200.000976562L7.99805%206.58594L14.584%200L15.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.998%201.41504L9.41309%208L15.998%2014.5859L14.584%2016.001L7.99902%209.41504L1.41406%2016.001L0%2014.5859L6.58398%208L0%201.41504L1.41406%200.000976562L7.99805%206.58594L14.584%200L15.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    display: block;
  }
  .sf-tag.sf-tag--size-1\/3 > .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--width: calc(var(--sf-text-size-1\/3) * 0.7);
    --sf-close-icon--height: calc(var(--sf-text-size-1\/3) * 0.7);
  }
  .sf-tag.sf-tag--size-1\/2 > .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--width: calc(var(--sf-text-size-1\/2) * 0.7);
    --sf-close-icon--height: calc(var(--sf-text-size-1\/2) * 0.7);
  }
  .sf-tag.sf-tag--size-1 > .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--width: calc(var(--sf-text-size-1) * 0.7);
    --sf-close-icon--height: calc(var(--sf-text-size-1) * 0.7);
  }
  .sf-tag.sf-tag--size-2 > .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--width: calc(var(--sf-text-size-2) * 0.7);
    --sf-close-icon--height: calc(var(--sf-text-size-2) * 0.7);
  }
  .sf-tag.sf-tag--size-3 > .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--width: calc(var(--sf-text-size-3) * 0.7);
    --sf-close-icon--height: calc(var(--sf-text-size-3) * 0.7);
  }
}
@layer sf.components {
  /* A tag on a text line, in a table cell or beside other text, publishes that
     line itself, the way a dropdown publishes its field line to its tags. */
  .sf-tag.sf-tag--line-1\/2 {
    --sf-tag--line: var(--sf-text-height-1\/2);
  }
  .sf-tag.sf-tag--line-1 {
    --sf-tag--line: var(--sf-text-height-1);
  }
  .sf-tag.sf-tag--line-2 {
    --sf-tag--line: var(--sf-text-height-2);
  }
}

/* docara-shell-source: runtime/component/close/css/close.css */
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-close {
    padding-left: var(--sf-close--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-close {
    padding-left: var(--sf-close--padding-inline-start);
    }
  }
  .sf-close:where(:dir(ltr)) {
    padding-left: var(--sf-close--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-close {
    padding-right: var(--sf-close--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-close {
    padding-right: var(--sf-close--padding-inline-start);
    }
  }
  .sf-close:where(:dir(rtl)) {
    padding-right: var(--sf-close--padding-inline-start);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-close {
    padding-right: var(--sf-close--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-close {
    padding-right: var(--sf-close--padding-inline-end);
    }
  }
  .sf-close:where(:dir(ltr)) {
    padding-right: var(--sf-close--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-close {
    padding-left: var(--sf-close--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-close {
    padding-left: var(--sf-close--padding-inline-end);
    }
  }
  .sf-close:where(:dir(rtl)) {
    padding-left: var(--sf-close--padding-inline-end);
  }
  .sf-close {
    background-color: transparent;
    background-color: var(--sf-close--background-color, transparent);
    -webkit-padding-start: var(--sf-close--padding-inline-start);
            padding-inline-start: var(--sf-close--padding-inline-start);
    padding-top: var(--sf-close--padding-top);
    -webkit-padding-end: var(--sf-close--padding-inline-end);
            padding-inline-end: var(--sf-close--padding-inline-end);
    padding-bottom: var(--sf-close--padding-bottom);
  }
  .sf-close .sf-close-icon {
    --sf-close-icon---webkit-mask-repeat: no-repeat;
    --sf-close-icon---webkit-mask-size: contain;
    /* The cross is a glyph, read like any other: --sf-outline is the role of a
       boundary, 4.47:1, and a theme retuning its borders would have moved it.
       The paler of the two roles for what stands on a surface is 6.47:1 light
       and 5.95:1 dark (owner, 2026-10-08). */
    --sf-close-icon--background-color: var(--sf-on-surface-variant);
    --sf-close-icon--mask-repeat: no-repeat;
    --sf-close-icon--mask-size: contain;
    -webkit-mask-image: var(--sf-close-icon---webkit-mask-image);
    -webkit-mask-repeat: var(--sf-close-icon---webkit-mask-repeat);
    -webkit-mask-size: var(--sf-close-icon---webkit-mask-size);
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
    font-size: var(--sf-close-icon--font-size);
    height: var(--sf-close-icon--height);
    -webkit-mask-image: var(--sf-close-icon--mask-image);
            mask-image: var(--sf-close-icon--mask-image);
    -webkit-mask-repeat: var(--sf-close-icon--mask-repeat);
            mask-repeat: var(--sf-close-icon--mask-repeat);
    -webkit-mask-size: var(--sf-close-icon--mask-size);
            mask-size: var(--sf-close-icon--mask-size);
    width: var(--sf-close-icon--width);
  }
  .sf-close.sf-close--size-1 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.998%201.41504L9.41309%208L15.998%2014.5859L14.584%2016.001L7.99902%209.41504L1.41406%2016.001L0%2014.5859L6.58398%208L0%201.41504L1.41406%200.000976562L7.99805%206.58594L14.584%200L15.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1);
    --sf-close-icon--height: var(--sf-text-size-1);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.998%201.41504L9.41309%208L15.998%2014.5859L14.584%2016.001L7.99902%209.41504L1.41406%2016.001L0%2014.5859L6.58398%208L0%201.41504L1.41406%200.000976562L7.99805%206.58594L14.584%200L15.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1);
  }
  .sf-close.sf-close--size-2 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%201.41406L11.4141%2010L19.999%2018.5859L18.585%2020L10%2011.4141L1.41504%2020L0.000976562%2018.5859L8.58594%2010L0%201.41406L1.41504%200L10%208.58594L18.5859%200L20%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-2);
    --sf-close-icon--height: var(--sf-text-size-2);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%201.41406L11.4141%2010L19.999%2018.5859L18.585%2020L10%2011.4141L1.41504%2020L0.000976562%2018.5859L8.58594%2010L0%201.41406L1.41504%200L10%208.58594L18.5859%200L20%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-2);
  }
  .sf-close.sf-close--size-3 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M24%201.41406L13.4141%2012L23.998%2022.584L22.584%2023.999L12%2013.4141L1.41602%2023.999L0.00195312%2022.584L10.585%2012L0%201.41406L1.41504%200L12%2010.585L22.585%200L24%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-3);
    --sf-close-icon--height: var(--sf-text-size-3);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M24%201.41406L13.4141%2012L23.998%2022.584L22.584%2023.999L12%2013.4141L1.41602%2023.999L0.00195312%2022.584L10.585%2012L0%201.41406L1.41504%200L12%2010.585L22.585%200L24%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-3);
  }
  .sf-close.sf-close--size-4 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M28%201.41406L15.4131%2014L27.998%2026.585L26.584%2028L13.999%2015.4141L1.41504%2028L0.000976562%2026.5859L12.585%2014L0%201.41406L1.41406%200L13.999%2012.5859L26.585%200L28%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-4);
    --sf-close-icon--height: var(--sf-text-size-4);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M28%201.41406L15.4131%2014L27.998%2026.585L26.584%2028L13.999%2015.4141L1.41504%2028L0.000976562%2026.5859L12.585%2014L0%201.41406L1.41406%200L13.999%2012.5859L26.585%200L28%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-4);
  }
  .sf-close.sf-close--size-5 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M32%201.41406L17.4141%2016L31.999%2030.585L30.585%2032L16%2017.4141L1.41504%2032L0.000976562%2030.5859L14.5859%2016L0%201.41406L1.41504%200L16%2014.585L30.5859%200L32%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-5);
    --sf-close-icon--height: var(--sf-text-size-5);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M32%201.41406L17.4141%2016L31.999%2030.585L30.585%2032L16%2017.4141L1.41504%2032L0.000976562%2030.5859L14.5859%2016L0%201.41406L1.41504%200L16%2014.585L30.5859%200L32%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-5);
  }
  .sf-close.sf-close--size-6 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M36%201.41406L19.4131%2018.001L35.998%2034.5859L34.584%2036L18%2019.415L1.41602%2036L0.00195312%2034.5859L16.5859%2018.001L0%201.41406L1.41406%200L18%2016.5859L34.5859%200L36%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-6);
    --sf-close-icon--height: var(--sf-text-size-6);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M36%201.41406L19.4131%2018.001L35.998%2034.5859L34.584%2036L18%2019.415L1.41602%2036L0.00195312%2034.5859L16.5859%2018.001L0%201.41406L1.41406%200L18%2016.5859L34.5859%200L36%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-6);
  }
  .sf-close.sf-close--size-7 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M39.998%201.41504L21.4131%2020L39.998%2038.5859L38.584%2040L19.999%2021.415L1.41504%2040L0.000976562%2038.5859L18.584%2020L0%201.41602L1.41406%200.000976562L19.998%2018.5859L38.584%200L39.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-7);
    --sf-close-icon--height: var(--sf-text-size-7);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M39.998%201.41504L21.4131%2020L39.998%2038.5859L38.584%2040L19.999%2021.415L1.41504%2040L0.000976562%2038.5859L18.584%2020L0%201.41602L1.41406%200.000976562L19.998%2018.5859L38.584%200L39.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-7);
  }
  .sf-close.sf-close--size-1\/4 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10%201.41406L6.41406%205L10%208.58594L8.58594%2010L5%206.41406L1.41406%2010L0%208.58594L3.58594%205L0%201.41406L1.41406%200L5%203.58594L8.58594%200L10%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1\/4);
    --sf-close-icon--height: var(--sf-text-size-1\/4);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10%201.41406L6.41406%205L10%208.58594L8.58594%2010L5%206.41406L1.41406%2010L0%208.58594L3.58594%205L0%201.41406L1.41406%200L5%203.58594L8.58594%200L10%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1\/4);
  }
  .sf-close.sf-close--size-1\/3 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.999%201.41406L7.41406%205.99805L12%2010.584L10.5859%2011.998L6%207.41211L1.41406%2011.998L0%2010.584L4.58496%205.99805L0.000976562%201.41406L1.41504%200L6%204.58398L10.585%200L11.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1\/3);
    --sf-close-icon--height: var(--sf-text-size-1\/3);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.999%201.41406L7.41406%205.99805L12%2010.584L10.5859%2011.998L6%207.41211L1.41406%2011.998L0%2010.584L4.58496%205.99805L0.000976562%201.41406L1.41504%200L6%204.58398L10.585%200L11.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1\/3);
  }
  .sf-close.sf-close--size-1\/2 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.999%201.41406L8.41309%206.99902L14%2012.5859L12.5859%2014L6.99902%208.41309L1.41406%2014L0%2012.585L5.58496%206.99902L0.000976562%201.41504L1.41504%200L6.99902%205.58496L12.585%200L13.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1\/2);
    --sf-close-icon--height: var(--sf-text-size-1\/2);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.999%201.41406L8.41309%206.99902L14%2012.5859L12.5859%2014L6.99902%208.41309L1.41406%2014L0%2012.585L5.58496%206.99902L0.000976562%201.41504L1.41504%200L6.99902%205.58496L12.585%200L13.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1\/2);
  }
  .sf-close--size-1, .sf-close--size-2 {
    --sf-close--padding-bottom: var(--sf-a4);
    --sf-close--padding-inline-end: var(--sf-a4);
    --sf-close--padding-inline-start: var(--sf-a4);
    --sf-close--padding-top: var(--sf-a4);
  }
  .sf-close--size-3, .sf-close--size-4 {
    --sf-close--padding-bottom: var(--sf-a6);
    --sf-close--padding-inline-end: var(--sf-a6);
    --sf-close--padding-inline-start: var(--sf-a6);
    --sf-close--padding-top: var(--sf-a6);
  }
  .sf-close--size-5, .sf-close--size-6 {
    --sf-close--padding-bottom: var(--sf-a8);
    --sf-close--padding-inline-end: var(--sf-a8);
    --sf-close--padding-inline-start: var(--sf-a8);
    --sf-close--padding-top: var(--sf-a8);
  }
  .sf-close--size-7 {
    --sf-close--padding-bottom: var(--sf-b0);
    --sf-close--padding-inline-end: var(--sf-b0);
    --sf-close--padding-inline-start: var(--sf-b0);
    --sf-close--padding-top: var(--sf-b0);
  }
  .sf-close--size-1\/4 {
    --sf-close--padding-bottom: var(--sf-a1);
    --sf-close--padding-inline-end: var(--sf-a1);
    --sf-close--padding-inline-start: var(--sf-a1);
    --sf-close--padding-top: var(--sf-a1);
  }
  .sf-close--size-1\/3 {
    --sf-close--padding-bottom: var(--sf-a2);
    --sf-close--padding-inline-end: var(--sf-a2);
    --sf-close--padding-inline-start: var(--sf-a2);
    --sf-close--padding-top: var(--sf-a2);
  }
  .sf-close--size-1\/2 {
    --sf-close--padding-bottom: var(--sf-a3);
    --sf-close--padding-inline-end: var(--sf-a3);
    --sf-close--padding-inline-start: var(--sf-a3);
    --sf-close--padding-top: var(--sf-a3);
  }
  @media (forced-colors: active) {
    .sf-close .sf-close-icon,
    .sf-icon-button .sf-close .sf-close-icon {
      forced-color-adjust: none;
      background-color: CanvasText;
    }
    :disabled .sf-close .sf-close-icon,
    [aria-disabled=true] .sf-close .sf-close-icon,
    .sf-close:disabled .sf-close-icon {
      background-color: GrayText;
    }
  }
}

/* docara-shell-source: runtime/component/modal/css/modal.css */
@layer sf.components {
  .sf-modal-focus-guard {
    position: fixed;
    width: 0;
    inline-size: 0;
    height: 0;
    block-size: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .sf-modal {
    --sf-modal-overlay-background: var(--sf-black, #000);
    --sf-modal-overlay-opacity: var(--sf-opacity-60, 0.6);
    --sf-modal-iframe-min-height: var(--sf-g2);
  }
  .sf-modal[data-sf-modal-position=left],
  .sf-modal[data-sf-modal-position=right],
  .sf-modal[data-sf-modal-position=inline-start],
  .sf-modal[data-sf-modal-position=inline-end] {
    align-items: stretch;
    padding: 0;
  }
  .sf-modal[data-sf-modal-position=left] {
    justify-content: flex-start;
  }
  .sf-modal[data-sf-modal-position=right] {
    justify-content: flex-end;
  }
  .sf-modal[data-sf-modal-position=inline-start] {
    justify-content: flex-start;
  }
  .sf-modal[data-sf-modal-position=inline-end] {
    justify-content: flex-end;
  }
  .sf-modal[data-sf-modal-position=top],
  .sf-modal[data-sf-modal-position=bottom] {
    justify-content: stretch;
    padding: 0;
  }
  .sf-modal[data-sf-modal-position=top] {
    align-items: flex-start;
  }
  .sf-modal[data-sf-modal-position=bottom] {
    align-items: flex-end;
  }
  .sf-modal[data-sf-modal-position=left] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=right] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel] {
    display: flex;
    max-width: min(100%, auto);
    max-width: min(100%, var(--sf-modal-drawer-width, auto));
    min-height: 100%;
    width: auto;
    width: var(--sf-modal-drawer-width, auto);
  }
  .sf-modal[data-sf-modal-position=top] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel] {
    display: flex;
    max-height: min(100%, 100vh);
    max-height: min(100%, var(--sf-modal-drawer-height, 100vh));
    min-width: 100%;
  }
  .sf-modal[data-sf-modal-position=left] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=right] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=top] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=bottom] [data-sf-modal-surface] {
    flex: 1;
  }
  .sf-modal-header {
    --sf-modal-header-gap: var(--sf-space-1);
    gap: var(--sf-modal-header-gap);
  }
  .sf-modal-surface {
    --sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-surface-1, #fff));
    --sf-modal-surface-border-color: var(--sf-modal-border-color, var(--sf-outline-variant, transparent));
    --sf-modal-surface-border-style: solid;
    --sf-modal-surface-border-width: var(--sf-modal-border-width, var(--sf-border-width, var(--sf-px)));
    --sf-modal-surface-gap: var(--sf-modal-gap, var(--sf-space-1));
    --sf-modal-surface-padding: var(--sf-modal-padding-block, var(--sf-space-2)) var(--sf-modal-padding-inline, var(--sf-space-2));
    --sf-modal-surface-radius: var(--sf-modal-radius, var(--sf-radius--surface));
    --sf-modal-surface-shadow: none;
    background-color: var(--sf-modal-surface-bg);
    border: var(--sf-modal-surface-border-width) var(--sf-modal-surface-border-style) var(--sf-modal-surface-border-color);
    border-radius: var(--sf-modal-surface-radius);
    box-shadow: var(--sf-modal-surface-shadow);
    gap: var(--sf-modal-surface-gap);
    min-width: 0;
    padding: var(--sf-modal-surface-padding);
  }
  .sf-modal-surface--elevated {
    /* Elevated is a step, not a shadow alone: surface and shadow of step 3. */
    --sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-elevation-3--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    --sf-modal-surface-shadow: var(--sf-elevation-3--shadow);
  }
  .sf-modal [data-sf-modal-overlay] {
    background-color: var(--sf-modal-overlay-background);
    opacity: var(--sf-modal-overlay-opacity);
    transition: opacity var(--sf-duration-normal) var(--sf-animation);
  }
  .sf-modal[data-sf-modal-state=opening] [data-sf-modal-overlay] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-state=closing] [data-sf-modal-overlay] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-hidden=true] {
    pointer-events: none;
  }
  .sf-modal[data-sf-modal-hidden=true] [data-sf-modal-overlay] {
    opacity: 0;
    pointer-events: none;
  }
  .sf-modal [data-sf-modal-panel] {
    opacity: 0;
  }
  .sf-modal.animate [data-sf-modal-panel] {
    transition: opacity var(--sf-duration-normal) var(--sf-animation), -webkit-transform var(--sf-duration-normal) var(--sf-animation);
    transition: transform var(--sf-duration-normal) var(--sf-animation), opacity var(--sf-duration-normal) var(--sf-animation);
    transition: transform var(--sf-duration-normal) var(--sf-animation), opacity var(--sf-duration-normal) var(--sf-animation), -webkit-transform var(--sf-duration-normal) var(--sf-animation);
    will-change: transform, opacity;
  }
  .sf-modal[data-sf-modal-position=left] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-position=right] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-position=top] [data-sf-modal-panel] {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel] {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .sf-modal[data-sf-modal-position=center] [data-sf-modal-panel] {
    -webkit-transform: translateY(var(--sf-space-1\/2)) scale(0.98);
            transform: translateY(var(--sf-space-1\/2)) scale(0.98);
  }
  .sf-modal[data-sf-modal-state=opening] [data-sf-modal-panel] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-state=open] [data-sf-modal-panel] {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  .sf-modal[data-sf-modal-state=closing] [data-sf-modal-panel] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-state=inline] [data-sf-modal-panel] {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=left] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=right] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=top] [data-sf-modal-panel] {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=bottom] [data-sf-modal-panel] {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=center] [data-sf-modal-panel] {
    -webkit-transform: translateY(var(--sf-space-1\/2)) scale(0.98);
            transform: translateY(var(--sf-space-1\/2)) scale(0.98);
  }
  .sf-modal[data-sf-modal-state][data-sf-modal-hidden=true] [data-sf-modal-panel] {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(var(--sf-space-1\/2)) scale(0.98);
            transform: translateY(var(--sf-space-1\/2)) scale(0.98);
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-width] {
    max-width: min(100%, var(--sf-modal-width));
    width: var(--sf-modal-width);
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] {
    display: flex;
    height: var(--sf-modal-height);
    max-height: min(100%, var(--sf-modal-height));
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-surface] {
    flex: 1;
    min-height: 0;
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body],
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-viewport] {
    flex: 1;
    min-height: 0;
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-scroll] {
    flex: 1;
    max-height: none;
  }
  .sf-modal[data-sf-modal-fullscreen=true] {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-panel] {
    display: flex;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-surface] {
    border-radius: 0;
    flex: 1;
    min-height: 0;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body],
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-viewport] {
    flex: 1;
    min-height: 0;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-scroll] {
    flex: 1;
    max-height: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-modal.animate [data-sf-modal-panel],
    .sf-modal [data-sf-modal-overlay] {
      transition: none;
      will-change: auto;
    }
  }
}
@layer sf.components {
  .sf-modal-header-content {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: anywhere;
  }
  .sf-modal-header-action {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: var(--sf-ui-1\/3--control-height);
    min-block-size: var(--sf-ui-1\/3--control-height);
    min-width: var(--sf-ui-1\/3--control-height);
    min-inline-size: var(--sf-ui-1\/3--control-height);
  }
  .sf-modal-close-button {
    --sf-modal-close-right: var(--sf-space-1\/3);
    --sf-modal-close-top: var(--sf-space-1\/3);
    right: var(--sf-modal-close-right);
    top: var(--sf-modal-close-top);
    left: var(--sf-modal-close-left);
    bottom: var(--sf-modal-close-bottom);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-close-button--inline-end {
    right: var(--sf-modal-close-right);
    right: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-modal-close-button--inline-end {
    right: var(--sf-modal-close-right);
    right: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
    }
  }
  .sf-modal-close-button--inline-end:where(:dir(ltr)) {
    right: var(--sf-modal-close-right);
    right: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-modal-close-button--inline-end {
    left: var(--sf-modal-close-right);
    left: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-modal-close-button--inline-end {
    left: var(--sf-modal-close-right);
    left: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
    }
  }
  .sf-modal-close-button--inline-end:where(:dir(rtl)) {
    left: var(--sf-modal-close-right);
    left: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  .sf-modal-close-button--inline-end {
    left: auto;
    right: auto;
    inset-inline-end: var(--sf-modal-close-right);
    inset-inline-end: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  .sf-modal-hide-button {
    --sf-modal-hide-right: var(--sf-space-2);
    --sf-modal-hide-top: var(--sf-space-1\/3);
    right: var(--sf-modal-hide-right);
    top: var(--sf-modal-hide-top);
    left: var(--sf-modal-hide-left);
    bottom: var(--sf-modal-hide-bottom);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-hide-button--inline-end {
    right: var(--sf-modal-hide-right);
    right: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-modal-hide-button--inline-end {
    right: var(--sf-modal-hide-right);
    right: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
    }
  }
  .sf-modal-hide-button--inline-end:where(:dir(ltr)) {
    right: var(--sf-modal-hide-right);
    right: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-modal-hide-button--inline-end {
    left: var(--sf-modal-hide-right);
    left: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-modal-hide-button--inline-end {
    left: var(--sf-modal-hide-right);
    left: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
    }
  }
  .sf-modal-hide-button--inline-end:where(:dir(rtl)) {
    left: var(--sf-modal-hide-right);
    left: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  .sf-modal-hide-button--inline-end {
    left: auto;
    right: auto;
    inset-inline-end: var(--sf-modal-hide-right);
    inset-inline-end: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  .sf-modal-hide-icon {
    background-color: currentColor;
    display: block;
    height: 2px;
    height: var(--sf-border-width-2, 2px);
    width: var(--sf-space-1);
  }
}

/* docara-shell-source: runtime/utility/container/default/css/default.css */
@layer sf.utilities {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .container {
    padding-left: var(--sf-space-1);
    }
  }
  .container:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .container {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .container {
    padding-right: var(--sf-space-1);
    }
  }
  .container:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .container {
    padding-right: var(--sf-space-1);
    }
  }
  .container:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .container {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .container {
    padding-left: var(--sf-space-1);
    }
  }
  .container:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
  }
  .container {
    width: 100%;
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
  }
  @media (min-width: 32rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-2);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-2);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-2);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-2);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-2);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-2);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-2);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-2);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-2);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-2);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-2);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-2);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-sm);
      -webkit-padding-start: var(--sf-space-2);
              padding-inline-start: var(--sf-space-2);
      -webkit-padding-end: var(--sf-space-2);
              padding-inline-end: var(--sf-space-2);
    }
  }
  @media (min-width: 44rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-3);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-3);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-3);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-3);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-3);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-3);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-3);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-3);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-3);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-3);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-3);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-3);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-md);
      -webkit-padding-start: var(--sf-space-3);
              padding-inline-start: var(--sf-space-3);
      -webkit-padding-end: var(--sf-space-3);
              padding-inline-end: var(--sf-space-3);
    }
  }
  @media (min-width: 60rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-4);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-4);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-4);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-4);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-4);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-4);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-4);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-4);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-4);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-4);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-4);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-4);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-lg);
      -webkit-padding-start: var(--sf-space-4);
              padding-inline-start: var(--sf-space-4);
      -webkit-padding-end: var(--sf-space-4);
              padding-inline-end: var(--sf-space-4);
    }
  }
  @media (min-width: 72rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-5);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-5);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-5);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-5);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-5);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-5);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-5);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-5);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-5);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-5);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-5);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-5);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-xl);
      -webkit-padding-start: var(--sf-space-5);
              padding-inline-start: var(--sf-space-5);
      -webkit-padding-end: var(--sf-space-5);
              padding-inline-end: var(--sf-space-5);
    }
  }
  @media (min-width: 80rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-6);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-6);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-6);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-6);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-6);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-6);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-6);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-6);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-6);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-6);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-6);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-6);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-xxl);
      -webkit-padding-start: var(--sf-space-6);
              padding-inline-start: var(--sf-space-6);
      -webkit-padding-end: var(--sf-space-6);
              padding-inline-end: var(--sf-space-6);
    }
  }
}

/* docara-shell-source: runtime/utility/cursor/default/css/default.css */
@layer sf.utilities {
  .cursor-auto {
    cursor: auto;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-wait {
    cursor: wait;
  }
  .cursor-text {
    cursor: text;
  }
  .cursor-move {
    cursor: move;
  }
  .cursor-help {
    cursor: help;
  }
  .cursor-grab {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .cursor-grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-no-drop {
    cursor: no-drop;
  }
  .cursor-context-menu {
    cursor: context-menu;
  }
  .cursor-progress {
    cursor: progress;
  }
  .cursor-crosshair {
    cursor: crosshair;
  }
  .cursor-cell {
    cursor: cell;
  }
  .cursor-alias {
    cursor: alias;
  }
  .cursor-copy {
    cursor: copy;
  }
  .cursor-zoom-in {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .cursor-zoom-out {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
  }
  .cursor-all-scroll {
    cursor: all-scroll;
  }
  .cursor-w-resize {
    cursor: w-resize;
  }
  .cursor-e-resize {
    cursor: e-resize;
  }
  .cursor-n-resize {
    cursor: n-resize;
  }
  .cursor-s-resize {
    cursor: s-resize;
  }
  .cursor-ew-resize {
    cursor: ew-resize;
  }
  .cursor-ns-resize {
    cursor: ns-resize;
  }
  .cursor-ne-resize {
    cursor: ne-resize;
  }
  .cursor-nw-resize {
    cursor: nw-resize;
  }
  .cursor-se-resize {
    cursor: se-resize;
  }
  .cursor-sw-resize {
    cursor: sw-resize;
  }
  .cursor-nesw-resize {
    cursor: nesw-resize;
  }
  .cursor-nwse-resize {
    cursor: nwse-resize;
  }
  .cursor-col-resize {
    cursor: col-resize;
  }
  .cursor-row-resize {
    cursor: row-resize;
  }
  .cursor-vertical-text {
    cursor: vertical-text;
  }
}

/* docara-shell-source: runtime/utility/display/default/css/default.css */
@layer sf.utilities {
  .block {
    display: block;
  }
  .inline-block {
    display: inline-block;
  }
  .inline {
    display: inline;
  }
  .flex {
    display: flex;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .display-table {
    display: table;
  }
  .inline-table {
    display: inline-table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .table-column {
    display: table-column;
  }
  .table-column-group {
    display: table-column-group;
  }
  .table-footer-group {
    display: table-footer-group;
  }
  .table-header-group {
    display: table-header-group;
  }
  .table-row-group {
    display: table-row-group;
  }
  .table-row {
    display: table-row;
  }
  .flow-root {
    display: flow-root;
  }
  .grid {
    display: grid;
  }
  .inline-grid {
    display: inline-grid;
  }
  .content {
    display: contents;
  }
  .list-item {
    display: list-item;
  }
  .hidden {
    display: none;
  }
}

/* docara-shell-source: runtime/utility/element-position/default/css/default.css */
@layer sf.utilities {
  .top-0 {
    top: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-0 {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-0 {
    right: 0;
    }
  }
  .inline-end-0:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-0 {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-0 {
    left: 0;
    }
  }
  .inline-end-0:where(:dir(rtl)) {
    left: 0;
  }
  .inline-end-0 {
    inset-inline-end: 0;
  }
  .bottom-0 {
    bottom: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-0 {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-0 {
    left: 0;
    }
  }
  .inline-start-0:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-0 {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-0 {
    right: 0;
    }
  }
  .inline-start-0:where(:dir(rtl)) {
    right: 0;
  }
  .inline-start-0 {
    inset-inline-start: 0;
  }
  .top-auto {
    top: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-auto {
    right: auto;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-auto {
    right: auto;
    }
  }
  .inline-end-auto:where(:dir(ltr)) {
    right: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-auto {
    left: auto;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-auto {
    left: auto;
    }
  }
  .inline-end-auto:where(:dir(rtl)) {
    left: auto;
  }
  .inline-end-auto {
    inset-inline-end: auto;
  }
  .bottom-auto {
    bottom: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-auto {
    left: auto;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-auto {
    left: auto;
    }
  }
  .inline-start-auto:where(:dir(ltr)) {
    left: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-auto {
    right: auto;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-auto {
    right: auto;
    }
  }
  .inline-start-auto:where(:dir(rtl)) {
    right: auto;
  }
  .inline-start-auto {
    inset-inline-start: auto;
  }
  .top-1\/2 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/2 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/2 {
    right: 50%;
    }
  }
  .inline-end-1\/2:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/2 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/2 {
    left: 50%;
    }
  }
  .inline-end-1\/2:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-1\/2 {
    inset-inline-end: 50%;
  }
  .bottom-1\/2 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/2 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/2 {
    left: 50%;
    }
  }
  .inline-start-1\/2:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/2 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/2 {
    right: 50%;
    }
  }
  .inline-start-1\/2:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-1\/2 {
    inset-inline-start: 50%;
  }
  .top-1\/3 {
    top: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/3 {
    right: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/3 {
    right: 33.333333%;
    }
  }
  .inline-end-1\/3:where(:dir(ltr)) {
    right: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/3 {
    left: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/3 {
    left: 33.333333%;
    }
  }
  .inline-end-1\/3:where(:dir(rtl)) {
    left: 33.333333%;
  }
  .inline-end-1\/3 {
    inset-inline-end: 33.333333%;
  }
  .bottom-1\/3 {
    bottom: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/3 {
    left: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/3 {
    left: 33.333333%;
    }
  }
  .inline-start-1\/3:where(:dir(ltr)) {
    left: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/3 {
    right: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/3 {
    right: 33.333333%;
    }
  }
  .inline-start-1\/3:where(:dir(rtl)) {
    right: 33.333333%;
  }
  .inline-start-1\/3 {
    inset-inline-start: 33.333333%;
  }
  .top-2\/3 {
    top: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/3 {
    right: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/3 {
    right: 66.666667%;
    }
  }
  .inline-end-2\/3:where(:dir(ltr)) {
    right: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/3 {
    left: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/3 {
    left: 66.666667%;
    }
  }
  .inline-end-2\/3:where(:dir(rtl)) {
    left: 66.666667%;
  }
  .inline-end-2\/3 {
    inset-inline-end: 66.666667%;
  }
  .bottom-2\/3 {
    bottom: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/3 {
    left: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/3 {
    left: 66.666667%;
    }
  }
  .inline-start-2\/3:where(:dir(ltr)) {
    left: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/3 {
    right: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/3 {
    right: 66.666667%;
    }
  }
  .inline-start-2\/3:where(:dir(rtl)) {
    right: 66.666667%;
  }
  .inline-start-2\/3 {
    inset-inline-start: 66.666667%;
  }
  .top-1\/4 {
    top: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/4 {
    right: 25%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/4 {
    right: 25%;
    }
  }
  .inline-end-1\/4:where(:dir(ltr)) {
    right: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/4 {
    left: 25%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/4 {
    left: 25%;
    }
  }
  .inline-end-1\/4:where(:dir(rtl)) {
    left: 25%;
  }
  .inline-end-1\/4 {
    inset-inline-end: 25%;
  }
  .bottom-1\/4 {
    bottom: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/4 {
    left: 25%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/4 {
    left: 25%;
    }
  }
  .inline-start-1\/4:where(:dir(ltr)) {
    left: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/4 {
    right: 25%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/4 {
    right: 25%;
    }
  }
  .inline-start-1\/4:where(:dir(rtl)) {
    right: 25%;
  }
  .inline-start-1\/4 {
    inset-inline-start: 25%;
  }
  .top-2\/4 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/4 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/4 {
    right: 50%;
    }
  }
  .inline-end-2\/4:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/4 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/4 {
    left: 50%;
    }
  }
  .inline-end-2\/4:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-2\/4 {
    inset-inline-end: 50%;
  }
  .bottom-2\/4 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/4 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/4 {
    left: 50%;
    }
  }
  .inline-start-2\/4:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/4 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/4 {
    right: 50%;
    }
  }
  .inline-start-2\/4:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-2\/4 {
    inset-inline-start: 50%;
  }
  .top-3\/4 {
    top: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/4 {
    right: 75%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/4 {
    right: 75%;
    }
  }
  .inline-end-3\/4:where(:dir(ltr)) {
    right: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/4 {
    left: 75%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/4 {
    left: 75%;
    }
  }
  .inline-end-3\/4:where(:dir(rtl)) {
    left: 75%;
  }
  .inline-end-3\/4 {
    inset-inline-end: 75%;
  }
  .bottom-3\/4 {
    bottom: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/4 {
    left: 75%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/4 {
    left: 75%;
    }
  }
  .inline-start-3\/4:where(:dir(ltr)) {
    left: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/4 {
    right: 75%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/4 {
    right: 75%;
    }
  }
  .inline-start-3\/4:where(:dir(rtl)) {
    right: 75%;
  }
  .inline-start-3\/4 {
    inset-inline-start: 75%;
  }
  .top-1\/5 {
    top: 20%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/5 {
    right: 20%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/5 {
    right: 20%;
    }
  }
  .inline-end-1\/5:where(:dir(ltr)) {
    right: 20%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/5 {
    left: 20%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/5 {
    left: 20%;
    }
  }
  .inline-end-1\/5:where(:dir(rtl)) {
    left: 20%;
  }
  .inline-end-1\/5 {
    inset-inline-end: 20%;
  }
  .bottom-1\/5 {
    bottom: 20%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/5 {
    left: 20%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/5 {
    left: 20%;
    }
  }
  .inline-start-1\/5:where(:dir(ltr)) {
    left: 20%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/5 {
    right: 20%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/5 {
    right: 20%;
    }
  }
  .inline-start-1\/5:where(:dir(rtl)) {
    right: 20%;
  }
  .inline-start-1\/5 {
    inset-inline-start: 20%;
  }
  .top-2\/5 {
    top: 40%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/5 {
    right: 40%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/5 {
    right: 40%;
    }
  }
  .inline-end-2\/5:where(:dir(ltr)) {
    right: 40%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/5 {
    left: 40%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/5 {
    left: 40%;
    }
  }
  .inline-end-2\/5:where(:dir(rtl)) {
    left: 40%;
  }
  .inline-end-2\/5 {
    inset-inline-end: 40%;
  }
  .bottom-2\/5 {
    bottom: 40%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/5 {
    left: 40%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/5 {
    left: 40%;
    }
  }
  .inline-start-2\/5:where(:dir(ltr)) {
    left: 40%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/5 {
    right: 40%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/5 {
    right: 40%;
    }
  }
  .inline-start-2\/5:where(:dir(rtl)) {
    right: 40%;
  }
  .inline-start-2\/5 {
    inset-inline-start: 40%;
  }
  .top-3\/5 {
    top: 60%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/5 {
    right: 60%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/5 {
    right: 60%;
    }
  }
  .inline-end-3\/5:where(:dir(ltr)) {
    right: 60%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/5 {
    left: 60%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/5 {
    left: 60%;
    }
  }
  .inline-end-3\/5:where(:dir(rtl)) {
    left: 60%;
  }
  .inline-end-3\/5 {
    inset-inline-end: 60%;
  }
  .bottom-3\/5 {
    bottom: 60%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/5 {
    left: 60%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/5 {
    left: 60%;
    }
  }
  .inline-start-3\/5:where(:dir(ltr)) {
    left: 60%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/5 {
    right: 60%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/5 {
    right: 60%;
    }
  }
  .inline-start-3\/5:where(:dir(rtl)) {
    right: 60%;
  }
  .inline-start-3\/5 {
    inset-inline-start: 60%;
  }
  .top-4\/5 {
    top: 80%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-4\/5 {
    right: 80%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-4\/5 {
    right: 80%;
    }
  }
  .inline-end-4\/5:where(:dir(ltr)) {
    right: 80%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-4\/5 {
    left: 80%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-4\/5 {
    left: 80%;
    }
  }
  .inline-end-4\/5:where(:dir(rtl)) {
    left: 80%;
  }
  .inline-end-4\/5 {
    inset-inline-end: 80%;
  }
  .bottom-4\/5 {
    bottom: 80%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-4\/5 {
    left: 80%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-4\/5 {
    left: 80%;
    }
  }
  .inline-start-4\/5:where(:dir(ltr)) {
    left: 80%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-4\/5 {
    right: 80%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-4\/5 {
    right: 80%;
    }
  }
  .inline-start-4\/5:where(:dir(rtl)) {
    right: 80%;
  }
  .inline-start-4\/5 {
    inset-inline-start: 80%;
  }
  .top-1\/6 {
    top: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/6 {
    right: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/6 {
    right: 16.666667%;
    }
  }
  .inline-end-1\/6:where(:dir(ltr)) {
    right: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/6 {
    left: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/6 {
    left: 16.666667%;
    }
  }
  .inline-end-1\/6:where(:dir(rtl)) {
    left: 16.666667%;
  }
  .inline-end-1\/6 {
    inset-inline-end: 16.666667%;
  }
  .bottom-1\/6 {
    bottom: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/6 {
    left: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/6 {
    left: 16.666667%;
    }
  }
  .inline-start-1\/6:where(:dir(ltr)) {
    left: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/6 {
    right: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/6 {
    right: 16.666667%;
    }
  }
  .inline-start-1\/6:where(:dir(rtl)) {
    right: 16.666667%;
  }
  .inline-start-1\/6 {
    inset-inline-start: 16.666667%;
  }
  .top-2\/6 {
    top: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/6 {
    right: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/6 {
    right: 33.333333%;
    }
  }
  .inline-end-2\/6:where(:dir(ltr)) {
    right: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/6 {
    left: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/6 {
    left: 33.333333%;
    }
  }
  .inline-end-2\/6:where(:dir(rtl)) {
    left: 33.333333%;
  }
  .inline-end-2\/6 {
    inset-inline-end: 33.333333%;
  }
  .bottom-2\/6 {
    bottom: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/6 {
    left: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/6 {
    left: 33.333333%;
    }
  }
  .inline-start-2\/6:where(:dir(ltr)) {
    left: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/6 {
    right: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/6 {
    right: 33.333333%;
    }
  }
  .inline-start-2\/6:where(:dir(rtl)) {
    right: 33.333333%;
  }
  .inline-start-2\/6 {
    inset-inline-start: 33.333333%;
  }
  .top-3\/6 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/6 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/6 {
    right: 50%;
    }
  }
  .inline-end-3\/6:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/6 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/6 {
    left: 50%;
    }
  }
  .inline-end-3\/6:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-3\/6 {
    inset-inline-end: 50%;
  }
  .bottom-3\/6 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/6 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/6 {
    left: 50%;
    }
  }
  .inline-start-3\/6:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/6 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/6 {
    right: 50%;
    }
  }
  .inline-start-3\/6:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-3\/6 {
    inset-inline-start: 50%;
  }
  .top-4\/6 {
    top: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-4\/6 {
    right: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-4\/6 {
    right: 66.666667%;
    }
  }
  .inline-end-4\/6:where(:dir(ltr)) {
    right: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-4\/6 {
    left: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-4\/6 {
    left: 66.666667%;
    }
  }
  .inline-end-4\/6:where(:dir(rtl)) {
    left: 66.666667%;
  }
  .inline-end-4\/6 {
    inset-inline-end: 66.666667%;
  }
  .bottom-4\/6 {
    bottom: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-4\/6 {
    left: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-4\/6 {
    left: 66.666667%;
    }
  }
  .inline-start-4\/6:where(:dir(ltr)) {
    left: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-4\/6 {
    right: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-4\/6 {
    right: 66.666667%;
    }
  }
  .inline-start-4\/6:where(:dir(rtl)) {
    right: 66.666667%;
  }
  .inline-start-4\/6 {
    inset-inline-start: 66.666667%;
  }
  .top-5\/6 {
    top: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-5\/6 {
    right: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-5\/6 {
    right: 83.333333%;
    }
  }
  .inline-end-5\/6:where(:dir(ltr)) {
    right: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-5\/6 {
    left: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-5\/6 {
    left: 83.333333%;
    }
  }
  .inline-end-5\/6:where(:dir(rtl)) {
    left: 83.333333%;
  }
  .inline-end-5\/6 {
    inset-inline-end: 83.333333%;
  }
  .bottom-5\/6 {
    bottom: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-5\/6 {
    left: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-5\/6 {
    left: 83.333333%;
    }
  }
  .inline-start-5\/6:where(:dir(ltr)) {
    left: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-5\/6 {
    right: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-5\/6 {
    right: 83.333333%;
    }
  }
  .inline-start-5\/6:where(:dir(rtl)) {
    right: 83.333333%;
  }
  .inline-start-5\/6 {
    inset-inline-start: 83.333333%;
  }
  .top-1\/12 {
    top: 8.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/12 {
    right: 8.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/12 {
    right: 8.333333%;
    }
  }
  .inline-end-1\/12:where(:dir(ltr)) {
    right: 8.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/12 {
    left: 8.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/12 {
    left: 8.333333%;
    }
  }
  .inline-end-1\/12:where(:dir(rtl)) {
    left: 8.333333%;
  }
  .inline-end-1\/12 {
    inset-inline-end: 8.333333%;
  }
  .bottom-1\/12 {
    bottom: 8.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/12 {
    left: 8.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/12 {
    left: 8.333333%;
    }
  }
  .inline-start-1\/12:where(:dir(ltr)) {
    left: 8.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/12 {
    right: 8.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/12 {
    right: 8.333333%;
    }
  }
  .inline-start-1\/12:where(:dir(rtl)) {
    right: 8.333333%;
  }
  .inline-start-1\/12 {
    inset-inline-start: 8.333333%;
  }
  .top-2\/12 {
    top: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/12 {
    right: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/12 {
    right: 16.666667%;
    }
  }
  .inline-end-2\/12:where(:dir(ltr)) {
    right: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/12 {
    left: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/12 {
    left: 16.666667%;
    }
  }
  .inline-end-2\/12:where(:dir(rtl)) {
    left: 16.666667%;
  }
  .inline-end-2\/12 {
    inset-inline-end: 16.666667%;
  }
  .bottom-2\/12 {
    bottom: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/12 {
    left: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/12 {
    left: 16.666667%;
    }
  }
  .inline-start-2\/12:where(:dir(ltr)) {
    left: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/12 {
    right: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/12 {
    right: 16.666667%;
    }
  }
  .inline-start-2\/12:where(:dir(rtl)) {
    right: 16.666667%;
  }
  .inline-start-2\/12 {
    inset-inline-start: 16.666667%;
  }
  .top-3\/12 {
    top: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/12 {
    right: 25%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/12 {
    right: 25%;
    }
  }
  .inline-end-3\/12:where(:dir(ltr)) {
    right: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/12 {
    left: 25%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/12 {
    left: 25%;
    }
  }
  .inline-end-3\/12:where(:dir(rtl)) {
    left: 25%;
  }
  .inline-end-3\/12 {
    inset-inline-end: 25%;
  }
  .bottom-3\/12 {
    bottom: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/12 {
    left: 25%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/12 {
    left: 25%;
    }
  }
  .inline-start-3\/12:where(:dir(ltr)) {
    left: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/12 {
    right: 25%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/12 {
    right: 25%;
    }
  }
  .inline-start-3\/12:where(:dir(rtl)) {
    right: 25%;
  }
  .inline-start-3\/12 {
    inset-inline-start: 25%;
  }
  .top-4\/12 {
    top: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-4\/12 {
    right: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-4\/12 {
    right: 33.333333%;
    }
  }
  .inline-end-4\/12:where(:dir(ltr)) {
    right: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-4\/12 {
    left: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-4\/12 {
    left: 33.333333%;
    }
  }
  .inline-end-4\/12:where(:dir(rtl)) {
    left: 33.333333%;
  }
  .inline-end-4\/12 {
    inset-inline-end: 33.333333%;
  }
  .bottom-4\/12 {
    bottom: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-4\/12 {
    left: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-4\/12 {
    left: 33.333333%;
    }
  }
  .inline-start-4\/12:where(:dir(ltr)) {
    left: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-4\/12 {
    right: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-4\/12 {
    right: 33.333333%;
    }
  }
  .inline-start-4\/12:where(:dir(rtl)) {
    right: 33.333333%;
  }
  .inline-start-4\/12 {
    inset-inline-start: 33.333333%;
  }
  .top-5\/12 {
    top: 41.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-5\/12 {
    right: 41.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-5\/12 {
    right: 41.666667%;
    }
  }
  .inline-end-5\/12:where(:dir(ltr)) {
    right: 41.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-5\/12 {
    left: 41.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-5\/12 {
    left: 41.666667%;
    }
  }
  .inline-end-5\/12:where(:dir(rtl)) {
    left: 41.666667%;
  }
  .inline-end-5\/12 {
    inset-inline-end: 41.666667%;
  }
  .bottom-5\/12 {
    bottom: 41.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-5\/12 {
    left: 41.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-5\/12 {
    left: 41.666667%;
    }
  }
  .inline-start-5\/12:where(:dir(ltr)) {
    left: 41.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-5\/12 {
    right: 41.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-5\/12 {
    right: 41.666667%;
    }
  }
  .inline-start-5\/12:where(:dir(rtl)) {
    right: 41.666667%;
  }
  .inline-start-5\/12 {
    inset-inline-start: 41.666667%;
  }
  .top-6\/12 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-6\/12 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-6\/12 {
    right: 50%;
    }
  }
  .inline-end-6\/12:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-6\/12 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-6\/12 {
    left: 50%;
    }
  }
  .inline-end-6\/12:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-6\/12 {
    inset-inline-end: 50%;
  }
  .bottom-6\/12 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-6\/12 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-6\/12 {
    left: 50%;
    }
  }
  .inline-start-6\/12:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-6\/12 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-6\/12 {
    right: 50%;
    }
  }
  .inline-start-6\/12:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-6\/12 {
    inset-inline-start: 50%;
  }
  .top-7\/12 {
    top: 58.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-7\/12 {
    right: 58.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-7\/12 {
    right: 58.333333%;
    }
  }
  .inline-end-7\/12:where(:dir(ltr)) {
    right: 58.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-7\/12 {
    left: 58.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-7\/12 {
    left: 58.333333%;
    }
  }
  .inline-end-7\/12:where(:dir(rtl)) {
    left: 58.333333%;
  }
  .inline-end-7\/12 {
    inset-inline-end: 58.333333%;
  }
  .bottom-7\/12 {
    bottom: 58.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-7\/12 {
    left: 58.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-7\/12 {
    left: 58.333333%;
    }
  }
  .inline-start-7\/12:where(:dir(ltr)) {
    left: 58.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-7\/12 {
    right: 58.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-7\/12 {
    right: 58.333333%;
    }
  }
  .inline-start-7\/12:where(:dir(rtl)) {
    right: 58.333333%;
  }
  .inline-start-7\/12 {
    inset-inline-start: 58.333333%;
  }
  .top-8\/12 {
    top: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-8\/12 {
    right: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-8\/12 {
    right: 66.666667%;
    }
  }
  .inline-end-8\/12:where(:dir(ltr)) {
    right: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-8\/12 {
    left: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-8\/12 {
    left: 66.666667%;
    }
  }
  .inline-end-8\/12:where(:dir(rtl)) {
    left: 66.666667%;
  }
  .inline-end-8\/12 {
    inset-inline-end: 66.666667%;
  }
  .bottom-8\/12 {
    bottom: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-8\/12 {
    left: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-8\/12 {
    left: 66.666667%;
    }
  }
  .inline-start-8\/12:where(:dir(ltr)) {
    left: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-8\/12 {
    right: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-8\/12 {
    right: 66.666667%;
    }
  }
  .inline-start-8\/12:where(:dir(rtl)) {
    right: 66.666667%;
  }
  .inline-start-8\/12 {
    inset-inline-start: 66.666667%;
  }
  .top-9\/12 {
    top: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-9\/12 {
    right: 75%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-9\/12 {
    right: 75%;
    }
  }
  .inline-end-9\/12:where(:dir(ltr)) {
    right: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-9\/12 {
    left: 75%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-9\/12 {
    left: 75%;
    }
  }
  .inline-end-9\/12:where(:dir(rtl)) {
    left: 75%;
  }
  .inline-end-9\/12 {
    inset-inline-end: 75%;
  }
  .bottom-9\/12 {
    bottom: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-9\/12 {
    left: 75%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-9\/12 {
    left: 75%;
    }
  }
  .inline-start-9\/12:where(:dir(ltr)) {
    left: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-9\/12 {
    right: 75%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-9\/12 {
    right: 75%;
    }
  }
  .inline-start-9\/12:where(:dir(rtl)) {
    right: 75%;
  }
  .inline-start-9\/12 {
    inset-inline-start: 75%;
  }
  .top-10\/12 {
    top: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-10\/12 {
    right: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-10\/12 {
    right: 83.333333%;
    }
  }
  .inline-end-10\/12:where(:dir(ltr)) {
    right: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-10\/12 {
    left: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-10\/12 {
    left: 83.333333%;
    }
  }
  .inline-end-10\/12:where(:dir(rtl)) {
    left: 83.333333%;
  }
  .inline-end-10\/12 {
    inset-inline-end: 83.333333%;
  }
  .bottom-10\/12 {
    bottom: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-10\/12 {
    left: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-10\/12 {
    left: 83.333333%;
    }
  }
  .inline-start-10\/12:where(:dir(ltr)) {
    left: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-10\/12 {
    right: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-10\/12 {
    right: 83.333333%;
    }
  }
  .inline-start-10\/12:where(:dir(rtl)) {
    right: 83.333333%;
  }
  .inline-start-10\/12 {
    inset-inline-start: 83.333333%;
  }
  .top-11\/12 {
    top: 91.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-11\/12 {
    right: 91.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-11\/12 {
    right: 91.666667%;
    }
  }
  .inline-end-11\/12:where(:dir(ltr)) {
    right: 91.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-11\/12 {
    left: 91.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-11\/12 {
    left: 91.666667%;
    }
  }
  .inline-end-11\/12:where(:dir(rtl)) {
    left: 91.666667%;
  }
  .inline-end-11\/12 {
    inset-inline-end: 91.666667%;
  }
  .bottom-11\/12 {
    bottom: 91.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-11\/12 {
    left: 91.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-11\/12 {
    left: 91.666667%;
    }
  }
  .inline-start-11\/12:where(:dir(ltr)) {
    left: 91.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-11\/12 {
    right: 91.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-11\/12 {
    right: 91.666667%;
    }
  }
  .inline-start-11\/12:where(:dir(rtl)) {
    right: 91.666667%;
  }
  .inline-start-11\/12 {
    inset-inline-start: 91.666667%;
  }
  .top-full {
    top: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-full {
    right: 100%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-full {
    right: 100%;
    }
  }
  .inline-end-full:where(:dir(ltr)) {
    right: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-full {
    left: 100%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-full {
    left: 100%;
    }
  }
  .inline-end-full:where(:dir(rtl)) {
    left: 100%;
  }
  .inline-end-full {
    inset-inline-end: 100%;
  }
  .bottom-full {
    bottom: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-full {
    left: 100%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-full {
    left: 100%;
    }
  }
  .inline-start-full:where(:dir(ltr)) {
    left: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-full {
    right: 100%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-full {
    right: 100%;
    }
  }
  .inline-start-full:where(:dir(rtl)) {
    right: 100%;
  }
  .inline-start-full {
    inset-inline-start: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-0 {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inset-0 {
    right: 0;
    }
  }
  .inset-0:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-0 {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inset-0 {
    left: 0;
    }
  }
  .inset-0:where(:dir(rtl)) {
    left: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-0 {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inset-0 {
    left: 0;
    }
  }
  .inset-0:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-0 {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inset-0 {
    right: 0;
    }
  }
  .inset-0:where(:dir(rtl)) {
    right: 0;
  }
  .inset-0 {
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-x-0 {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inset-x-0 {
    right: 0;
    }
  }
  .inset-x-0:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-x-0 {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inset-x-0 {
    left: 0;
    }
  }
  .inset-x-0:where(:dir(rtl)) {
    left: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-x-0 {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inset-x-0 {
    left: 0;
    }
  }
  .inset-x-0:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-x-0 {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inset-x-0 {
    right: 0;
    }
  }
  .inset-x-0:where(:dir(rtl)) {
    right: 0;
  }
  .inset-x-0 {
    inset-inline-end: 0;
    inset-inline-start: 0;
  }
  .inset-y-0 {
    top: 0;
    bottom: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-center {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inset-center {
    left: 50%;
    }
  }
  .inset-center:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-center {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inset-center {
    right: 50%;
    }
  }
  .inset-center:where(:dir(rtl)) {
    right: 50%;
  }
  .inset-center {
    inset-inline-start: 50%;
    top: 50%;
  }
}

/* docara-shell-source: runtime/utility/flex-direction/default/css/default.css */
@layer sf.utilities {
  .flex-row {
    flex-direction: row;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
}