@import '../default.less';
@import '../mixins.less';

@royal-blue: #2050be;

.bookmarks-data
{
	&.wrapper
	{
		padding-top: 30px;
		width: 100%;
	}

	.content
	{
		margin-top: 16px;

		.item
		{
			margin-bottom: 40px;


			.title
			{
				font: bold 18px @title-font;
				line-height: 22px;
				color: #000;
				text-decoration: none;
				outline: none;
				display: block;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

				&:hover
				{
					cursor: pointer;
					color: @royal-blue;
				}
			}

			.dataset
			{
				display: inline-block;
				max-width: 95%;
				overflow: hidden;
			}

			.info
			{
				margin-left: 32px;
				font: 14px @text-font;
				line-height: 22px;
				color: #000;

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

				p
				{
					margin: 0;

					span
					{
						font-weight: bold;
					}

					a
					{
						color: #000;
						text-decoration: none;
						outline: none;

						&:hover
						{
							cursor: pointer;
							color: @royal-blue;
						}
					}
				}
			}

			&.hide
			{
				visibility: collapse;
				display: none;
			}
		}

		.timeseries
		{
			margin-top: 14px;
			margin-left: 44px;
			text-align: left;

			&_check
			{
				padding-left: 10px;

				html[dir=rtl] &
				{
					.padding-left-right(0, 10px);
				}
			}

			table
			{
				width: 100%;
			}

			html[dir=rtl] &
			{
				.margin-left-right(0, 44px);
				text-align: right;
			}

			.row
			{
				height: 40px;
				cursor: pointer;
				&.grey
				{
					background-color: #f5f5f5;
				}
			}

			.header
			{
				font: bold 16px @title-font;
				line-height: 28px;
				color: #000;

				.check
				{
					width: 5%;
				}

				.name
				{
					width: 70%;
				}

				.range
				{
					width: 20%;
				}

				.open
				{
					width: 5%;
				}
			}

			.body
			{
				.name_value
				{
					padding: 5px 0;

					a
					{
						text-decoration: none;
						outline: none;

						&:hover
						{
							cursor: pointer;
							color: @royal-blue;
						}
					}
				}

				.range_value
				{
					padding: 5px 0;
				}

				.open_value
				{
					display: block;
					background-image: url('/img/v7/shared/input-arrow.svg');
					background-position: center;
					width: 12px;
					height: 12px;
					background-size: 12px 12px;
					background-repeat: no-repeat;
					margin-right: 11px;
					padding-top: 50%;
					transition: 300ms;

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

					&.active
					{
						transform: rotate(90deg);
						transition: 300ms;

						html[dir=rtl] &
						{
							transform: rotate(-90deg);
						}
					}
				}
			}
		}

		.gadget-container
		{
			height: 0;

			&.active
			{
				width: 836px;
				min-height: 180px;
				transition: 300ms;
				overflow: hidden;
				padding: 10px 0;
			}

			.edit_pane
			{
				display: none;
			}

			.visualization
			{
				min-height: 0;
			}
		}
	}
}