/* Кольцо историй на аватарке компании (ui/story-ring.js): дуга на
   каждую живую историю, серая — у просмотренной. Обёртка чуть
   больше самой аватарки (identity.css: 17.9cqw), чтобы кольцо
   не наезжало на снимок. Литералы цвета — только themes.css. */

.story-ring-wrap {
  position: relative;
  flex: none;
  width: 17.9cqw;
  height: 17.9cqw;
}

.story-ring-wrap.has-story {
  cursor: pointer;
}

.story-ring-wrap .identity__photo {
  position: absolute;
  inset: 2.6cqw;
}

.story-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.story-ring__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke var(--fast) var(--ease);
}

.story-ring__arc.is-seen { stroke: var(--line); }

.story-ring__add {
  position: absolute;
  right: -.5cqw;
  bottom: -.5cqw;
  display: grid;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border: 2px solid var(--bg-app);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.story-ring__add .icon { width: 3.3cqw; height: 3.3cqw; }