/* Небольшие фирменные элементы, повторяемые в разных типах страниц. */

.avatar {
  flex: none;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 600;
}

.avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.avatar--md {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.avatar--sidebar {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.avatar--article {
  width: 48px;
  height: 48px;
  font-size: 19px;
}

.avatar--author-card {
  width: 84px;
  height: 84px;
  font-size: 34px;
}

.avatar--purple {
  background: hsl(264 45% 90%);
  color: hsl(264 52% 38%);
}

.avatar--orange {
  background: hsl(24 45% 90%);
  color: hsl(24 52% 38%);
}

.avatar--blue {
  background: hsl(210 45% 90%);
  color: hsl(210 52% 38%);
}

.avatar--green {
  background: hsl(150 45% 90%);
  color: hsl(150 52% 34%);
}

.avatar--pink {
  background: hsl(320 45% 90%);
  color: hsl(320 52% 36%);
}

.avatar--dynamic {
  --avatar-hue: 264;
  background: hsl(var(--avatar-hue) 45% 90%);
  color: hsl(var(--avatar-hue) 52% 38%);
}

html[data-theme="dark"] .avatar--purple,
html[data-theme="dark"] .avatar--orange,
html[data-theme="dark"] .avatar--blue,
html[data-theme="dark"] .avatar--green,
html[data-theme="dark"] .avatar--pink {
  background: hsl(264 22% 26%);
  color: var(--ink);
}

.media-placeholder {
  --media-hue: 264;
  background-color: hsl(var(--media-hue) 16% 82%);
  background-image:
    radial-gradient(
      120% 90% at 78% 18%,
      hsl(var(--media-hue) 30% 88% / 0.9),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      hsl(var(--media-hue) 14% 90%),
      hsl(var(--media-hue) 16% 82%)
    );
}

.media-hue-32 {
  --media-hue: 32;
}

.media-hue-118 {
  --media-hue: 118;
}

.media-hue-186 {
  --media-hue: 186;
}

.media-hue-264 {
  --media-hue: 264;
}

.media-hue-328 {
  --media-hue: 328;
}

/* Цветовые роли темы, которых нет в стандартной палитре Bootstrap. */
.text-ink-2 {
  color: var(--ink-2);
}

.text-ink-3 {
  color: var(--ink-3);
}

.font-mono {
  font-family: var(--font-mono);
}

.section-label {
  margin-bottom: 14px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.empty-state {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-2);
}