.avatar {
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 0 1px var(--border-subdued);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  user-select: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.avatar.xs,
.avatar.extra-small {
  width: var(--unit-6);
  height: var(--unit-6);
  font-size: var(--unit-3);
}

.avatar.sm,
.avatar.small {
  width: var(--unit-7);
  height: var(--unit-7);
  font-size: var(--unit-3);
}

.avatar,
.avatar.md,
.avatar.medium {
  width: var(--unit-9);
  height: var(--unit-9);
  font-size: var(--unit-4);
}

.avatar.lg,
.avatar.large {
  width: var(--unit-10);
  height: var(--unit-10);
  font-size: var(--unit-5);
}

.avatar.xl,
.avatar.extra-large {
  width: var(--unit-11);
  height: var(--unit-11);
  font-size: var(--unit-6);
}

.avatar.xxl,
.avatar.extra-extra-large {
  width: var(--unit-12);
  height: var(--unit-12);
  font-size: var(--unit-7);
}

.avatar.xxxl,
.avatar.extra-extra-extra-large {
  width: var(--unit-14);
  height: var(--unit-14);
  font-size: var(--unit-8);
}

.avatar,
.avatar.round {
  border-radius: var(--rounded-full);
}

.avatar.square {
  border-radius: var(--rounded-4);
}

.avatar img,
.avatar .image {
  display: flex;
  object-fit: cover;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}