@mixin neos-media-aside-condensed {
	flex-direction: row-reverse;

	.neos-media-aside {
		flex: 1;
		margin-right: $wideMargin;
		@include clearfix;

		.neos-media-aside-group {
			+ .neos-media-aside-group .neos-media-aside-list.neos-media-aside-list-editing-active {
				li:first-child + li {
					a > span {
						display: inline;
					}
				}

				li:first-child + li ~ li {
					a > span {
						display: none;
					}
				}
			}

			> h2 {
				border-bottom: 1px solid $grayLight;
				margin-bottom: $relatedMargin;
			}

			.neos-media-aside-list {
				font-size: 0;
				background-color: transparent;
				border-top: none;

				&.neos-media-aside-list-editing-active {
					li:first-child ~ li {
						a > span {
							display: none;
						}
					}

					li {
						a {
							display: inline-block;

							&.neos-active + .neos-sidelist-edit-actions {
								> a,
								button {
									background-color: #fff;
									color: $blue;

									&.neos-button-danger:hover {
										background-color: #fff;
									}
								}
							}
						}

						.neos-sidelist-edit-actions {
							display: inline-block;
							position: static;
							vertical-align: top;

							form {
								display: inline-block;
							}

							> a,
							button {
								position: static;
								padding: 0 $tightMargin 0 0;
								line-height: 29px;
								height: 29px;
								background-color: $blue;

								i {
									background-color: #fff;
									color: $blue;
									padding: 2px;
									margin-top: 0;

									&:hover {
										background-color: $blue;
										color: #fff;
									}
								}

								&.neos-button-danger {
									&:hover {
										background-color: $blue;
									}

									i:hover {
										background-color: $warning;
										color: #fff;
									}
								}
							}
						}
					}
				}

				li {
					display: inline-block;
					margin-right: $relatedMargin;
					margin-bottom: $relatedMargin;

					> a {
						border-top: none;
						background-color: $blue;
						padding: $tightMargin;
						font-size: $generalFontSize;

						&.neos-active {
							background-color: #fff;

							.neos-media-assetsource-icon {
								filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
							}

							&:hover {
								background-color: $blue;
								
								.neos-media-assetsource-icon {
									filter: none;
								}
							}
						}

						&:not(.neos-active) {
							&:hover {
								background-color: #fff;
								color: $blue;

								.neos-media-assetsource-icon {
									filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
								}
							}

							&.neos-drag-active::after {
								position: static;
							}
						}

						> span {
							background-color: #fff;
							color: $blue;
							position: static;
							padding: 0 2px;
							font-size: 13px;

							.neos-ellipsis::after {
								vertical-align: baseline;
							}
						}
					}
				}
			}

			> form {
				input,
				button {
					max-width: $unit * 8;
				}
			}
		}
	}

	.neos-media-assets {
		flex: 3;
	}
}

&.media-browser-inspector {
	padding: 40px 54px;
}

&.media-browser {
	background-color: transparent;
  padding-bottom: 30px;

	&:not(.media-module) {

		.neos-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0;
		}
	}

	// Styles for Media view Options
	.neos-media-options {
		margin-bottom: $wideMargin;
		border-bottom: 1px solid $grayLight;
		@include clearfix;

		a {
			display: block;
			height: $unit;
			line-height: $unit;
			min-width: 24px;
			text-align: center;
			padding: 0 $relatedMargin;
			color: $blue;

			&:hover {
				color: #fff;
				text-decoration: none;
			}
		}

		.neos-file-options {
			float: left;

			.count {
				display: inline-block;
				height: $unit;
				line-height: $unit;
				padding: 0 $relatedMargin 0 0;
				border-right: 1px solid $grayLight;
			}

			a {
				display: inline-block;
			}

			i {
				margin-right: $tightMargin;
				vertical-align: middle;
			}
		}

		.neos-view-options {
			float: right;
			white-space: nowrap;
			font-size: 0;

			> a,
			> .neos-dropdown {
				display: inline-block;
				border-right: 1px solid $grayLight;

				&:first-child {
					border-left: 1px solid $grayLight;
				}
			}

			a {
				color: #fff;
				font-size: $generalFontSize;

				&.neos-active {
					color: $blue;
				}

				&:hover {
					background: $blue;
					color: #fff;
				}

				i {
					line-height: $unit;
					vertical-align: top;
				}
			}

			ul {
				li {
					a {
						min-width: 24px;
						line-height: $unit;
						text-align: left;
						padding: 0 $defaultMargin;

						&.neos-active {
							color: #fff;
						}
					}
				}
			}
		}
	}

	@media (max-width: 1024px) {
		.neos-breadcrumb {
			margin: 0;
		}
	}

	.neos-media-content {
		display: flex;
		flex-direction: row;

		&:not(.neos-media-aside-condensed) {
			@include clearfix;

			.neos-media-assets {
				@media (min-width: 768px) {
					float: left;
					position: relative;
					left: $unit * 6 + $wideMargin;
					width: calc(100% - (#{$unit} * 6 + #{$wideMargin}));
				}
			}

			.neos-media-aside {
				@media (max-width: 767px) {
					margin-top: $wideMargin;
				}

				@media (min-width: 768px) {
					float: left;
					position: relative;
					margin-right: $wideMargin;
					width: $unit * 6;
					right: calc(100% - (#{$unit} * 6 + #{$wideMargin}));
				}
			}
		}

		.neos-search {
			@include clearfix;
			width: 100%;
			max-width: $unit * 8;
			margin-bottom: $defaultMargin;

			div {
				overflow: hidden;
			}

			button[type="submit"] {
				width: auto;
				float: right;

				i {
					vertical-align: baseline;
				}
			}
		}

		&.neos-media-aside-condensed {
			@include neos-media-aside-condensed;
		}

		@media (max-width: 767px) {
			@include neos-media-aside-condensed;
		}
	}

	aside.neos-media-aside {
		.neos-media-aside-group {
			+ .neos-media-aside-group {
				margin-top: $defaultMargin;
			}

			> h2 {
				line-height: $unit;

				.neos-media-aside-list-edit-toggle {
					float: right;
					background-color: $grayDark;
					@include user-select(none);

					&.neos-active {
						background-color: $blue;
					}

					&:hover {
						background-color: $blue;
					}
				}

				.neos-tooltip {
					font-weight: normal;
				}
			}

			.neos-media-aside-list {
				background-color: $grayLight;
				border-top: 1px solid $grayLight;

				&.neos-media-aside-list-editing-active {
					li .neos-sidelist-edit-actions {
						display: block;
					}
				}

				li {
					position: relative;
					background-color: $grayDark;

					+ li {
						margin-top: 1px;
					}

					> a {
						display: block;
						color: #fff;
						padding: ($tightMargin * 2 + 1) ($unit * 2.5) ($tightMargin * 2 + 2) $tightMargin;
						border-radius: 0;
						text-shadow: none;
						font-weight: 400;
						font-size: $generalFontSize;
						line-height: 1.5;

						> img {
							height: 16px;
							width: auto;
						}

						&.neos-active {
							color: $blue;

							&.neos-drag-active {
								&:hover {
									background-color: $warning;
								}
							}
						}

						&:not(.neos-active) {
							&.neos-drag-active {
								outline: 1px dashed #fff;
								outline-offset: -1px;

								span {
									display: none;
								}

								&::after {
									@extend .fas;
									content: $fa-var-arrow-down;
									position: absolute;
									right: $relatedMargin + $tightMargin;
									top: $relatedMargin + $tightMargin;
								}

								&:hover,
								&.neos-drag-hover {
									outline: 1px solid #fff;
									outline-offset: -1px;

									background-color: $blue;
									color: #fff;
								}
							}
						}

						&:hover:not(.neos-drag-active) {
							background-color: $blue;
							color: #fff;

							> span {
								background-color: #fff;
								color: $blue;

								.neos-ellipsis {
									color: $textOnWhite;
								}
							}
						}

						> span {
							position: absolute;
							top: $relatedMargin + 2;
							right: $relatedMargin;
							background-color: $blue;
							color: #fff;
							padding: $tightMargin;
							line-height: 1;
						}
					}

					.neos-sidelist-edit-actions {
						display: none;
						position: absolute;
						top: 0;
						right: 0;
						font-size: 0;

						a,
						button {
							background-color: $grayDark;
							width: auto;

							&:hover {
								background-color: $blue;

								&.neos-button-danger {
									background-color: $warning;
								}
							}
						}

						form {
							display: inline-block;
						}
					}
				}
			}

			> form {
				display: none;
				margin-top: $defaultMargin;

				&.neos-media-aside-list-editing-active {
					display: block;
				}
			}
		}

		input,
		button[type="submit"] {
			width: 100%;
		}
	}

	.neos-media-assets {
		.neos-thumbnails {
			margin-bottom: $wideMargin;
			font-size: 0;
			margin-left: 0;

			> li {
				margin-left: 0;
				margin-right: $defaultMargin;
				@include box-sizing(border-box);
				float: none;
				display: inline-block;
				vertical-align: top;

				@media (max-width: 479px) {
					width: calc((100% - #{$defaultMargin}) / 2);

					&:nth-child(2n) {
						margin-right: 0;
						@include clearfix;
					}
				}

				@media (min-width: 480px) and (max-width: 767px) {
					width: calc((100% - #{$defaultMargin} * 2) / 3);

					&:nth-child(3n) {
						margin-right: 0;
						@include clearfix;
					}
				}

				@media (min-width: 768px) and (max-width: 1023px) {
					width: calc((100% - #{$defaultMargin} * 2) / 3);

					&:nth-child(3n) {
						margin-right: 0;
						@include clearfix;
					}
				}

				@media (min-width: 1024px) and (max-width: 1199px) {
					width: calc((100% - #{$defaultMargin} * 3) / 4);

					&:nth-child(4n) {
						margin-right: 0;
						@include clearfix;
					}
				}

				@media (min-width: 1200px) and (max-width: 1599px) {
					width: calc((100% - #{$defaultMargin} * 4) / 5);

					&:nth-child(5n) {
						margin-right: 0;
						@include clearfix;
					}
				}

				@media (min-width: 1600px) {
					width: calc((100% - #{$defaultMargin} * 5) / 6);

					&:nth-child(6n) {
						margin-right: 0;
						@include clearfix;
					}
				}

				.neos-img-container {
					position: relative;
					padding-bottom: 100%;
					height: 0;
					background-color: $grayDarker;
					background-image: url('../../Neos.Neos/Images/ajax-preloader-222222.gif');
					background-position: center center;
					background-repeat: no-repeat;
					overflow: hidden;
					@include box-sizing(border-box);

					&.ui-draggable-dragging {
						width: 250px;
						height: 250px;
					}

					img {
						background-color: $grayDarker;
						outline: 3px solid $grayDarker;
					}
				}

				> a {
					border: 0;
					border-radius: 0;
					display: block;
					box-shadow: none;
					position: relative;
					padding: 0;
					z-index: 2;

					&:hover {
						box-shadow: none;
						text-decoration: none;
					}

					.neos-img-container > img {
						position: absolute;
						top: 50%;
						left: 50%;
						@include translate(-50%, -50%);
						height: auto;
						width: auto;
						max-height: 100%;
						max-width: 100%;
					}
				}

				.neos-button.dropdown-toggle {
					width: $unit;
					padding: 0;

					.fa-ellipsis-h {
						line-height: $unit;
					}
				}

				.neos-img-label {
					position: relative;
					background-color: $grayMedium;
					height: $unit;

					.neos-caption {
						padding-right: 4px;
						display: block;
						font-size: 12px;
						line-height: $unit;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.neos-dropdown {
						font-size: 14px;
					}

					> img {
						float: left;
						padding: 4px;
            width: 24px;
					}
				}
			}
		}

		@media (max-width: 540px) {
			.page-navigation ul li {
				display: none;

				&.previous,
				&.current,
				&.next {
					display: inline-block;
				}
			}
		}
	}

	.neos-thumbnails li .neos-img-container:hover {
		cursor: pointer;
		outline: $tightMargin solid $blue;
	}

	&:not(.media-module) {
		.neos-media-assets .neos-thumbnails li .neos-img-container:hover {
			cursor: pointer;
			outline: $tightMargin solid $blue;
		}
	}

  .neos-image-inputs,
  .neos-image-example {
    flex: 1;
  }

  .neos-image-example {
    margin-bottom: 80px;
  }

  .neos-image-inputs {
    margin-right: 0;
  }

	//Styles for upload/edit image
	.neos-image-inputs {
		legend {
			display: none;
		}

		input[type="text"],
		select,
		textarea {
			width: 100%;
			margin-bottom: $relatedMargin * 2;
			background: $grayLight;
			border: 0;
			border-radius: 0;
			padding: $relatedMargin;
			@include font();
			@include box-sizing(border-box);

			&:focus {
				background: #fff;
				outline: 0;
			}
		}

		.neos-tag-select {
			margin-bottom: $wideMargin;
		}

		.neos-button {
			margin-right: $relatedMargin;
			margin-bottom: $wideMargin;
		}
	}

	.neos-media-content-help {
		font-style: italic;
		padding-bottom: 1em;
	}

	//Styles for image preview in edit mode
	.neos-image-example {
		label {
			text-align: right;

			@media screen and (max-width: 767px) {
				text-align: left;
			}
		}

		.neos-preview-image {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			height: 0;
			padding-bottom: 100%;
			background-color: $grayDarker;
			background-image: url('../../Neos.Neos/Images/ajax-preloader-222222.gif');
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;

			img {
				float: none;
				position: absolute;
				top: 50%;
				left: 50%;
				@include translate(-50%, -50%);
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
				display: block;
				margin: 0 auto;
				background-color: $grayDarker;
				outline: 3px solid $grayDarker;
			}
		}
	}

	table.neos-table.asset-list {
		th {
			white-space: nowrap;

			a:hover {
				color: $blue;
			}

			i {
				vertical-align: baseline;
			}
		}

		th,
		td {
			padding: $relatedMargin;
			line-height: $unit - ($relatedMargin * 2);
		}

		tbody tr.asset td:first-child {
			padding: 0 !important;
		}

		.neos-list-thumbnail {
			background-color: $grayDarker;
			height: $unit;
			width: $unit;
			position: relative;
			display: inline-block;
			float: left;
			background-image: url('../../Neos.Neos/Images/ajax-preloader-222222.gif');
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;

			&[data-content] {
				cursor: zoom-in;
			}

			img {
				position: absolute;
				top: 50%;
				left: 50%;
				@include translate(-50%, -50%);
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
				background-color: $grayDarker;
				outline: 3px solid $grayDarker;
			}
		}

		.neos-popover {
			width: auto;
			height: auto;
			border-color: $grayMedium;

			.neos-popover-title {
				border-color: $grayMedium;
			}

			.neos-popover-content {
				width: 250px;
				height: 250px;
				position: relative;
				padding: 0;
				background-image: url('../../Neos.Neos/Images/ajax-preloader-222222.gif');
				background-position: center center;
				background-repeat: no-repeat;
				overflow: hidden;
				background-color: $grayDarker;

				img {
					position: absolute;
					top: 50%;
					left: 50%;
					@include translate(-50%, -50%);
					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 100%;
					background-color: $grayDarker;
					outline: 3px solid $grayDarker;
				}
			}

			&.neos-top .neos-arrow {
				border-top-color: $grayDarker;
			}
			&.neos-bottom .neos-arrow {
				border-bottom-color: $grayDark;
			}
		}

		.neos-action {
			width: 10%;
			font-size: 0;
			text-align: right;

			.neos-dropdown {
				display: inline-block;
				font-size: 14px;
			}

			.neos-modal {
				text-align: left;
			}
		}
	}

	table.neos-info-table i {
		vertical-align: baseline;
	}

	&:not(.media-module) {
		table.neos-table:not(.neos-no-hover) {
			tbody tr:hover td {
				background-color: $blue;
				cursor: pointer;

				.neos-label {
					background-color: #fff;
					color: $blue;
					text-shadow: none;
				}
			}

			.fa-move {
				cursor: move;
			}
		}
	}

	.neos-upload-area {
		text-align: center;
		padding: $wideMargin;
		border: 1px dashed $grayLight;
		margin-bottom: $wideMargin;
		cursor: pointer;

		&.neos-upload-area-active {
			border-color: #fff;

			div {
				pointer-events: none;
			}

			i {
				display: inline;
			}

			span {
				display: none;
			}
		}

		&.neos-upload-area-hover {
			border-style: solid;
			background-color: $blue;
		}

		i {
			display: none;
			vertical-align: baseline;
			padding-left: $tightMargin;
		}

		#resource {
			display: none;
		}

		&:hover {
			border-color: $blue;
		}
	}

	#filelist {
		margin-bottom: $wideMargin;

		.progress {
			background-color: $grayMedium;
			border: 1px solid $grayLight;
			width: 100%;
			height: $unit;
			margin-bottom: $relatedMargin;
			position: relative;

			.label {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				line-height: $unit;
				text-align: center;
			}

			.bar {
				background-color: $blue;
				height: $unit;
			}
		}
	}

	#uploader .plupload {
		display: none;
	}

	.neos-file-input {
		position: relative;

		#resource {
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}

	.fold-toggle {
		cursor: pointer;
	}

	.fa-ok-sign {
		color: $green;
	}

	.fa-exclamation-sign {
		color: $orange;
	}

	.neos-preview-page-cursor {
		span {
			height: 40px;
			line-height: 40px;
		}
	}

	.neos-preview-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 16px;
	}

	.neos-nav-tabs {
		@include clearfix();
		height: 28px;
		margin-bottom: 8px;
	}
	.neos-nav-tabs > li {
		float: left;
	}

	.neos-nav-tabs > li > a {
		padding-right: 12px;
		padding-left: 12px;
		margin-right: 2px;
		line-height: 14px; // keeps the overall height an even number
	}

	.neos-nav-tabs {
		border-bottom: 1px solid #ddd;
	}
	.neos-nav-tabs > li {
		margin-bottom: -1px;
	}
	.neos-nav-tabs > li > a {
		padding-top: 8px;
		padding-bottom: 8px;
		line-height: $baseLineHeight;
		border: 1px solid transparent;
		@include border-radius(4px 4px 0 0);
		&:hover,
		&:focus {
			border-color: $grayLighter $grayLighter #ddd;
		}
	}
	.neos-nav-tabs > .neos-active > a,
	.neos-nav-tabs > .neos-active > a:hover,
	.neos-nav-tabs > .neos-active > a:focus {
		color: $gray;
		background-color: $bodyBackground;
		border: 1px solid #ddd;
		border-bottom-color: transparent;
		cursor: default;
	}
}