#image-manager{
	& .modal-header{
		background-color:map-get($theme-colors, primary);
		@extend .align-items-center;
		padding:0;

		& h5{
			color:white;
		}
	}

	& .contents{
		max-height:500px;
		overflow-y:auto;
	}

	& .modal-body{
		padding:0;
		max-height:608px;
	}

	& .modal-footer{
		padding-top:0.5rem;
		padding-bottom:0.5rem;
	}

	& .searches{
		border-bottom:1px solid transparentize(map-get($theme-colors, primary), 0.5);
	}

	& .folder-explorer{
		width:200px;
		min-width:200px;
		max-width:200px;
		border-right:1px solid transparentize(map-get($theme-colors, primary), 0.5);
		overflow:auto;
		max-height:549px;
		padding-bottom:50px;

		&::-webkit-scrollbar{
			height:10px;
		}
		&::-webkit-scrollbar-thumb{
			background-color:desaturate(map-get($theme-colors, primary), 50%);
		}
	}

	& .image-preview-container{
		width:250px;
		min-width:250px;
		max-width:250px;
		border-left:1px solid transparentize(map-get($theme-colors, primary), 0.5);
	}

	& .folder-selector-container > .folder-selector-container{
		margin-left:1em; // Omg em is important here - no rem
		display:none; // By default, inner containers are hidden because they are collapsable
	}

	& .folder-selector-container.expand-children{

		& > button > .folder-label svg.bi-chevron-right{
			transform:rotate(90deg);
		}

		& > .folder-selector-container{
			display:block;
		}
	}

	& .folder-expand-button-container{
		&.no-children{
			width:35px;
			text-align:center;
			& svg{
				display:none;
			}
		}

		&.has-children{
			width:35px;
			text-align:center;
			& svg{
				color:rgb(60,60,60);
				display:inline;
				width:22px;
			}

			&:hover{
				& svg{
					color:rgb(140,140,140);
				}
			}
		}
	}

	& .folder-selector-container > button{
		display:block;
		min-width:199px;
		padding-left:0;
		padding-right:0.5rem;
		border:none;
		text-align:left;
		background:none;
		& svg.folder-icon{
			margin-right:4px;
			color:orange;
		}
		&:hover{
			background-color:transparentize(map-get($theme-colors, primary), 0.75);
		}
	}

	& .image-item-container{
		& .inner-label-containers > *{
			padding:0 12px;
		}
		& button{
			border:none;
			background:none;
			width:100%;
			color:rgb(60,60,60);
			text-align:left;

			& .icon-container{
				display:inline-flex;
				align-items:center;
				justify-content: center;
				min-width:24px;
			}

			& .icon-container[data-type="jpeg"]{
				color:map-get($theme-colors, warning);
			}

			& .icon-container[data-type="gif"]{
				color:map-get($theme-colors, danger);
			}

			& .icon-container[data-type="png"]{
				color:map-get($theme-colors, success);
			}

			& .icon-container[data-type="webp"]{
				color:map-get($theme-colors, primary);
			}

			& .name-container{
				font-size:0.9rem;
				max-width:496px;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}

			& .type-container{
				width:70px;
				font-size:0.8rem;
			}
			& .file-size-container{
				width:80px;
				font-size:0.8rem;
			}

			&:focus{
				background-color:darken(white, 5%);
			}

			&:active{
				background-color:darken(white, 9%);
			}
		}
		&.is-selected{
			background-color:transparentize(map-get($theme-colors, primary), 0.8) !important;
			& button{
				background-color:transparentize(map-get($theme-colors, primary), 0.8) !important;
			}
		}
	}

	& .image-explorer{
		position:relative;
	}

	& .file-drop-overlay, & .uploading-loader-overlay, & .piecewise-uploading-loader-overlay{
		position:absolute;
		width:100%;
		height:100%;
		left:0;
		top:0;
		padding:15px;
		z-index:10;
		& > div{
			background-color:map-get($theme-colors, primary);
			border:1px dashed darken(map-get($theme-colors, primary), 10%);
			color:white;
		}
	}

	& .previewed-image-source{
		max-width:100%;
		max-height: 450px;
		padding:1rem;
	}

	& .contents-title-bar{
		background-color:lighten(map-get($theme-colors, secondary), 28%);
		& button{
			padding:6px 4px;
			text-align:left;
			font-size:0.9rem;
			background:none;
			border:none;
			color:black;
			&:focus{
				outline:none;
			}
			&:hover{
				background-color:lighten(map-get($theme-colors, secondary), 22%);
			}
			&:active{
				background-color:lighten(map-get($theme-colors, secondary), 22%);
			}
		}

		& .sort-by-icon-fake-spacer{
			width:30px;
		}

		& .sort-by-name{
			padding-left:18px;
			flex-grow:1;
		}

		& .sort-by-file-type{
			width:70px;
		}

		& .sort-by-file-size{
			width:80px;
		}
	}

	& .hierarchy-tree-container{
		height:unset;
		min-height:42px;
		& .btn{
			max-width:140px;
			white-space: nowrap;
			overflow:hidden;
			text-overflow: ellipsis;
			font-size:0.77rem;
			padding:0.2rem 1rem;
			border-radius:4px;
		}
		& .btn:not(:last-child){
			margin-right:1rem;
		}
	}
}

.image-manager-close-icon{
	background:none;
	border:none;
	color:white;
	font-size:1.5rem;
	padding:0.15rem 1rem;
	&:hover{
		background-color:map-get($theme-colors, danger);
		color:white;
	}
}

#context-menu{
	position:absolute;
	z-index:1100;
	width:200px;
	background-color: darken(white, 10%);
	color:rgb(50,50,50);
	box-shadow:0 0 0.1rem 0.15rem rgba(0,0,0,0.2);

	& > a{
		font-size:0.77rem;
		letter-spacing:1.1px;
		display:block;
		padding:0.5rem 1.35rem;
		color:rgb(50,50,50);
		&:hover{
			background-color: darken(white, 15%);
			cursor:pointer;
		}
	}
}

.folder-label{
	display:flex;
	align-items:center;
	padding:0.33rem;
	& i{
		margin-right:8px;
	}
	& span{
		display:inline-block;
		max-width:125px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow:hidden;
		font-size:0.82rem;
	}
}

.folder-loading-spinner, .rename-loading-spinner{
	width:1rem;
	height:1rem;
}

#image-manager-upload-button{
	position:relative;
	& > input{
		position:absolute;
		visibility:hidden;
	}
}






.image-type-badge{
	position:absolute;
	top:15px;
	right:-15px;
	width:75px;
	font-size:0.83rem;
	transform:rotateZ(45deg);
	text-align:center;
	background-color:white; /* This is for defaults */
}

.image-type-badge.gif{
	@extend .bg-danger;
}

.image-type-badge.jpeg{
	@extend .bg-warning;
}

.image-type-badge.png{
	@extend .bg-success;
}

.image-type-badge.webp{
	@extend .bg-primary;
	color:white;
}

.img-cntrl-btn{
	font-size:0.7rem;
}

.img-file-name{
	max-width:150px;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.renamable{
	&:hover{
		cursor:pointer;
		text-decoration:underline;
	}
}

.image-manager-item-container{
	max-width:160px;
	width:160px;
}