.avatar {
  composes: circle from '../styles.css';
  composes: white from '../styles.css';
  composes: bg-silver from '../styles.css';
  composes: default-border from '../styles.css';
  composes: default-font from '../styles.css';
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.9rem;
}

.avatar > :global(svg),
.avatar > :global(i) {
  width: 2rem;
  height: 3rem;
  line-height: 3rem;
  fill: currentColor;
}

.avatar > :global(img) {
  width: 100%;
  height: 100%;
}

.image {
  composes: circle from '../styles.css';
  composes: bg-transparent from '../styles.css';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.letter {
  display: block;
  width: 100%;
  line-height: 3rem;
  cursor: default;
}