/* ==UserStyle==
@name         Youtube Thumbnail Declutterer
@namespace    dabric.xyz/post/thumbnail-declutterer/
@version      1.0.0
@license      MIT
@preprocessor stylus
@var checkbox rounded "Round thumbnails" 1
@var checkbox coverThumbnailPlaylist "Overlay over thumbnail in playlists" 0
==/UserStyle== */
@-moz-document domain("youtube.com") {
	#thumbnail {
		overflow: unset !important;
	}

	ytd-thumbnail,
	ytd-playlist-thumbnail {
		margin-bottom: 14px !important;
	}

	#overlays {
		display: flex !important;
		width: calc(100% - 12px) !important;
		left: 6px;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		height: 18px;
		position: absolute;
		top: 100%;
	}

	if rounded {
		yt-image.ytd-thumbnail > img {
			border-radius: 8px;
		}

		ytd-moving-thumbnail-renderer {
			border-radius: 8px;
		}
	}

	ytd-moving-thumbnail-renderer {
		overflow: hidden;
	}

	ytd-thumbnail-overlay-resume-playback-renderer {
		position: static !important;
		flex-grow: 1;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.4) !important;
	}

	ytd-thumbnail-overlay-time-status-renderer {
		position: static !important;
		background-color: transparent !important;
		padding: 0;
		margin: 0 !important;
		flex-grow: 1;
		text-align: right;
		display: block !important;
	}

	ytd-thumbnail-overlay-time-status-renderer #text {
		width: 100%;
		font-weight: unset;
		font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
		color: black;
	}

	:root[dark] ytd-thumbnail-overlay-time-status-renderer #text {
		color: white;
	}

	/* used for mixes */
	ytd-thumbnail-overlay-bottom-panel-renderer {
		height: 100% !important;
		position: absolute;
		width: calc(100% + 12px) !important;
		left: -6px;
		background-color: rgb(0, 0, 0, 0.8) !important;
		color: white;
		box-sizing: border-box;
	}

	:root[dark] ytd-thumbnail-overlay-bottom-panel-renderer {
		background-color: rgb(255, 255, 255, 0.8) !important;
		color: black;
	}

	/* indicator when something is playingin your queue */
	ytd-thumbnail-overlay-now-playing-renderer {
		top: -100%;
		bottom: unset;
		height: 100%;
		width: calc(100% + 12px);
		left: -6px;
		flex-grow: 1;
	}

	/* old playlist thumbnails. the new ones only needed minor tweaking in other selectors */
	ytd-thumbnail-overlay-side-panel-renderer.ytd-playlist-thumbnail {
		width: calc(100% + 12px) !important;
		left: -6px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 6px;

		yt-icon {
			height: 100%;
			margin: 0;
		}

		yt-formatted-string {
			font-size: 1.2rem;
		}
	}

	:root[dark] ytd-thumbnail-overlay-side-panel-renderer.ytd-playlist-thumbnail {
		background-color: rgb(255, 255, 255, 0.8) !important;
		color: black;

		yt-formatted-string {
			color: black;
		}
	}

	/* playlists */
	if coverThumbnailPlaylist {
		.ytd-playlist-panel-video-renderer {
			#overlays {
				top: calc(100% - 18px);
				left: 0;
				background-color: #000c;
				padding: 0 8px;
			}
			#thumbnail {
				overflow: hidden !important;
			}
		}
	}
	else {
		.ytd-playlist-panel-video-renderer {
			#thumbnail-container {
				overflow: visible;

				#overlays {
					top: calc(100% - 18px);
					left: calc(100% + 8px);
					justify-content: flex-start;

					ytd-thumbnail-overlay-time-status-renderer {
						order: -1;
						text-align: start;
					}
				}
			}

			#video-title {
				margin-bottom: 0;
				height: 2rem;
				-webkit-line-clamp: 1;
			}
		}

		:root
			ytd-playlist-panel-video-renderer[selected]
			ytd-thumbnail-overlay-time-status-renderer
			#text {
			color: var(--yt-spec-text-primary);
		}

		:root
			ytd-playlist-panel-video-renderer[selected][use-color-palette]
			ytd-thumbnail-overlay-time-status-renderer
			#text {
			color: var(--yt-lightsource-primary-title-color);
		}
	}
}