@layer ui-reset, ui;

/* avatar */
@layer ui {
  .avatar {
    aspect-ratio: 1;
    height: calc(var(--ui-spacing-2) * 2 + 1lh);
    border-radius: var(--ui-rounded-full);
    background-color: var(--ui-neutral-200);
    color: var(--ui-neutral-700);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding-block: 0;
    padding-inline: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.14286rem;
    display: inline-flex;
    position: relative;

    & + .avatar {
      margin-inline-start: -.6em;
    }

    &:has( + .avatar) {
      mask-image: radial-gradient(100% 100% at calc(50% + (var(--ui-spacing-2) + .5lh + .6em - 2px)), #0000 0% calc(50% + 2px), #000 0% 100%);
    }

    & img {
      object-fit: cover;
      border-radius: inherit;
      width: 100%;
      height: 100%;
    }

    &.square {
      border-radius: var(--ui-rounded-3);
    }

    & > .badge {
      width: 1.2em;
      height: 1.2em;
      box-shadow: 0 0 0 .15em var(--ui-background-color);
      padding: .2em;
      position: absolute;
      bottom: 0;
      right: 0;

      & svg {
        width: .8em;
        height: .8em;
      }
    }
  }
}