button.blogpost {
	display: flex;
	display: -webkit-flex;
	
	transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}
button.blogpost.hidden {
	opacity: 0;
	
	pointer-events: none;
}

button.blogpost div.avatar {
	width: 3rem;
	height: 3rem;
	margin-right: 1rem;
	border: 2px solid var(--callout-alt);
	border-radius: 1.5rem;
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	flex-grow: 0;
	-webkit-flex-grow: 0;
	
	background-color: #fff;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

button.blogpost div.message {
	
	position: relative;
	top: 0;
	left: 0;
	
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	
	padding: .5rem 1rem;
	margin: .25rem 0;
	border-radius: .5rem;
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	flex-grow: 1;
	-webkit-flex-grow: 1;
	
	background-color: #fff;
	
	color: var(--body-inverse-text);
	font-size: .8rem;
	
	transition: transform .3s ease-in-out;
	-webkit-transition: transform .3s ease-in-out;
}
button.blogpost:hover div.message {
	transform: scale3d(1.3, 1.3, 1);
	-webkit-transform: scale3d(1.3, 1.3, 1);
}

button.blogpost div.message:before {
	content: "";
	
	position: absolute;
	top: 50%;
	right: calc(100% - 1px);
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .5rem .75rem .5rem 0;
	border-color: transparent #fff transparent transparent;
	
	transform: translate3d(0, -50%, 0);
	-webkit-transform: translate3d(0, -50%, 0);
}

button.blogpost div.message i.fa-solid {
	font-size: 1.25rem;
}