:root {
  --subtle-avatar-shadow: inset 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
}

.drac-avatar {
  box-sizing: border-box;
  border-radius: 100%;
  border-style: solid;
  border-width: 1px;

  text-transform: uppercase;

  height: 4.4rem;
  width: 4.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.drac-avatar-lg-stroke {
  border-width: 3px;
}

.drac-avatar-no-border {
  border-width: 0;
  box-shadow: var(--subtle-avatar-shadow);
}

.drac-avatar-subtle {
  filter: grayscale(100%);
  box-shadow: var(--subtle-avatar-shadow);
}

.drac-avatar .drac-text {
  text-transform: uppercase;

  /* Fira code is adding 1px to the bottom of the span */
  transform: translateY(1px);
}