.Viewers {
  --Avatar-size: var(--iconSize-m);

  padding-left: calc(var(--Avatar-size) / 5);
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--time-xl);

  > .Viewers-some,
  > .Viewers-none {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  > .Viewers-some {
    display: flex;
    position: relative;
    transform: rotateX(180deg);
    white-space: nowrap;

    > .Viewers-viewer {
      margin-left: calc(0px - var(--Avatar-size) / 5);
      position: relative;

      &::before {
        background: var(--color-white);
        border-radius: 50%;
        bottom: -1px;
        content: '';
        left: -1px;
        position: absolute;
        right: -1px;
        top: -1px;
      }

      &[data-editing]::before {
        background: var(--color-yellow4);
        bottom: -4px;
        left: -4px;
        right: -4px;
        top: -4px;
      }

      &[data-locked] {
        order: 1;
        z-index: 1;
      }

      &[data-locked]::after {
        .Icon;

        background: transparent;
        bottom: 0;
        content: 'lock';
        font-size: var(--fontSize-xs);
        left: var(--fontSize-s);
        position: absolute;
        top: inherit;
      }
    }
  }

  &[data-some] {
    transform: rotateX(180deg);
  }
}
