@use '../colors';

@mixin layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.root {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  width: var(--avatar-size, 72px);
  height: var(--avatar-size, 72px);
  color: var(--avatar-text-color, #{colors.$basic-gray87});
  &::before {
    @include layer;
    content: '';
    display: block;
    background: var(--avatar-color, #{colors.$basic-gray4});
    opacity: var(--avatar-color-opacity, 1);
  }
  &.image-overlay::after {
    @include layer;
    content: '';
    pointer-events: none;
    background: #000;
    opacity: 0.04;
  }
}

.image {
  @include layer;
  object-fit: cover;
}

.content {
  font-size: var(--avatar-font-size, calc(var(--avatar-size, 72px) / 3));
  position: relative;
  font-weight: 600;
  white-space: nowrap;

  // ВАЖНО: чтобы например обертка в виде ссылки не накидывала text-decoration: underline
  text-decoration: none;
}