﻿@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

.suggestions
{
	h2
	{
		font: 16pt @title-font;
	}

	.back-to-feed
	{
		color: @accent-color;
		font: 10pt @title-font;
	}

	ul
	{
		margin: 0;
		padding: 0;
		margin-top: 20px;

		html[dir='rtl'] &
		{
			padding: 0;
		}

		li
		{
			list-style: none;
			padding: 15px 0;
			display: inline-block;
			margin-right: 40px;

			html[dir='rtl'] &
			{
				.margin-left-right(40px, 0);
			}

			.tag
			{
				a.title
				{
					display: inline-block;
					margin-bottom: 10px;
					font: bold 13pt @title-font;
					text-decoration: none;
					color: #222;
					max-width: 180px;
				}

				.thumbnail
				{
					width: 180px;
					height: 110px;
					background: url(/img/v2/shared/page.png) center no-repeat;
					display: table-cell;
					box-shadow: 0 0 5px 1px #ccc;

					div
					{
						width: 180px;
						height: 110px;
						background-repeat: no-repeat;
					}
				}

				.follow
				{
					text-decoration: none;
					display: inline-block;
					margin-top: 10px;
					background-color: @accent-color;
					color: white;
					font: bold 9pt @title-font;
					padding: 4px 5px;
					border-radius: 3px;

					i
					{
						margin: 0 5px 0 0;

						html[dir='rtl'] &
						{
							margin: 0 0 0 5px;
						}
					}
				}

				.statistics
				{
					display: inline-block;
					position: relative;
					float: right;
					margin-top: 10px;

					html[dir='rtl'] &
					{
						float: left;
					}

					.statistics-icon(@leftPosition: 0px)
					{
						display: inline-block;
						width: 16px;
						height: 15.5px;
						background-image: url(/img/v2/page/page-toolbar-icons.png?v=2);
						background-position: @leftPosition 0px;
						margin-right: 3px;
						position: relative;
						top: 2px;

						html[dir='rtl'] &
						{
							.margin-left-right(3px, 0);
						}
					}

					.views
					{
						.statistics-icon();
						opacity: 0.7;
					}

					.pins
					{
						.statistics-icon(82px);
						opacity: 0.7;
					}

					span
					{
						font-size: 9pt;
					}
				}
			}
		}
	}
}
