.media-library__list-item {
	position: relative;
	display: inline-block;
	cursor: pointer;
	color: var(--color-neutral-40);
	user-select: none;

	&.is-selected::after {
		content: attr(data-selected-number) "";
		position: absolute;
		right: 8px;
		bottom: 18px;
		z-index: z-index(".media-library__list-item", ".media-library__list-item.is-selected::after");
		width: 28px;
		height: 28px;
		padding: 0;
		transition: color 90ms ease;
		box-shadow: 0 0 8px color-mix(in srgb, var(--color-neutral-70) 40%, transparent);
		background: var(--color-accent);
		border-radius: 50%;
		font-size: $font-body-small;
		line-height: 28px;
		text-align: center;
		color: var(--color-text-inverted);
	}

	.media__main-section .media-library__content.has-no-upload-button & {
		// In the Media Library, don't allow contributors to click images.
		pointer-events: none;
	}
}

.media-library__list-item-selected-icon {
	display: none;
}

.media-library__list-item-selected-icon .gridicon {
	position: absolute;
	bottom: 22px;
	right: 12px;
	z-index: z-index(".media-library__list-item", ".media-library__list-item-selected-icon .gridicon");
	fill: var(--color-text-inverted);
}

.media-library.is-single .media-library__list-item.is-selected::after {
	content: "";
}

.media-library.is-single
.media-library__list-item.is-selected
.media-library__list-item-selected-icon {
	display: block;
}

.media-library__list-item-figure {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 100%;
	background-color: var(--color-neutral-10);
}

.media-library__list-item:hover .media-library__list-item-figure,
.media-library__list-item:focus .media-library__list-item-figure {
	box-shadow: 0 0 0 1px var(--color-neutral-light), 0 2px 4px var(--color-neutral-10);
}

.media-library__list-item.is-selected .media-library__list-item-figure {
	box-shadow: 0 0 0 2px var(--color-accent), 0 4px 6px var(--color-neutral-10);
}

.media-library__list-item.is-placeholder .media-library__list-item-figure {
	background-color: var(--color-neutral-10);
	animation: loading-fade 1.6s ease-in-out infinite;
}

.media-library__list-item.is-transient .media-library__list-item-figure::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
	border-radius: 0;
	z-index: z-index(".media-library__list-item", ".media-library__list-item.is-transient .media-library__list-item-figure::after");
}

.media-library__list-item-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: z-index(".media-library__list-item", ".media-library__list-item-spinner");
}

.media-library__list-item-spinner .spinner__border {
	fill: transparent;
}

.media-library__list-item-progress {
	position: inherit;
	z-index: z-index(".media-library__list-item", ".media-library__list-item-progress");

	.progress-bar {
		display: block;
		border-radius: 0;

		.progress-bar__progress {
			border-radius: 0;
			background-color: var(--color-accent);
		}
	}
}

.media-library__list-item-centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.media-library__list-item-icon {
	display: block;
	font-size: inherit;
}

.media-library__list-item-icon .gridicon {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}
