@import '../../style/variables';

.#{$prefix}avatar {
  box-sizing: border-box;
  font-family: $font-family;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: $avatar-bg;
  color: $avatar-color;
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
  user-select: none;
  border: 2px solid #fff;

  &__img {
    width: 100%;
    height: 100%;
  }

  &__icon {
    color: $avatar-color;
  }

  &__text {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
    transform: translateX(-50%);
  }

  &__presence {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0.1rem #fff;
    height: 0.4em;
    width: 0.4em;

    &_online {
      background-color: $green-color;
    }

    &_busy {
      background-color: $red-color;
    }

    &_away {
      background-color: $yellow-color;
    }

    &_offline {
      background-color: $gray-color;
    }
  }

  &_circle {
    border-radius: 50%;

    .#{$prefix}avatar__img {
      border-radius: 50%;
    }
  }

  &_square {
    border-radius: $avatar-border-radius;
  }

  &_clickable {
    cursor: pointer;
  }

  &-group {
    .#{$prefix}avatar {
      z-index: 1;

      & + .#{$prefix}avatar {
        margin-left: -0.7em;
      }

      &:hover {
        z-index: 2;
      }
    }
  }
}