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

@dark-gray-disabled-color: #8D8D8D;
@lite-gray-disabled-color: #999;
@accent-color-hover: #0e63a7;

.v7#site-holder #atlas
{
	div#buttons-container,
	div.buttons-container
	{
		margin-top: 30px;
		white-space: nowrap;

		a.button
		{
			margin: 10px 15px 5px 0;

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

			.fa-arrow-circle-down,
			.fa-eye,
			.icon
			{
				display: none;
			}

			font-size: 16px;

			&.export,
			&.explore
			{
				min-width: 140px;
				max-width: 240px;
				height: 40px;
				font-size: 14px;
				padding: 12px 10px 0;
				.margin-left-right(0, 10px);
				color: white;
				background-color: @accent-color;

				&:hover
				{
					background-color: @accent-color-hover;
				}

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

			&.embed
			{
				margin-right: 8px;

				html[dir='rtl'] &
				{
					margin-left: 8px;
				}
			}
		}
	}

	&.premium div#buttons-container,
	&.premium div.buttons-container
	{
		a.button
		{
			&.export,
			&.explore
			{
				background-color: @dark-gray-disabled-color;
			}
		}
	}
}

div#atlas
{
	div#buttons-container,
	div.buttons-container
	{
		margin-bottom: 15px;

		a.button
		{
			margin: 10px 10px 5px 0;
			font-size: 10pt;
			text-decoration: none;
			display: inline-block;
			color: @accent-color;

			&:hover
			{
				color: darken(@accent-color, -10%);

				.fa
				{
					color: darken(@accent-color, -10%);
				}
			}

			&:first-child
			{
				html[dir='rtl'] &
				{
					margin-right: 0px;
				}
			}

			&.add-to-gadgetbin
			{
				em
				{
					.hires('/img/v7/dsviewer/favorites', 'png?v=1');
				}
			}

			.fa,
			.icon
			{
				color: @accent-color;
				.margin-left-right(0, 5px);
				display: inline-block;

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

				&.fa-balance-scale, &.fa-code
				{
					margin-right: 0px;

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

			&.export, &.explore
			{
				font-weight: bold;
				color: white;
				padding: 5px 12px;
				background-color: #5da90b;

				&:hover
				{
					background-color: darken(#5da90b, -3%);
					.fa
					{
						color: white;
					}
				}

				.fa
				{
					color: #fff;
				}
			}

			span
			{
				width: 20px;
				height: 20px;
				display: inline-block;
				position: relative;
				top: 5px;
				margin-right: 5px;
			}

			&.embed, &.compare, &.switch-info
			{
				.fa-code
				{
					font-weight: bold;
				}
			}
		}
	}

	div.edit_pane
	{
		height: 20px;

		div.gadget_actions
		{
			div.gadget-options
			{
				margin-right: 5px;
				background-position: 0px 0px;
			}

			div.gadget-menu
			{
				left: -105px;
				display: none;
			}
		}
	}

	&.premium div#buttons-container,
	&.premium div.buttons-container
	{
		a.button
		{
			color: @dark-gray-disabled-color;

			.fa
			{
				color: @dark-gray-disabled-color;
			}

			&:hover
			{
				color: @lite-gray-disabled-color;

				.fa
				{
					color: @lite-gray-disabled-color;
				}
			}

			&.export,
			&.explore
			{
				color: white;
				background-color: @dark-gray-disabled-color;

				&:hover
				{
					color: white;
					background-color: @lite-gray-disabled-color;

					.fa
					{
						color: white;
					}
				}

				.fa
				{
					color: white;
				}
			}
		}

		a.add-to-gadgetbin em
		{
			.hires('/img/v7/dsviewer/favorites-disabled');
		}
	}
}

.atlas-premium-banner
{
	margin: 15px -15px 0 -15px;
	font-weight: bold;
	position: relative;
	overflow: hidden;
	padding: 20px 0 35px 0;

	p
	{
		position: relative;
		z-index: 1;
		display: inline-block;
		margin-top: 0;
		margin-bottom: 0;
		.margin-left-right(15px, 0);

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

	.ui-button
	{
		display: inline-block;
		text-decoration: none;
		padding: 5px 20px;
		font-size: 1.1em;
		position: absolute;
		right: 15px;
		top: 15px;
		outline: none;
		z-index: 1;

		html[dir='rtl'] &
		{
			left: 15px;
			right: initial;
		}
	}

	.shadow
	{
		top: 0;
		left: 0;
		right: 0;
		bottom: 15px;
		position: absolute;
		background: #f0f0ec;
		box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.2);
	}
}

a.add-to-gadgetbin
{
	background-image: none;
	width: auto;
	height: auto;

	em
	{
		font-weight: bold;
		font-size: 14px;
		display: inline-block;
		width: 28px;
		height: 28px;
		vertical-align: middle;

		&.addfavorites
		{
			background-position: -28px 0;
		}

		&.removefavorites
		{
			background-position: 0 0;
		}
	}
}