@use '../../theme/styles' as theme;

.wr-avatar {
  // Defaults — `shape="rounded"` (the default) gets the soft rounded
  // square look. Variant modifiers below override the radius / corner
  // treatment.
  --wr-avatar-radius: 10%;
  --wr-avatar-img-opacity: 0;
  --wr-avatar-ring: var(--wr-color-border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--wr-avatar-radius);
  box-shadow: inset 0 0 0 1px var(--wr-avatar-ring);

  &--square {
    --wr-avatar-radius: 0;
  }

  &--circle {
    --wr-avatar-radius: 50%;
  }

  &--squircle {
    // iOS-style smooth corners. `corner-shape: squircle` is supported
    // in Chrome 145+; browsers without it fall back to the same 10%
    // radius as `shape="rounded"`, which is the closest visual match.
    @include theme.smooth-br(18%);
  }

  &--loaded {
    --wr-avatar-img-opacity: 1;
    --wr-avatar-ring: transparent;
  }

  &__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    opacity: var(--wr-avatar-img-opacity);
    transition: opacity var(--wr-transition-base);
  }

  &__spin {
    position: absolute;
    color: var(--wr-color-text-faint);
    --wr-spinner-size: 40%;
  }
}