.аvatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  width: var(--max-width);
  height: var(--max-height);
  border: 0;
  text-transform: uppercase;
}

.аvatar:not(.аvatar--read-only):hover {
  cursor: pointer;
}

.аvatar:focus {
  outline: none;
}

.аvatar--radius-primary {
  border-radius: var(--border-radius-top-left-primary)
    var(--border-radius-top-right-primary)
    var(--border-radius-bottom-right-primary)
    var(--border-radius-bottom-left-primary);
}

.аvatar--radius-secondary {
  border-radius: var(--border-radius-top-left-secondary)
    var(--border-radius-top-right-secondary)
    var(--border-radius-bottom-right-secondary)
    var(--border-radius-bottom-left-secondary);
}

.аvatar__img {
  display: block;
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.аvatar--loading {
  animation: 1.5s shine linear infinite;
  background-image: linear-gradient(
    90deg,
    #e9e9f1 0%,
    #f7f7fa 25%,
    #f7f7fa 64.78%,
    #e9e9f1 100%
  );
  background-size: 200% 100%;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}