@charset "UTF-8";
/* Кружки историй (Figma: Stories 4720:70171). Кружок 80 / 100 / 108 вплотную, аватар 72 / 88 / 96 по центру.
   Активная история (__button--active) — кольцо white-20 и дуга прогресса green поверх него (от 12 часов
   по часовой); остальные — без кольца, аватар затемнён black-40, hover/фокус снимает затемнение.
   Прогресс — переменная --stories-progress (0…1) на кнопке, её ставит JS по ходу ролика;
   без JS — четверть, как в макете.
   --light — на светлом фоне: кольцо black-8, дуга green-dark.
   API: --stories-display — родитель скрывает кружки (none) на нужных брейкпоинтах, не завися от порядка CSS. */
.stories {
  --_ring: var(--color-white-20);
  --_arc: var(--color-green);
  display: var(--stories-display, flex);
  justify-content: center;
}
.stories--light {
  --_ring: var(--color-black-8);
  --_arc: var(--color-green-dark);
}
.stories__button {
  --_image-opacity: 0.6;
  position: relative;
  display: block;
  width: 5rem;
  height: 5rem;
  padding: 0.25rem;
  background-color: var(--color-black);
  background-clip: content-box;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .stories__button {
    width: 6.25rem;
    height: 6.25rem;
    padding: 0.375rem;
  }
}
@media (min-width: 1280px) {
  .stories__button {
    width: 6.75rem;
    height: 6.75rem;
  }
}
@media (hover: hover) {
  .stories__button:hover {
    --_image-opacity: 1;
  }
}
.stories__button:focus-visible {
  --_image-opacity: 1;
}
.stories__button--active {
  --_image-opacity: 1;
}
.stories__button--active::before, .stories__button--active::after {
  position: absolute;
  inset: 0;
  border: 0.125rem solid var(--_ring);
  border-radius: 50%;
  content: "";
}
.stories__button--active::after {
  border-color: var(--_arc);
  mask-image: conic-gradient(var(--color-black) calc(var(--stories-progress, 0.25) * 1turn), transparent 0);
}
.stories__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: var(--_image-opacity);
  transition: opacity var(--transition-duration) var(--transition-ease);
}
.stories__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}