.badge {
  flex-shrink: 0;

  min-width: 1.375rem;
  height: 1.375rem;
  margin-inline-start: 0.5rem;
  padding: 0 0.4375rem;
  border-radius: 0.75rem;

  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.4375rem;
  color: white;
  text-align: center;

  :global(body.is-ios) &,
  :global(body.is-macos) & {
    line-height: 1.375rem;
  }
}

.transition {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 1.25rem;

  opacity: 1;

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  &:not(:global(.open)) {
    transform: scale(0);
    opacity: 0;
  }

  &:not(:global(.shown)) {
    display: none;
  }

  &:global(.closing) {
    transition:
      transform 0.2s ease-out,
      opacity 0.2s ease-out;
  }
}

.wrapper {
  display: flex;
}

.mention,
.unread,
.unopened {
  color: var(--color-white);
  background: var(--color-green);
}

.unopened {
  align-self: center;

  width: 0.5rem;
  min-width: auto;
  height: 0.5rem;
  min-height: auto;
  padding: 0;
}

.pinned {
  display: flex;
  justify-content: flex-end;

  padding: 0;

  font-size: 1rem;
  color: var(--color-list-icon);

  background-color: transparent;
}

.reaction {
  background-color: #ed504f;
}

.round {
  display: grid;
  place-content: center;

  width: 1.375rem;
  height: 1.375rem;
  padding: 0.25rem;

  font-size: 1rem;
}

.miniapp {
  z-index: calc(var(--z-chat-ripple) + 1);
  height: auto !important;
  padding: 0 0.4375rem !important;
  font-size: 0.875rem !important;
}

.muted {
  background-color: var(--color-gray);
}

.selected:not(.onAvatar) {
  .badge:not(.pinned) {
    color: var(--color-chat-active);
    background-color: var(--color-white);

    &.muted {
      color: var(--color-white);
      background-color: #ffffff33;
    }
  }
}

.onAvatar .badge {
  box-shadow: 0 0 0 2px var(--outline-color);
}