/* ==========================================================================
   Config
   ========================================================================== */
$avatar-group-item-spacing: 0.115em;
$avatar-group-size-small: 24px !default;
$avatar-group-size-micro: 20px !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-avatar-group {
  display: flex;
  gap: 4px;
}

.gui-avatar-group-stacked {
  gap: 0;
  margin-right: $avatar-group-item-spacing;

  .gui-avatar-group__item {
    margin-right: -$avatar-group-item-spacing;
    z-index: 1;
  }
}

.gui-avatar-group .gui-dropdown__trigger {
  cursor: pointer;
  border-radius: $avatar-border-radius;

  &.gui-avatar-plus-trigger .gui-avatar {
    background: none;
  }

  &:hover .gui-avatar,
  &:focus .gui-avatar,
  &.gui-is-active .gui-avatar {
    background: $avatar-highlighted-background;

    .gui-avatar__initials {
      color: $avatar-highlighted-color;
    }
  }
}

.gui-avatar-group .gui-dropdown__content {
  z-index: 9999;
  max-width: 300px;
  max-height: 300px;
}

/* ==========================================================================
   Modifiers
   ========================================================================== */

.gui-avatar-group--small {
  .gui-avatar,
  .gui-avatar__initials {
    width: $avatar-group-size-small;
    height: $avatar-group-size-small;
  }
}

.gui-avatar-group--micro {
  .gui-avatar,
  .gui-avatar__initials {
    width: $avatar-group-size-micro;
    height: $avatar-group-size-micro;
  }
}