r-override: currentColor;
    box-sizing: border-box;
  }

  .small {
    --_avatar-size: 24px;
  }

  .medium {
    --_avatar-size: 40px;
  }

  .large {
    --_avatar-size: 60px;
  }

  .extra-large {
    --_avatar-size: 75px;
  }

  .initials {
    position: relative;
    top: 1px;
  }

  .indicator {
    display: grid;
    position: absolute;

    top: calc(-1 * var(--_indicator-offset-y));
    left: calc(100% - var(--_indicator-offset-x));

    z-index: 2;
    line-height: 0;
  }

  .small .indicator {
    --_indicator-offset-x: 7px;
    --_indicator-offset-y: 1px;
  }
  .medium .indicator {
    --_indicator-offset-x: 15px;
    --_indicator-offset-y: 7px;
  }

  .medium .indicator:not(.default) {
    --_indicator-offset-x: 16px;
    --_indicator-offset-y: 8px;
  }

  .medium .indicator.no-content {
    --_indicator-offset-x: 12px;
    --_indicator-offset-y: 4px;
  }
  .large .indicator {
    --_indicator-offset-x: 22px;
    --_indicator-offset-y: 6px;
  }
  .large .indicator.no-content {
    --_indicator-offset-x: 18px;
    --_indicator-offset-y: 2px;
  }
  .extra-large .indicator {
    --_indicator-offset-x: 26px;
    --_indicator-offset-y: 4px;
  }
  .extra-large .indicator.no-content {
    --_indicator-offset-x: 22px;
    --_indicator-offset-y: 0px;
  }

  .indicator.hidden {
    z-index: 0;
    opacity: 0;
  }

  .selectable.selected.disabled .content {
    background-color: var(--maui-color-disabled-background);
    color: var(--maui-color-disabled-foreground);
  }

  .selectable .content {
    border-style: solid;
  }

  .small.selectable .content {
    border-width: 1px;
  }

  .medium.selectable .content {
    border-width: 2px;
  }

  .large.selectable .content,
  .extra-large.selectable .content {
    border-width: 3px;
  }

  .selectable:not(.disabled) .content {
    border-color: var(--maui-color-grey-06);
    background: transparent;
  }

  .selectable:not(.selected) .content {
    font-weight: var(--maui-font-weight-regular);
  }

  .selectable:not(.selected):not(.disabled) .content {
    color: var(--maui-color-text-copy);
  }

  .selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground);
    border-color: var(--maui-color-disabled-background);
    background: transparent;
  }

  .selectable.selected.disabled .content {
    border-color: transparent;
  }

  .selectable.selected:not(.disabled) .content {
    background: var(--maui-color-brand-primary);
    border-color: var(--maui-color-brand-primary);
    color: var(--maui-color-brand-light);
  }

  .inverted .content {
    background-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-text-copy);
  }

  .inverted.selectable:not(.selected, .disabled) .content {
    border-color: var(--maui-color-grey-06);
    color: var(--maui-color-interaction-selection-inverted);
  }

  .inverted.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-selection-inverted);
    border-color: var(--maui-color-interaction-selection-inverted);
    color: var(--maui-color-text-copy);
  }

  .inverted.selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: var(--maui-color-disabled-background-inverted);
    background: transparent;
  }

  .inverted.selectable.selected.disabled .content {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: transparent;
    background: var(--maui-color-disabled-background-inverted);
  }

  .disabled {
    cursor: not-allowed;
  }

  .disabled .indicator ::slotted(maui-indicator) {
    display: none;
  }

  .image {
    display: block;
    width: calc(100% - 2 * var(--_image-inset, 0));
    height: calc(100% - 2 * var(--_image-inset, 0));
    border-radius: 9999vw;
    position: absolute;

    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .inverted .image {
    --_image-inset: 2px;
    inset: var(--_image-inset);
  }

  .inverted.small .image,
  .inverted.medium .image {
    --_image-inset: 1px;
  }

  .image.loaded:not([hidden]) {
    opacity: 1;
  }
=