@reaction-width: 40px;
@reaction-width-small: 26px;
@reaction-width-large: 60px;

.post-reactions{
	position: relative;

	span{
		display: inline-block;
		border-radius: 50%;
		position: relative;
		line-height: 0px;

		& + span{
			margin-left: 10px;
		}

		svg{
			width: @reaction-width;
			height: @reaction-width;
			display: inline-block;
		}

		&:nth-child(0){ z-index: 920; }
		&:nth-child(1){ z-index: 919; }
		&:nth-child(2){ z-index: 918; }
		&:nth-child(3){ z-index: 917; }
		&:nth-child(4){ z-index: 916; }
		&:nth-child(5){ z-index: 915; }
		&:nth-child(6){ z-index: 914; }
	}
	em{
		width: @reaction-width;
		height: @reaction-width;

		font-style: normal;
		font-family: @font-text;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 0px;
		text-align: center;
		color: #fff;
		display: inline-block;
		position: relative;
		line-height: @reaction-width - 5;
		margin-left: 10px;
		background: #000;
		border-radius: 50%;
	}

	&.small-icons {
		span {
			svg {
				width: @reaction-width-small;
				height: @reaction-width-small;
			}
		}
		em {
			width: @reaction-width-small;
			height: @reaction-width-small;
		}
	}

	.post-action-react{
		position: absolute;
		top: -5px;
		left: -26px;
		border: 1px solid rgb(235, 235, 235);
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 2px 2px 0px rgba(0, 1, 1, 0.04);
		border-radius: 28px;
		text-align: center;
		z-index: 1000;
		line-height: 1em;
		padding-top: 8px;
		padding-bottom: 8px;
		.transition();
		.translateY(-100%);
		opacity: 0;
		visibility: hidden;
		white-space: nowrap;
		padding-left: 10px;
		padding-right: 10px;


		a{
			display: inline-block;
			position: relative;
			margin-left: 3px;
			margin-right: 3px;

			svg{
				width: 34px;
				height: 34px;
				position: relative;
				.transition();
			}

			span{
				position: absolute;
				bottom: 8px;
				left: 50%;
				font-size: 13px;
				font-weight: 700;
				color: #fff;
				background-color: fade(#202020, 80%);
				display: inline-block;
				padding: 7px 12px;
				border-radius: 30px;
				opacity: 0;
				visibility: hidden;
				line-height: 1em;
				.transition();
				.translate(-50%, 100%);
			}

			&:hover{
				svg{
					.translateY(-3px;);
				}

				span{
					bottom: 5px;
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}

	&.not-reaction{
		em{
			top: 0px;
			margin-left: 0px;
		}
	}

	&:hover{
		.post-action-react{
			visibility: visible;
			opacity: 1;
		}
	}

	&.big-style {
		.post-action-react {
			position: static;
			width: 100%;
			border: none;
			visibility: visible;
			opacity: 1;
			margin: 30px 0;
			padding-bottom: 50px;
			box-shadow: none;
			.translateY(0);
			a {
				margin: 0;
				+ a {
					margin-left: 30px;
				}
				svg {
					width: @reaction-width-large;
					height: @reaction-width-large;
				}
				span {
					visibility: visible;
					opacity: 1;
					bottom: -10px;
				}
				&:hover{
					svg{
						.translateY(-15px;);
					}
				}
			}
		}
	}
}