@use "../../style/variables" as *;

.#{$prefix}-avatar {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--ty-avatar-bg);
  color: var(--ty-avatar-color);
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
  border: var(--ty-avatar-border-width) solid var(--ty-avatar-border);

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

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

  &__presence {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    box-shadow: var(--ty-avatar-presence-shadow);
    height: var(--ty-avatar-presence-size);
    width: var(--ty-avatar-presence-size);

    &_online {
      background-color: var(--ty-avatar-presence-color-online);
    }

    &_busy {
      background-color: var(--ty-avatar-presence-color-busy);
    }

    &_away {
      background-color: var(--ty-avatar-presence-color-away);
    }

    &_offline {
      background-color: var(--ty-avatar-offline-color);
    }
  }

  &_circle {
    border-radius: 50%;

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

  &_square {
    border-radius: var(--ty-avatar-border-radius);
  }

  &_clickable {
    cursor: pointer;
  }

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

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