@import "./variables";

.#{$component-prefix}avatar-group {
  display: flex;

  .#{$component-prefix}avatar {
    border: $avatar-border-width solid $avatar-border-color;
  }

  &--spacing-mini {
    padding-left: $avatar-spacing-mini;

    .#{$component-prefix}avatar {
      margin-left: calc(#{$avatar-spacing-mini} * -1);
    }
  }

  &--spacing-small {
    padding-left: $avatar-spacing-small;

    .#{$component-prefix}avatar {
      margin-left: calc(#{$avatar-spacing-small} * -1);
    }
  }

  &--spacing-medium {
    padding-left: $avatar-spacing-medium;

    .#{$component-prefix}avatar {
      margin-left: calc(#{$avatar-spacing-medium} * -1);
    }
  }

  &--spacing-large {
    padding-left: $avatar-spacing-large;

    .#{$component-prefix}avatar {
      margin-left: calc(#{$avatar-spacing-large} * -1);
    }
  }
}