.media-gallery {

	ul.mg-folders {
		list-style: none;
		padding: 0;
		margin: 0;

		& > li {
			display: block;
			position: relative;

			a.menu-item {
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-right: 80px;

				i {
					margin-right: 5px;
					width: 16px;
				}
			}

			.item-options {
				position: absolute;
				padding: 10px 0;
				right: 0;
				top: 0;
				opacity: 0;
				transition: opacity 0.1s ease-in;

				a:hover {
					text-decoration: none;
				}
			}

			&:hover {
				.item-options {
					opacity: 1;
				}
			}

		}
	}

	ul.mg-tags {
		@include clearfix;
	    list-style: none;
	    padding: 0;
	    margin: 10px 0 0;

		& > li {
			float: left;
			margin-right: 5px;
			margin-bottom: 5px;

			a {
				display: block;
				padding: 2px 7px;
				font-size: 11px;
				background-color: #171717;
				border-radius: 5px;
				color: #666;

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

			}
		}
	}

	.mg-files {
		padding: 5px 0 30px;

		.thumbnail {
			padding: 10px;
			border-radius: 5px;
			margin-bottom: 30px;
			transform: translate3d(0, 0, 0);

			.thumb-preview {
				position: relative;
				z-index: 2;

				.thumb-image {
					display: block;
					overflow: hidden;
				}

				img {
					width: 100%;
					border-radius: 5px;
				}

				.mg-thumb-options {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background-color: rgba(#000, 0.7);
					visibility: hidden;
					overflow: hidden;

					.mg-zoom {
						position: absolute;
						top: 0;
						right: 0;
						padding: 10px 15px 15px;
						color: #fff;
						background-color: $color-primary;
						border-radius: 0 0 0 15px;
						cursor: pointer;
						transition: transform 0.1s linear 0.1s;
						transform: translate(100%, 0);

						> i {
						    position: relative;
						    top: 3px;
						}
					}

					.mg-toolbar {
						@include clearfix;
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						background-color: $color-primary;
						color: #fff;
						padding: 6px 10px;
						transition: transform 0.1s linear 0.1s;
						transform: translate(0, 100%);

						.mg-option {
							margin: 0;
						}

						.mg-group {

							& > a {
								color: #fff;
								padding: 0 5px;
							}

							.mg-toggle {
								color: #fff;
								background: none;
								border: none;
								padding: 2px 2px 2px 10px;
								border-left: 1px solid rgba(255, 255, 255, 0.3);
								cursor: pointer;
								&:focus {
									outline: 0 !important;
								}
							}

							.mg-dropdown {
								transform: none !important;
								top: 32px !important;
								left: auto !important;
								right: 0 !important;
							}

						}
					}
				}

			}

			.mg-title {
				margin: 13px 0 2px;
				padding-bottom: 2px;
				display: inline-block;
				font-size: 1rem;;

				small {
					position: relative;
					top: 0;
					left: 0;
					color: #9e9e9e;
					opacity: 0;
					z-index: 1;
					@include font-size(10);
				}

			}

			.mg-description {
				@include clearfix;
			}

			&.thumbnail-selected {
				border-color: #FFF;
				box-shadow: 0 0 8px -1px $color-primary;
				.mg-title {
					small {
						opacity: 1;
					}
				}

				.thumb-preview {

					.mg-thumb-options {
						visibility: visible;

						.mg-toolbar {
							transform: translate(0, 0);
						}

					}
				}
			}

			// .thumbnail
			&:hover {

				.mg-title {
					small {
						opacity: 1;
					}
				}

				.thumb-preview {

					img {
						transform: scale(1.1);
					}

					.mg-thumb-options {
						visibility: visible;

						.mg-zoom {
							transform: translate(0, 0);
						}

						.mg-toolbar {
							transform: translate(0, 0);
						}

					}
				}
			}

		}
	}

}

// LIGHT SIDEBAR SKIN
// -----------------------------------------------------------------------------
html.sidebar-light:not(.dark) {
	.media-gallery {

		ul.mg-tags {

			& > li {

				a {
					background-color: #f2f2f2;
					color: #777;
				}
			}
		}

	}

}

// DARK SKIN
// -----------------------------------------------------------------------------
html.dark {

	.media-gallery .mg-files .thumbnail {

		&.thumbnail-selected {
			border-color: $dark-color-5;
		}
		.mg-title small {
			color: $dark-default-text;
		}

	}

}