@import "/UI/Theme.scss";

Feed
{
	position: absolute;
	top: 10%;
	right: 10%;
	border-radius: 20px;
	flex-direction: column;
	align-items: flex-end;
	font-size: 22px;
	font-family: $body-font;
	font-weight: semibold;
	color: #fff4;
	text-shadow: 0px 0px 5px #fffa;
	gap: 4px;
	margin: auto;
	z-index: -1000;

	&.hide
	{
		opacity: 0;
	}
}

Feed > *
{
	padding: 0px 16px;
	top: 0px;
	left: -16px;
	height: 50px;
	transition: all 0.1s ease-out;
	opacity: 1;
	transform: scale( 1 );
	position: relative;
	gap: 16px;
	align-items: center;
	
	.icons
	{
		gap: 0px;
	}

	.icon
	{
		transition: all 0.1s ease-in;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-tint: #fff4;
		height: 80%;
		transform: rotateY(180deg);
	}

	&:intro
	{
		transform: scale( 0.7 );
		left: 200px;
		height: 0px;
		opacity: 0;
	}

	&:outro
	{
		left: 300px;
		height: 0px;
		opacity: 0;
		transition: all 0.2s ease-in;
	}
	
	&.is-me
	{
		border-radius: 8px;
		background-color: #0c202faa;
	}

	&.important
	{
		position: relative;
		animation: bounce-scale 0.25s infinite alternate;
	}
}

@keyframes bounce-scale
{
	0%
	{
		transform: scale(1);
	}

	100%
	{
		transform: scale(1.1);
	}
}