.MessageContextMenu {
  position: absolute;
  font-size: 1rem;

  &_items {
    overflow: auto;
    padding: 0.5rem 0;
    overscroll-behavior: contain;

    &-hidden {
      opacity: 0;
      transition: 300ms opacity;
    }
  }

  &.compact &_items {
    padding: 0.25rem 0;
  }

  .bubble {
    overflow: initial;
    padding: 0 !important;
  }

  &.with-reactions .bubble {
    background: none !important;
    backdrop-filter: none !important;
    box-shadow: none;
    padding: 3.5rem 0 0 !important;
  }

  &.with-reactions &_items {
    background: var(--color-background-compact-menu);
    backdrop-filter: blur(10px);
    box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
    border-radius: var(--border-radius-default);
    padding: 0.25rem 0;

    body.no-menu-blur & {
      background: var(--color-background);
      backdrop-filter: none;
    }
  }

  .backdrop {
    touch-action: none;
  }

  &--seen-by {
    max-width: 14rem;
  }

  &--seen-by-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .avatars {
    display: flex;
    align-self: center;
    margin-inline-start: auto;
    padding-inline-start: 1rem;

    .Avatar {
      border: 0.0625rem solid var(--color-background);
      margin-right: 0;
      box-sizing: content-box;

      &:not(:first-child) {
        margin-left: -0.1875rem;
      }
    }
  }
}