/*--------------------------------------------------------------
>>> GENERAL:
----------------------------------------------------------------
# YouTube home page
# Collapse of subscription section
# Remove related search results
# Scroll bar
# Add "Scroll to top"
# Remove members only videos
# Limit page width
# Squared user images
# Mark watched videos
# Hide aniamted thubmnails
# Hide buttons on thumbnails
# Hide thumbnail icon
# Hide dots on thumbnails
--------------------------------------------------------------*/
html[it-cursorLighting=true] #below			{opacity:.4; transition:3s;}
html[it-cursorLighting=true] #below:hover	{opacity:1; transition:.5s;}
html[it-cursorLighting=true] #masthead		{opacity:.3; transition:3s;}
html[it-cursorLighting=true] #masthead:focus-within  {opacity:0.8;}
html[it-cursorLighting=true] #masthead:focus-within  #logo-id {opacity:.3; filter:grayscale(90%)}
html[it-cursorLighting=true] #masthead:hover{opacity:1; transition:.2s}
html[it-cursorLighting=true] #dismissible		{opacity:.4; transition:3s;}
html[it-cursorLighting=true] #dismissible:hover {opacity:1; transition:.2s}
html[it-cursorLighting=true][data-page-type=home]	#dismissible:hover,
html[it-cursorLighting=true][it-pathname^='/feed']	#dismissible:hover 	{transition-delay:.19s !important;}	
							 /* Btw #related doesn't notice hover: #related, #secondary-inner > *:not(#panels):not(#chat-container) */
html[it-cursorLighting=true] #secondary:has(:not(ytd-engagement-panel-section-list-renderer[visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"][target-id="engagement-panel-clip-create"]))
		{opacity:.8; transition:3s;}		/* opacity could be less if we also exclude panels (transcript, chapters, ...*/
html[it-cursorLighting=true] #secondary:hover{opacity:1; transition:0.6s} 
html[it-cursorLighting=true] #panels img,	/* again, opacity can be less if we incldue the clip creation panel: <ytd-engagement-panel-section-list-renderer class="style-scope ytd-watch-flexy" modern-panels="" visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED" target-id="engagement-panel-clip-create" scrimmed="" style="order: 0;"> */
											/* or that it prevents our :hover rules */   
html[it-cursorLighting=true] #chat-container img		{opacity:.7; transition:3s;} 
html[it-cursorLighting=true] #panels:hover img,
html[it-cursorLighting=true] #chat-container:hover img	{opacity:1; transition:0.4s;}
html[it-cursorLighting=true] ytd-guide-entry-renderer, 
html[it-cursorLighting=true] #donation-shelf,  
html[it-cursorLighting=true] ytd-ad-slot-renderer,
html[it-cursorLighting=true] #player-ads				{opacity:0.4; transition:3s}
html[it-cursorLighting=true] ytd-guide-entry-renderer:hover,   /*ytd-watch-next-secondary-results-renderer  ytd-reel-shelf-renderer */
html[it-cursorLighting=true] #donation-shelf:hover,
html[it-cursorLighting=true] ytd-ad-slot-renderer:hover,
html[it-cursorLighting=true] #player-ads:hover			{opacity:1; transition:.3s}
html[it-cursorLighting=true] ytd-two-column-browse-results-renderer,
html[it-cursorLighting=true] ytd-search			{opacity:.7; transition:5s;}
html[it-cursorLighting=true] ytd-two-column-browse-results-renderer:hover,
html[it-cursorLighting=true] ytd-search:hover	{opacity:1; transition:3s}
html[it-cursorLighting=true]:not([data-page-type=video]) #guide-content,
html[it-cursorLighting=true] ytd-mini-guide-renderer 		{opacity:.4; transition:2s}					
html[it-cursorLighting=true]:not([data-page-type=video]) #guide-content:hover,
html[it-cursorLighting=true] ytd-mini-guide-renderer:hover	{opacity:1; transition:.3s}

/*--------------------------------------------------------------
HIDING STUFF   (display:none !important) (Usually the !important isn't necessary)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# REMOVE RELATED SEARCH RESULTS
--------------------------------------------------------------*/
html[it-pathname='/results'][it-remove-related-search-results='true'] ytd-shelf-renderer>#dismissible>.grid-subheader,
html[it-pathname='/results'][it-remove-related-search-results='true'] ytd-shelf-renderer>#dismissible>.grid-subheader+#contents, 
/*--------------------------------------------------------------
# REMOVE SHOTS RELATED SEARCH RESULTS
--------------------------------------------------------------*/
/*new:*/ html[it-pathname='/results'][it-remove-shorts-reel-search-results="true"] grid-shelf-view-model,
html[it-pathname='/results'][it-remove-shorts-reel-search-results="true"] ytd-reel-shelf-renderer,   
/*--------------------------------------------------------------
# HIDE ANIMATED THUMBNAILS
--------------------------------------------------------------*/
html[it-hide-animated-thumbnails='true'] #mouseover-overlay,
html[it-hide-animated-thumbnails='true'] .mouseover-play,
html[it-hide-animated-thumbnails='true'] .mouseover-img,
html[it-hide-animated-thumbnails='true'] #preview>ytd-video-preview,
/*--------------------------------------------------------------
# HIDE BUTTONS ON THUMBNAILS
--------------------------------------------------------------*/
html[it-hide-thumbnail-overlay='true'] #hover-overlays,
html[it-hide-thumbnail-overlay='true'] #player-controls.ytd-video-preview,
/*--------------------------------------------------------------
# HIDE THUMBNAIL ICON
--------------------------------------------------------------*/
html[it-hide-thumbnail-icon='true'] .yt-spec-avatar-shape.yt-spec-avatar-shape__button.yt-spec-avatar-shape__button--button-medium.yt-spec-avatar-shape__button--tappable,
html[it-hide-thumbnail-icon='true'] :is(ytd-video-renderer,ytd-promoted-video-renderer) a#channel-thumbnail,
/*------------------------------------------------------------------------------
# HIDE AI SUMMARY
------------------------------------------------------------------------------*/
html[it-hide-ai-summary='true'] ytd-expandable-metadata-renderer[has-video-summary],
/*--------------------------------------------------------------
# HIDE DOTS ON THUMBNAILS
--------------------------------------------------------------*/
html[it-hide-thumbnail-dots='true'] button#button[aria-label="Action menu"],
html[it-hide-thumbnail-dots="true"] button.yt-spec-button-shape-next[aria-label="More actions"],
/*-------------------------------------------------------------
# HIDE SPONSORED VIDEOS ON HOME PAGE
--------------------------------------------------------------*/
html[it-pathname='/'][it-hide-sponsored-videos-home="true"] ytd-rich-item-renderer:has(a[href^="https://www.googleadservices.com/pagead/aclk"]),
/*--------------------------------------------------------------
# EMBEDDED VIDEOS
 --------------------------------------------------------------*/
html[it-embeddedHidePauseOverlay='true'] .ytp-pause-overlay,
html[it-embeddedHideYoutubeLogo='true'] a.ytp-youtube-button svg path,
html[it-embeddedHideShare='true'] .ytp-share-button-visible:has(.ytp-share-icon),
/*--------------------------------------------------------------
# REMOVE MEMBER ONLY VIDEOS
--------------------------------------------------------------*/
html[it-remove-member-only='true'] ytd-grid-video-renderer:has(.badge-style-type-members-only),
html[it-remove-member-only='true'] ytd-rich-item-renderer:has(.badge-style-type-members-only),
/*--------------------------------------------------------------
# REMOVE CONTEXT BUTTONS ON SHORTS
--------------------------------------------------------------*/
html[it-remove-context-buttons='true'] yt-shorts-suggested-action-view-model.YtShortsSuggestedActionViewModelStaticHost,
/*--------------------------------------------------------------
# REMOVE HOMEPAGE SHORTS
--------------------------------------------------------------*/
html[it-pathname='/'][it-remove-home-page-shorts="true"] ytd-rich-section-renderer:has(ytd-rich-grid-slim-media[is-short]), 
html[it-pathname='/feed/subscriptions'][it-remove-subscriptions-shorts="true"] ytd-rich-section-renderer:has(ytd-rich-grid-slim-media[is-short]),
/*are the two lines above outdated?*/
html[it-pathname='/'][it-remove-home-page-shorts="true"] ytd-rich-section-renderer:has(ytd-rich-shelf-renderer[is-shorts]), 
html[it-pathname='/feed/subscriptions'][it-remove-subscriptions-shorts="true"] ytd-rich-section-renderer:has(ytd-rich-shelf-renderer[is-shorts]),
html[it-pathname='/feed/subscriptions'][it-remove-subscriptions-shorts="true"] ytd-item-section-renderer:has(a[href="/feed/subscriptions/shorts"]),
html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-reel-shelf-renderer,
html[it-pathname='/feed/trending'][it-remove-trending-shorts="true"] ytd-reel-shelf-renderer,
html[it-pathname='/feed/trending'][it-remove-trending-shorts="true"] ytd-video-renderer:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]),
html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-video-renderer:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
	display: none !important;
}
@supports not selector(:has(a, b)) {
	html[it-pathname='/'][it-remove-home-page-shorts="true"] ytd-rich-shelf-renderer[is-shorts],
	html[it-pathname='/feed/subscriptions'][it-remove-subscriptions-shorts="true"] ytd-rich-shelf-renderer[is-shorts] {
		display: none !important;
	}
}

/*
html[it-pathname='/feed/trending'][it-remove-trending-shorts="true"] ytd-rich-section-renderer:has(ytd-rich-grid-slim-media[is-short]),
html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-rich-section-renderer:has(ytd-rich-grid-slim-media[is-short]),

//html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-reel-shelf-renderer span#title:contains("Shorts"),
html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-reel-shelf-renderer path[d^="M17.77,10.32l-1.2-.5L18,9.06a3.74,3.74"],
html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-reel-shelf-renderer span#title:contains('Trending Shorts'),
html[it-pathname='/feed/history'][it-remove-history-shorts="true"] ytd-reel-shelf-renderer yt-horizontal-list-renderer,

html[it-pathname='/feed/trending'][it-remove-trending-shorts="true"] #contents.ytd-item-section-renderer:has(ytd-reel-shelf-renderer:has(span#title:contains("Shorts"))),
html[it-pathname='/feed/trending'][it-remove-trending-shorts="true"] #contents.ytd-item-section-renderer:has(ytd-reel-shelf-renderer:has(yt-horizontal-list-renderer)),
html[it-pathname='/feed/trending'][it-remove-trending-shorts="true"]  ytd-reel-shelf-renderer:has(yt-horizontal-list-renderer) {
	display: none !important
}  */
/*--------------------------------------------------------------
# YOUTUBE HOME PAGE
--------------------------------------------------------------*/
html[it-pathname='/'][it-youtube-home-page='search'] #body,
html[it-pathname='/'][it-youtube-home-page='search'] #content,
html[it-pathname='/'][it-youtube-home-page='search'] #guide[opened] {
	visibility: hidden !important; 
/*	pointer-events: none !important; */
}
html[it-pathname='/'][it-youtube-home-page='search'] body::-webkit-scrollbar {
  width: 0 !important;
}
html[it-pathname='/'][it-youtube-home-page='search']>body {
	overflow: hidden !important;
	width: 100vw !important;
	height: 100vh !important;
}
/* 
html[it-pathname='/'][it-youtube-home-page='search'] yt-searchbox,
html[it-pathname='/'][it-youtube-home-page='search'] ytd-searchbox,
html[it-pathname='/'][it-youtube-home-page='search'] ytm-searchbox
{
	position: fixed !important;
	z-index: 99999 !important;
	top: 0 !important;
	left: 0 !important;

	display: flex !important;
	visibility: visible !important;

	box-sizing: border-box !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	padding: 16px !important;

	pointer-events: all !important;

	justify-content: center !important;
	align-items: center !important;
	
}
html[it-pathname='/'][it-youtube-home-page='search'] yt-searchbox>form,
html[it-pathname='/'][it-youtube-home-page='search'] ytd-searchbox>form,
html[it-pathname='/'][it-youtube-home-page='search'] ytm-searchbox>form {
	width: 100% !important;
	max-width: 768px !important;
}  */

html[it-pathname='/'][it-youtube-home-page='search'] yt-searchbox,
html[it-pathname='/'][it-youtube-home-page='search'] ytd-searchbox,
html[it-pathname='/'][it-youtube-home-page='search'] ytm-searchbox,
html[it-pathname='/'][it-youtube-home-page='search'] input[name="search_query"],
html[it-pathname='/'][it-youtube-home-page='search'] #search {
	visibility: visible !important;}

html[it-pathname='/'][it-youtube-home-page='search'] input[name="search_query"],
html[it-pathname='/'][it-youtube-home-page='search'] #search {
	height: calc(16px + 0.4vh + 0.4vw);
	font-size: calc(13px + 0.4vh + 0.4vw);
}	
html[it-pathname='/'][it-youtube-home-page='search'] div[role="listbox"],
html[it-pathname='/'][it-youtube-home-page='search'] div[role="presentation"] {	
	font-size: calc(12px + 0.2vh + 0.2vw);
}
html[it-pathname='/'][it-youtube-home-page='hidecontent'] div #content{	
	display: none! important;
}
/*--------------------------------------------------------------
# COLLAPSE OF SUBSCRIPTION SECTIONS
-------------------------------------------------------------*/
html[it-pathname='/feed/subscriptions'][it-collapse-of-subscription-sections='true'] ytd-item-section-renderer h2 #title {
	overflow: visible !important;
	cursor: pointer !important;
}
html[it-pathname='/feed/subscriptions'][it-collapse-of-subscription-sections='true'] ytd-item-section-renderer h2 #title::after {
	position: relative !important;
	top: 2px !important;

	display: inline-block !important;
	width: 6px !important;
	height: 6px !important;
	margin: 0 0 0 12px !important;

	content: '' !important;
	transform: rotate(45deg) !important;
	transform-origin: center center !important;

	border-top: currentColor 2px solid !important;
	border-left: currentColor 2px solid !important;
}

html[it-pathname='/feed/subscriptions'][it-collapse-of-subscription-sections='true'] ytd-item-section-renderer.it-section-collapsed h2 #title::after {
	top: -3px !important;
	transform: rotate(-135deg) !important;
}

html[it-pathname='/feed/subscriptions'][it-collapse-of-subscription-sections='true'] ytd-item-section-renderer .grid-subheader+#contents {
	overflow: hidden !important;
}

html[it-pathname='/feed/subscriptions'][it-collapse-of-subscription-sections='true'] ytd-item-section-renderer.it-section-collapsed .grid-subheader+#contents {
	height: 0 !important;
}

/*--------------------------------------------------------------
# SCROLL BAR
--------------------------------------------------------------*/
html[it-scroll-bar=hidden] body {overflow-y: overlay;}
html[it-scroll-bar=hidden] ::-webkit-scrollbar {display: none;}
html[it-scroll-bar=hidden],
html[it-scroll-bar=hidden][dark],
html[it-scroll-bar=hidden] ytd-app {
    scrollbar-color: unset;
}
/*--------------------------------------------------------------
# ADD "SCROLL TO TOP"
--------------------------------------------------------------*/
#it-scroll-to-top {
	position: fixed !important;
	z-index: 999 !important;
	right: 32px !important;
	bottom: 32px !important;

	display: flex !important;
	visibility: hidden !important;

	box-sizing: border-box !important;
	width: 56px !important;
	height: 56px !important;

	cursor: pointer !important;
	transition: background 500ms 250ms, transform 500ms, box-shadow 525ms !important;
	transform: translateY(88px) !important;
	pointer-events: none !important;

	opacity: 0 !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #ff4766, #f50029) !important;
	box-shadow: 0 2px 1px 1px #d60024, 0 4px 4px rgb(82, 0, 14, .32) !important;

	justify-content: center !important;
	align-items: center !important;
}

#it-scroll-to-top>svg {
	width: 24px !important;
	fill: #fff !important;
}

html[it-scroll-to-top='true'] #it-scroll-to-top {
	visibility: visible !important;
	opacity: 1 !important;

	transform: translateY(0px) !important;
	pointer-events: all !important;}

html[it-scroll-to-top='true'] #it-scroll-to-top:focus,
html[it-scroll-to-top='true'] #it-scroll-to-top:hover {
	transition: background 250ms 125ms, transform 250ms, box-shadow 275ms !important;
	transform: translateY(4px) scale(.975) !important;
	box-shadow: 0 1px 1px 0 #d60024, 0 1px 2px rgb(82, 0, 14, .32) !important;
}
/*--------------------------------------------------------------
# Popup Window Button
--------------------------------------------------------------*/
.it-popup-window {
	font-family: inherit;

	position: absolute;
	z-index: 999 !important;
	bottom: 36px;
	left: 4px;
	opacity: 0;
	transition: opacity 4s;
   
	width: 28px;
	height: 28px;

	cursor: pointer;
	text-align: center;

	color: #888;
	border: none;
	border-radius: 2px;
	background: rgba(0, 0, 0, .8);
}

.it-popup-window svg {
	position: absolute;
	top: 4px;
	left: 4px;

	width: 20px;
	height: 20px;

	pointer-events: none;

	fill: currentColor;
}

*:hover>.it-popup-window {
	opacity: 1 !important;
	transition: opacity 0s;
}
/*--------------------------------------------------------------
# MARK WATCHED VIDEOS
--------------------------------------------------------------*/
.it-mark-watched-videos {
	font-family: inherit !important;
	font-size: inherit !important;

	position: absolute !important;
	z-index: 999 !important;
	bottom: 4px !important;
	left: 4px !important;

	visibility: hidden !important;

	width: 28px !important;
	height: 28px !important;
	padding: 2px !important;

	content: '' !important;
	cursor: pointer !important;
	text-align: center !important;

	color: #888 !important;
	border: none !important;
	border-radius: 2px !important;
	background-color: rgba(0, 0, 0, .8) !important;

	fill: #fff !important;
}

.it-mark-watched-videos[data-watched] {
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23FFF" d="M12 4.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/%3E%3C/svg%3E') !important;
}

#thumbnail.ytd-thumbnail:hover .it-mark-watched-videos {
	visibility: visible !important;
}

.it-mark-watched-videos[watched]>svg:first-child,
.it-mark-watched-videos:not([watched])>svg:last-child {
	display: none !important;
}

.it-mark-watched-videos:hover {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.it-mark-watched-videos::after {
	font-size: 1.2em !important;
	font-weight: 500 !important;

	position: absolute !important;
	top: 0 !important;
	left: 100% !important;

	display: flex !important;
	overflow: hidden !important;

	width: 0 !important;
	height: 28px !important;

	content: 'Watched';
	transition: width 200ms !important;
	text-transform: uppercase !important;

	color: var(--yt-spec-icon-active-other, #fff) !important;
	border-top-right-radius: 2px !important;
	border-bottom-right-radius: 2px !important;
	background: rgba(0, 0, 0, .8) !important;

	align-items: center !important;
	justify-content: center !important;
}

.it-mark-watched-videos:hover::after {
	width: 96px !important;
}
 	
html[it-hide-watched-videos='true'] #dismissible:has(.it-mark-watched-videos[watched]) {
	opacity: .45;
	max-height: 4rem;
	overflow: hidden;
	transition: max-height 0.4s ease 0.1s;
	}
html[it-hide-watched-videos='true'] #dismissible:has(.it-mark-watched-videos[watched]) ytd-thumbnail {
	visibility: hidden;
	max-width: 0;
	transition: max-width 0.4s ease 0.1s;
	}
html[it-hide-watched-videos='true'] #dismissible:has(.it-mark-watched-videos[watched]):hover {
	opacity: 1;
	overflow: visible;
	max-height: 120px;
	transition: max-height 0.4s ease 1.1s;
	}
html[it-hide-watched-videos='true'] #dismissible:has(.it-mark-watched-videos[watched]):hover ytd-thumbnail {
	visibility: visible;
	max-width: 220px;
	transition: max-width 0.4s ease 1.1s;
	}

/*--------------------------------------------------------------
# COMPACT THEME
--------------------------------------------------------------*/
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(2) > h3,
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(3) > h3,
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(4) > h3 {
	cursor: pointer;
	width: calc(100% - 12px);
	border-radius: 10px;
	min-height: var(--paper-item-min-height,48px);
	display: flex;
	align-items: center;
	user-select: none;
}
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(2) > h3:hover,
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(3) > h3:hover,
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(4) > h3:hover {
	background-color: var(--yt-spec-badge-chip-background);
}
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(2) > h3:active,
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(3) > h3:active,
html[it-channel-compact-theme='true'] #sections > ytd-guide-section-renderer:nth-child(4) > h3:active {
	background-color: var(--yt-spec-10-percent-layer);
}
