$gallery-member-padding:14px;

#gallery-rows-headers{
	border-bottom:1px solid rgba(0,0,0,0.2);
	padding-bottom:10px;
	margin-bottom:10px;
}

#manage-gallery-modal {
	.modal-body {
		height: 480px;
		max-height: 480px;
	}
}

#manage-gallery-modal-footer-wrapper{
	display:flex;
	width:100%;
	& > div{
		width:50%;
		flex-grow:1;
	}
	& > div:nth-of-type(2){
		text-align:end;
	}
}

#manage-gallery-members-container{
	overflow-y:auto;
	height:100%;

	& > .gallery-member-item:first-of-type{
		padding-bottom:$gallery-member-padding;
	}

	& > .gallery-member-item:not(:first-of-type){
		padding:$gallery-member-padding 0;
	}

	& > .gallery-member-item:nth-child(even){
		background-color:rgba(0,0,0,0.045);
	}
}

.dragged-ghost-dom{
	position:absolute;
	opacity:0.74;
	background-color:white;
	z-index:9999;
	top:0;
	left:0;
}

.has-ghost-dragger-dom{
	opacity:0;
}

.gallery-member-item{
	display:flex;
	align-items:center;
	.drag-handle-container{
		width:65px;
		user-select: none;
		button {
			font-size:1.45rem;
			border: none;
			background: none;
			user-select: none;
		}
	}

	.thumb{
		width:145px;
		img{
			width:60px;
			height:60px;
			object-fit:cover;
			object-position: center;
		}
	}

	.name {
		flex-grow:1;
	}

	.gallery-member-alt-text-form{
		display:inline-flex;
	}

	.control-buttons{
		.delete-gallery-member-button{
			border:none;
			display:inline-flex;
			background:none;
			color:$danger;
			padding:0.5rem;
			border-radius:$border-radius;

			i{
				margin-right:map-get($spacers, 1);
			}

			&:hover{
				transition: background-color 200ms;
				color:color-contrast($danger);
				background-color:$danger;
			}
		}
	}
}

.gallery-table-columns{
	display:flex;

	& > div > strong{
		font-size:1.05rem;
	}

	.icon{
		width:42px;
	}

	.name{
		width:100%;
		flex-grow:1;
	}

	.image-member-count{
		width:150px;
	}

	.creation-time{
		width:225px;
	}
}

.gallery-row-item{

	&:hover{
		background-color:rgba(0,0,0,0.035);
		cursor:pointer;
	}

	.icon{
		color:orange;
		font-size:1.15rem;
		text-align:center;
	}

	.name{

	}

	.image-member-count{

	}

	.creation-time{

	}
}

@media screen and (max-width:map-get($grid-breakpoints, xl)){
	.gallery-grid{
		grid-template-columns:repeat(3, 1fr);
	}
	#gallery-modal-images-container{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
	}
}

@media screen and (max-width:map-get($grid-breakpoints, lg)){
	.gallery-grid{
		grid-template-columns:repeat(2, 1fr);
	}
	#gallery-modal-images-container{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
	}
}