.root {
  --custom-emoji-size: 1.125rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  line-height: 1.125rem;
  background-color: var(--background-color);
  border-radius: var(--border-radius-messages);
  color: var(--topic-button-accent-color);
  cursor: var(--custom-cursor, pointer);

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: var(--topic-button-accent-color);
    opacity: 0.15;
    transition: opacity 0.15s ease-in-out;
    border-radius: var(--border-radius-messages);
  }

  &:hover::before {
    opacity: 0.10;
  }
}