FrankerFaceZ/styles/chat.scss

.ffz-cheer {
	display: inline-block;
	height: 2.8rem;
	line-height: 2.8rem;
	padding-left: 3rem;
	margin: -.5rem .5rem;
	background-position: 0;
	background-repeat: no-repeat;

	&:after {
		font-weight: bold;
		content: attr(data-amount)
	}
}

.ffz-cheer-preview {
	height: 11.2rem;
	width: 11.2rem;
}


.ffz-badge {
	display: inline-block;
	min-width: 1.8rem;
	height: 1.8rem;
	margin: 0 .3rem .2rem 0;
	background-position: center;
	vertical-align: middle;
}


.ffz__tooltip .ffz-i-lock {
	position: absolute;
	bottom: 0; right: 0;
	border-radius: .2rem;
	font-size: 1rem;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
}


.ffz--favorite {
	position: absolute;
	bottom: 0; right: 0;

	font-size: 1rem;
	border-radius: .5rem;
	color: gold;

	background-color: rgba(0,0,0,0.5);

	.ffz__tooltip & {
		bottom: .1rem; right: .1rem;
		padding: .2rem 0;
	}
}


.modified-emote {
	~ .chat-line__message--emote {
		position: relative;
		z-index: 1
	}

	position: relative;
	z-index: 0;

	span {
		position: absolute;
		top: -20px; bottom: -20px; left: -20px; right: -20px;
		margin: auto;
		pointer-events: none;

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