/* Avatar groups
 * -------------------------------------------------------------------------- */

.avatar-group {
  display: flex;
  align-items: center;

  .avatar { margin-right: 0.2rem; }
}

.avatar-group--inline { display: inline-flex; }

.avatar-group--centered {
  justify-content: center;
}

/* Avatars
 * -------------------------------------------------------------------------- */

.avatar {
  width: 2.625em;
  height: 2.625em;
  border-radius: 100%;
  z-index: 1;
  display: block;
  position: relative;
  color: transparent;
  background-color: var(--color-bg--surface-glint-opaque);
}

.avatar--big {
  width: 4em;
  height: 4em;
}

.avatar--small,
.avatar-group--small .avatar {
  width: 2.25em;
  height: 2.25em;
}

.avatar--tiny,
.avatar-group--tiny .avatar {
  width: 1.5em;
  height: 1.5em;
}

.avatar--miny,
.avatar-group--miny .avatar {
  width: 1.2em;
  height: 1.2em;
}

.avatar--micro,
.avatar-group--micro .avatar {
  width: 0.9em;
  height: 0.9em;
}

.avatar-group--stacked {
  .avatar {
    box-shadow: 0 0 0 1px var(--color-bg--main);
    margin-bottom: 1px;
    margin-right: 0;

    [data-seen] & { box-shadow: 0 0 0 1px var(--color-bg--surface-glint-opaque); }
  }

  > * + * { margin-left: -0.25em; }
}

.avatar-group--stacked-tight {
  > * + * { margin-left: -0.5em; }
}

.avatar-group--in-popup {
  .avatar { box-shadow: 0 0 0 1px rgba(var(--rgb-purple), 0.9); }
}

.avatar--bundled {
  width: 1.9em;
  height: 1.9em;
  border: 2px solid var(--color-bg--main);
  border-radius: 0.4rem;
  margin-top: 0;
  margin-left: -0.2em;
  background-color: var(--color-bg--surface-glint-opaque);

  + .avatar--bundled {
    position: absolute;
    margin-top: 0.3em;
    margin-left: 0.2em;
  }

  &.avatar--thread {
    border-radius: 100%;
    margin-top: 0.1em;

    + .avatar--thread {
      margin-top: 0.4em;
    }
  }

  [data-seen] & { border-color: var(--color-bg--surface-glint-opaque); }
}

.avatar--faded {
  filter: grayscale(100%);
  opacity: 50%;
}