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

  cursor: var(--custom-cursor, pointer);

  position: relative;

  display: inline-flex;
  gap: 0.25rem;
  align-items: center;

  padding: 0.25rem;
  border-radius: var(--border-radius-messages);

  line-height: 1.125rem;
  color: var(--topic-button-accent-color);

  background-color: var(--background-color);

  &::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: block;

    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-messages);

    opacity: 0.15;
    background-color: var(--topic-button-accent-color);

    transition: opacity 0.15s ease-in-out;
  }

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