.avatar {
  --avatar-size: 96px;
  --avatar-badge-size: calc(var(--avatar-size) / 5);

  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
  min-height: var(--avatar-size);
  line-height: var(--avatar-size);
  border-radius: var(--avatar-size);
  font-size: calc(var(--avatar-size) / 2.8);
  background: $gray-200;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  letter-spacing: -1px;

  l-i {
    --size: calc(var(--avatar-size) / 2);
  }

  >svg {
    width: calc(var(--avatar-size) / 2);
    height: calc(var(--avatar-size) / 2);
    fill: currentColor;
  }

  &:hover {
    text-decoration: none;
  }

  img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--avatar-size);
  }

  .avatar-badge {
    position: absolute;
    background: $white;
    top: calc(var(--avatar-badge-size) / 5);
    right: calc(var(--avatar-badge-size) / 5);
    min-width: var(--avatar-badge-size);
    height: var(--avatar-badge-size);
    border-radius: var(--avatar-badge-size);
    box-shadow: 0 0 0 1px $card-bg;
    z-index: 3;
    font-size: 0.8rem;
    line-height: var(--avatar-badge-size);
    text-align: center;

    &.avatar-badge-text {
      padding: 0 0.25rem;
    }

    &.avatar-badge-bottom {
      top: auto;
      bottom: calc(var(--avatar-badge-size) / 5);
    }

    &.avatar-badge-start {
      right: auto;
      left: calc(var(--avatar-badge-size) / 5);
    }

    &.online {
      background: $success;
    }

    &.offline {
      background: $gray-400;
    }

    l-i {
      vertical-align: auto;
      --size: calc(var(--avatar-badge-size) * 0.75);
    }
  }

  .avatar-title {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}

.avatar-thumb {
  --avatar-size: 44px;
}

.avatar-group {
  .avatar {

    // Allow focus on hover
    &:focus,
    &:hover {
      z-index: 2;
    }
  }
}