/* Fix for mobile menu since core doesn't support more than 2 menu wide */
@media only screen and (max-width: 900px) {
	.media-router {
		width: auto;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: auto;

		> a {
			float: inherit;
			display: inline-block;
		}

		.active,
		> a.active:last-child {
			margin: 0 -1px 0 0;
		}
	}

	.media-frame-router, .media-frame:not(.hide-menu) .media-menu {
		top: 39px;
	}
}

.wp-core-ui .media-frame .wpaas-stock-photos {
	&.stock-photo-preview {
		height: 100%;

		.media-toolbar-secondary h2.backBtn {
			cursor: pointer;
			position: fixed;
			color: #32373c;
			display: block !important;
			visibility: visible !important;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			font-size: 1.3em;
			font-weight: 600;

			&:hover {
				color: #00a0d2;
			}

			&:before {
				font-family: 'dashicons';
				content: "\f341";
				font-weight: normal;
				position: relative;
				top: 2px;
				text-rendering: geometricPrecision;
			}
		}

		.stock-photo-image-preview {
			height: calc(90% - 54px);
			padding-top: 54px;
			text-align: center;
			margin: 0 auto;

			img {
				max-height: 80%;
				max-width: 100%;
			}

			p.license-details {
				width: 50%;
				margin: 0px auto;
				padding-top: 10px;

				@media screen and (max-width: 320px) {
					width: 80%;
				}
			}

			a {
				text-decoration: none;

				&:focus {
					box-shadow: none;
				}

				&.license-details {
					display: block;
					padding-top: 10px;

					&:before {
						font-family: 'dashicons';
						font-size: 16px;
						content: "\f348";
						position: relative;
						top: 4px;
						padding-right: 3px;
					}
				}
			}
		}
	}

	.attachments {
		right: 0;
	}

	.attachment-preview:before {
		opacity: 0.7;
	}

	.attachment {
		&:focus,
		&.selected:focus,
		&.details:focus {
			box-shadow: none;
		}

		&:hover,
		&:focus {
			.thumbnail {
				opacity: 0.4;
			}

			.import {
				opacity: 1;
				z-index: 9999;
				word-wrap: break-word;
			}
		}

		.import {
			opacity: 0;
			position: absolute;
			top: 37%;
			right: 25%;
			left: 25%;
			width: 50%;
			color: #fff;
			background: #23282d;
			background: rgba(0, 0, 0, 0.7);
			color: #fff;
			font-size: 26px;
			-webkit-font-smoothing: antialiased;
			font-weight: 600;
			padding: 11px 0 8px;
			text-align: center;
			border-radius: 3px;
			transition: opacity 0.1s ease-in-out;

			&:after {
				font-family: dashicons;
				content: "\f179";
				font-weight: lighter;
			}
		}

		&.importing {
			.import {
				display: none;
			}

			.thumbnail {
				opacity: 0.08 !important;
			}

			.spinner {
				opacity: 0.8;
				position: absolute;
				top: 42%;
				right: 42%;
				left: 42%;
				visibility: visible;
				z-index: 9999;
			}
		}

		&.inactive {
			.attachment-preview {
				cursor: wait;
			}

			.import {
				display: none;
			}

			&:not(.importing) {
				.attachment-preview:before {
					background-color: black;
				}

				.thumbnail {
					opacity: 0.4;
				}
			}
		}
	}

	.media-toolbar-secondary {
		select.attachment-filters,
		.select2-container {
			max-width: 60%;
			width: 60%;
			float: left;
			margin-top: 11px;
		}

		.spinner {
			float: left;
			margin-left: 10px;
			position: relative;
			top: 15px;
		}
	}

	&.attachments-browser .uploader-inline {
		right: 0;
	}
}

/**
 * Select 2
 */

.select2-container.wpaas-stock-photos {
	z-index: 560001; // 1 more than media-frame

	.select2-search .select2-search__field,
	.select2-selection {
		width: 100%;
		border: 1px solid #ddd;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
		transition: .05s border-color ease-in-out;
		box-sizing: border-box;
	}

	.select2-selection {
		border-radius: 0;
	}

	.select2-dropdown {
		border-color: #ddd;
	}

	.select2-selection--single .select2-selection__rendered,
	.select2-results__option {
		color: #000;
	}

	.select2-search .select2-search__field {
		padding: 0 8px;
		font-size: 1em;
		line-height: 2.5em;
		height: 2.5em;
	}

	.select2-selection,
	.select2-selection .select2-selection__rendered,
	.select2-selection__arrow {
		font-size: 1em;
		line-height: 2.5em;
		height: 2.5em;
	}
}

/**
 * Elementor
 */
body.elementor-editor-active {
	.attachments-browser.wpaas-stock-photos .media-toolbar-secondary {
		width: 100%;
		color: #000000;
	}

	.select2-container.wpaas-stock-photos {
		&:not(.select2-container--open):not(.select2-container--focus) .select2-selection--single {
			background-color: inherit;
			border-color: inherit;
			color: inherit;
		}

		.select2-results__option--highlighted[aria-selected] {
			background-color: #5897fb;
			color: #ffffff;
		}

		.select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
			background-color: #dddddd;
			color: #000000;
		}

		.select2-search__field {
			background: inherit;
		}

		.select2-selection--single .select2-selection__rendered {
			color: inherit !important;
		}

		.select2-dropdown {
			background-color: #ffffff;
		}
	}
}