/**
 * #.# Editor Styles
 *
 * CSS for just Backend enqueued after style.scss
 * which makes it higher in priority.
 */

.easy-attachments-sidebar_search-container {
	position: relative;
	display: flex;
	align-items: center;

	button {
		padding: 6px 8px;
		margin-bottom: 8px;
		border-radius: 0;
	}

	.search-icon-container {
		position: absolute;
		top: 50%;
		transform: translateY(-53%);
		right: 10px;
		max-width: 16px;
		.search-button svg{
			height: 15px;
			cursor: pointer;
		}
	}

	img#search-icon {
		height: 100%;
		width: 100%;
		cursor: pointer;
	}

	.easy-attachments-search_input {
		width: 100%;
	}
}
.easy-attachments-sidebar {

	.easy-attachments-sidebar_search-container {
		margin: 0 16px 16px;
	}

	.easy-attachments-sidebar_quicksearch {
		position: relative;
		padding: 16px 16px 0;
		width: 100%;
		height: 100px;
		overflow: hidden;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			width: 100px;
			height: 100%;
			pointer-events: none;
			background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff 95%, #fff);
		}

		.easy-attachments-sidebar_quicksearch_list_container {
			position: relative;
			height: calc(100% + 15px);
			margin: 16px -16px 0 -16px;
			box-sizing: content-box;
			overflow-x: scroll;
			overflow-y: hidden;
		}

		p {
			font-weight: 600;
			color: #191e23;
			margin: 0;
		}

		ul {
			display: flex;
			list-style: none;
			margin: 0;
			margin-left: 16px;

			li {
				position: relative;
				color: #666d75;
				margin-left: -5px;
				margin-right: 5px;
				padding: 5px 7px;
				border: 1px solid transparent;
				transform: translateY(1px);
				display: block;
				line-height: 1;
				font-size: 14px;
				white-space: nowrap;
				border-radius: 3px;
				transition: all ease-in 0.1s;
				cursor: pointer;

				&.selected {
					color: #006a95;
					border: 1px solid #006a95;
					text-decoration: none;
					transition: all ease-in 0.1s;
				}

				&:hover:not(.selected) {
					background-color: #fff;
					color: #191e23;
					text-shadow: none;
					transition: all ease-in 0.1s;

				}

			}
		}
	}

	.easy-attachments-sidebar_photos {
		display: flex;
		flex-direction: column;

		.easy-attachments-sidebar_photo_container {
			display: flex;
			position: relative;
			flex: 1 1 100%;
			max-width: 100%;
			overflow: hidden;

			>img {
				position: relative;
				z-index: 5;
			}

			.easy-attachments-download_container_overlay {
				display: none;
				position: absolute;
				height: 100%;
				width: 100%;
				background-color: rgba(25, 30, 35, .7);
				color: #fff;
				z-index: 10;

				>span {
					margin-bottom: 7px
				}
			}

			.linePreloader {
				width: 150px;
				height: 2px;
				background: linear-gradient(to right, #fff, #fff);
				background-color: #000;
				border-radius: 4px;
				background-size: 20%;
				background-repeat: repeat-y;
				background-position: -25% 0;
				animation: scroll 1.75s ease-in-out infinite;
			}

			&.downloading {
				.easy-attachments-download_container_overlay {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}

			}

			&.downloaded {
				.easy-attachments-download_container_overlay {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					>span {
						margin-bottom: 7px
					}
				}

				.linePreloader {
					animation: load 2s linear;
					background-size: 100%;
					background-position: center;
					background: #00c851;
				}
			}



		}

		@keyframes scroll {
			50% {
				background-size: 80%
			}

			100% {
				background-position: 125% 0;
			}
		}

		@keyframes load {
			0% {
				background-size: 0%;
				background-position: 0 0;
			}

			50% {
				background-size: 50%
			}

			100% {
				background-size: 100%
			}
		}

		.easy-attachments-sidebar_photo_user {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			width: 100%;
			align-items: center;
			color: #fff;
			padding: 5px;
			z-index: 10;

			img {
				max-width: 32px;
				border-radius: 50px;
				margin-right: 7px;
			}

			span {
				text-shadow: 1px 1px 2px black;
			}
		}
		.easy-attachments-sidebar_loadmore.active {
			transform: scale(1.2) ;
		}
		.easy-attachments-download_container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: absolute;
			top: 50px;
			left: 0%;
			padding-left: 5px;
			transition: all ease 0.1s;
			z-index: 6;

			* {
				transition: all ease 0.1s;
			}

			button {
				display: block;
				background-color: transparent;
				color: #eee;
				border: none;
				margin-bottom: 10px;
				outline: none;

				&:hover {
					transform: scale(1.15);
					cursor: pointer;
				}


				svg {
					height: 15px;

					* {
						fill: #fff;
					}
				}
			}


			.easy-attachments-download_button_container {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				height: 50px;
				width: 150px;
				text-align: center;
				background-color: transparent;
				z-index: 6;

				&.active {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					height: auto;
					width: auto;
					background-color: #181b1b;

					.easy-attachments-download {
						display: none;
					}

					.download_intopost,
					.download_featured {
						display: block;
						transform: translateY(0px);
						opacity: 1;

						svg {
							height: 15px;

							* {
								fill: #fff;
							}
						}
					}

					.download_intopost {
						margin-right: 10px;
					}
				}

				&:hover button {
					transform: translateY(0px);
					opacity: 1;
				}

				&:hover+.easy-attachments-download_container_overlay {
					opacity: 1;
				}

			}

		}
	}
	.easy-attachments-sidebar_loadmore{
		text-align: center;
		padding: 25px;
	}
}