/* 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-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .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);
  }
}