@layer lotek {
  .lt-avatar {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--lt-avatar-size, var(--lt-spacing-10));
    block-size: var(--lt-avatar-size, var(--lt-spacing-10));
    overflow: hidden;
    font-family: inherit;
    font-size: var(--lt-font-size-s);
    font-weight: var(--lt-font-weight-semibold);
    line-height: 1;
    color: var(--lt-color-accent-text);
    background: var(--lt-color-accent-surface);
    border-radius: 50%;
    /* The image can be anything. The ring keeps the shape clear also against
       a light area in the image. An inward `outline` and not a `box-shadow`:
       an inset shadow is painted under the content, and the image covered
       it completely. The longhands, since the shorthand with `solid` is
       reserved for `--lt-focus-ring`. */
    outline-width: 1px;
    outline-style: solid;
    outline-color: var(--lt-color-neutral-border-subtle);
    outline-offset: -1px;
  }

  /* The ring above is an `outline` in the layer, and it beats the browser's
     own focus indicator. An avatar that is a button, for example for a
     profile menu, therefore gets its focus ring from here. */
  .lt-avatar:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  .lt-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .lt-avatar[data-size="small"] {
    inline-size: var(--lt-spacing-6);
    block-size: var(--lt-spacing-6);
    font-size: var(--lt-font-size-xs);
  }

  .lt-avatar[data-size="large"] {
    inline-size: var(--lt-spacing-16);
    block-size: var(--lt-spacing-16);
    font-size: var(--lt-font-size-l);
  }

  .lt-avatar[data-variant="square"] {
    border-radius: var(--lt-avatar-radius, var(--lt-spacing-1));
  }

  /* Several profile pictures that overlap. The order is reversed in CSS: the
     first element in the markup sits furthest to the right. */
  .lt-avatar-stack {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lt-avatar-stack > * + * {
    margin-inline-end: var(
      --lt-avatar-stack-overlap,
      calc(var(--lt-spacing-2) * -1)
    );
  }

  /* The inward ring comes from the `outline` above. The shadow outside
     separates the overlapping pictures. An `outline` is painted after all
     the content in the stacking context, so without a separate context per
     avatar the ring of the one behind lay on top of the picture of the one
     in front, like an arc through it. With `isolation` each avatar is
     painted by itself, in order, and the one in front covers the one
     behind, ring and all. */
  .lt-avatar-stack .lt-avatar {
    box-shadow: 0 0 0 2px var(--lt-color-neutral-canvas);
    isolation: isolate;
  }

  /* The separate context also applies to the focus ring: an avatar that is a
     button and sits behind another had its ring covered where the
     neighbour overlaps. The one with focus is lifted above its neighbours
     so the ring shows in full. */
  .lt-avatar-stack .lt-avatar:focus-visible {
    position: relative;
    z-index: 1;
  }
}