// Base styles
.dry-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  // Sizes
  &--xs {
    width: 24px;
    height: 24px;
  }
  &--sm {
    width: 32px;
    height: 32px;
  }
  &--med {
    width: 48px;
    height: 48px;
  }
  &--lg {
    width: 64px;
    height: 64px;
  }
  &--xl {
    width: 80px;
    height: 80px;
  }
  &--2xl {
    width: 96px;
    height: 96px;
  }

  // States
  &--default {
    /* default styles */
  }
  &--hover {
    /* hover styles */
  }
  &--focused {
    /* focus styles */
  }
  &--disabled {
    opacity: 0.5;
  }

  // Variants
  &--image {
    /* specific styles for image variant */
  }
  &--online {
    /* specific styles for online variant */
  }
  &--company {
    /* specific styles for company variant */
  }
  &--verified {
    /* specific styles for verified variant */
  }
  &--addButton {
    /* specific styles for add button variant */
  }
  &--group {
    /* specific styles for group variant */
  }
  &--labelGroup {
    /* specific styles for label group variant */
  }
  &--profilePhoto {
    /* specific styles for profile photo variant */
  }
}