/* MENTIONS */
%themeDark {
  %mention {
    padding: 0 4px;
    border-radius: 5px;
    line-height: 22px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    background-color: hsla(0, 0%, 100%, 0.04);
    color: hsla(0, 0%, 100%, 0.7);
    &:hover {
      background-color: $main-color;
      color: #fff;
    }

    &%mentionIcon {
      padding-left: 1.2rem;
    }
  }
  strong {
    >%mention {
      font-weight: 600;
    }
  }
  %mentioned {
    %mention%mentionedInteractive {
      color: $main-color;
      &:hover {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}
%mentioned {
  background-color: hsla(0, 0%, 100%, 0.05);
  &%message%messageSelected,
  %mouseModeFullMotion &:hover {
    background-color: hsla(0, 0%, 100%, 0.08);
  }
  &::before {
    background-color: $main-color;
  }
}