/* 
	Content Manager Overview
    ========================================================================== 

	Contains specific styling for the new content manager overview. 
	
*/

.content-manager-container,
.product-content-overview-container {
	float: left;
	margin-bottom: 48px;
	width: 100%;

	.headline {
		margin-bottom: 24px;

		form {
			&.form-inline {
				label {
					display: inline-block;
					padding-right: 12px;
				}
			}
		}
	}

	.element-container {
		margin: 0;

		.content-manager-elements-list {
			list-style: none;
			padding: 0;

			.sort-placeholder {
				border: 2px dashed #E4E4E4 !important;
				margin: $margin-small 0;
				height: $margin-large * 2;
			}

			.content-manager-element {
				border-top: 1px solid #E4E4E4;
				padding: 12px 6px;

				&:last-child {
					border-bottom: 1px solid #E4E4E4;
				}

				&:hover {
					background-color: #EBEBEB;
				}

				.content-type-icon {
					font-size: 20px;
					line-height: 26px;
					padding-left: 0;
					text-align: center;

					.fa {
						color: #C1C1C1;
						font-size: 20px;
						line-height: 26px;
					}
				}

				.content-name {
					line-height: 26px;
					padding-left: 0;

					.elements-warning {
						span {
							float: none !important;

							.tooltip-icon {
								.fa {
									font-size: 20px;
									margin-left: 12px;
								}
							}
						}
					}

					.status-not-active-badge {
						line-height: 26px;
						padding: 0;
						width: 95px;
						text-align: center;

						span {
							background-color: #F0F0F0;
							color: #333333;
							padding: 3px 8px;
							border-radius: 3px;
						}
					}

					.status-some-active-badge {
						line-height: 26px;
						padding: 0;
						width: 95px;
						text-align: center;

						span {
							background-color: #F9F1C7;
							color: #AF8640;
							padding: 3px 8px;
							border-radius: 3px;
						}
					}
				}

				.content-action-icons {
					text-align: right;
					visibility: hidden;

					a {
						margin-right: 24px;

						&:last-child {
							margin-right: 0;
						}

						.fa {
							color: #737373;
							cursor: pointer;
							font-size: 24px;

							&:hover {
								color: $brand-primary;
							}
						}
					}
				}
			}
		}
	}

	.dataTables_wrapper {
		.data-table.dataTable {
			tbody {
				tr {
					td {
						border-top: 1px solid #E4E4E4;
						padding: 12px 6px;
						text-align: left;

						.content-type-icon {
							font-size: 20px;
							line-height: 26px;
							padding-left: 0;
							text-align: center;

							.fa {
								color: #C1C1C1;
								font-size: 20px;
								line-height: 26px;
							}
						}

						.content-name {
							line-height: 26px;
							padding-left: 0;
						}

						.usage-badge {
							line-height: 26px;
							padding: 0;

							span {
								background-color: $brand-primary;
								color: #FFFFFF;
								padding: 6px 12px;
								border-radius: 3px;
							}
						}

						.content-action-icons {
							text-align: right;
							visibility: hidden;

							a {
								margin-right: 24px;

								&:last-child {
									margin-right: 0;
								}

								.fa {
									color: #737373;
									cursor: pointer;
									font-size: 24px;

									&:hover {
										color: $brand-primary;
									}
								}
							}
						}
					}

					&:last-child {
						td {
							border-bottom: 1px solid #E4E4E4;
						}
					}
				}
			}
		}
	}

	.paginator {
		background-color: #FBFBFB;
		border: 1px solid #E4E4E4;
		display: inline-block;
		margin-top: 24px;
		padding: 12px 24px;
		width: 100%;

		.datatable-components {
			padding: 0 15px;

			.page-length {
				@include make-md-column(2);

				display: inline-block;
				height: 30px;
				padding: 0;
			}

			.dataTables_info {
				@include make-md-column(6);

				float: none;
				display: inline-block;
				line-height: 30px;
				padding: 0 24px;
			}

			.dataTables_paginate.paging_simple_numbers {
				@include make-md-column(4);

				display: inline-block;
				padding-top: 0;
				padding-right: 0;
			}

			.paginate_button {
				padding: 6px 12px;
				margin-left: 6px;

				@include force-component-colors($btn-default-bg, $btn-default-color);

				&:hover {
					@include force-component-colors($btn-default-bg, $btn-default-color, true);
				}

				&.disabled {
					box-shadow: none;
					cursor: not-allowed;
					opacity: 0.65;
					pointer-events: none;
				}

				&.current {
					@include force-component-colors($btn-primary-bg, $btn-primary-color);

					&:hover {
						@include force-component-colors($btn-primary-bg, $btn-primary-color, true);
					}
				}
			}
		}
	}
}

.modal {
	&.preview {
		iframe {
			border: none;
			min-height: 300px;
		}
	}
}

// --------------------------------------------------------------------------
// BUTTON DROPDOWN
// --------------------------------------------------------------------------

.js-button-dropdown {
	display: inline-block;
	vertical-align: middle;
	margin: 12px 0 12px 12px;

	button {
		display: inline-block;
		margin: 0;
		float: left;
		color: $text-color-light;
	}

	button:hover {
		color: $text-color-light;
	}

	button:first-child {
		margin: 0 !important;
	}

	button:nth-child(2) {
		margin-left: -3px !important;
		margin-bottom: 0 !important;
		min-width: 33px;
	}

	ul {
		position: absolute;
		z-index: 1000;
		display: none;
		float: left;
		min-width: 160px;
		padding: 5px 0;
		margin-top: 30px;
		text-align: left;
		list-style: none;
		background-color: #FFFFFF;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border: 1px solid #CCCCCC;
		border-radius: 2px;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
		box-shadow: 0 0 5px rgba(0, 0, 0, .175);
		max-height: 400px;
		overflow: auto;

		li {
			display: list-item;
			text-align: -webkit-match-parent;

			span,
			a {
				display: block;
				padding: 3px 20px;
				clear: both;
				font-weight: 400;
				line-height: 1.42857143;
				color: $text-color-light;
				white-space: nowrap;
				cursor: pointer;

				&:hover {
					color: $text-color-light;
					text-decoration: none;
					background-color: #F5F5F5;
				}
			}
		}
	}
}

// Fix for different button-lengths in tables
.action-list {
	.js-button-dropdown {
		button:first-child {
			width: 93px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}

.qtip.gx-qtip .qtip-content a {
	text-decoration: underline;
}