/*--------------------------------------------------------------
>>> COMMENTS:
----------------------------------------------------------------
# Comments
	# Hidden
	# Collapsed
# Squared User Images
# Hide avatars
# Sidebar
--------------------------------------------------------------*/
/*Comments*/ 
html[it-comments='hidden'] ytd-comments,
/*AVATARS-*/ 
html[it-hide-author-avatars='true'] ytd-comments #author-thumbnail,
html[it-hide-author-avatars='true'] ytd-comments #creator-thumbnail,
html[it-hide-author-avatars='true'] ytd-comments #hearted-thumbnail 
{display: none !important;}
/*--------------------------------------------------------------
# SQUARED USER IMAGES
--------------------------------------------------------------*/
html[it-squared-user-images='true'] #avatar.ytd-shelf-renderer,
html[it-squared-user-images='true'] yt-img-shadow,
html[it-squared-user-images='true'] #yt-masthead-user .yt-masthead-user-icon {
	border-radius: unset !important;
}

/*--------------------------------------------------------------
# COLLAPSED
--------------------------------------------------------------*/
html[it-comments='collapsed'][data-page-type=video] ytd-comments:not([it-activated]) ytd-comments-header-renderer::after {
	content: 'Show more' !important;
}

html[it-comments='collapsed'][data-page-type=video] ytd-comments[it-activated] ytd-comments-header-renderer::after {
	content: 'Show less' !important;
}

html[it-comments='collapsed'][data-page-type=video] ytd-comments ytd-comments-header-renderer::after {
	font-family: inherit !important;
	font-size: 1.6rem !important;
	font-weight: 400 !important;

	display: flex !important;

	width: 100% !important;
	height: 48px !important;
	margin: 16px 0 0 !important;

	color: var(--yt-spec-text-primary) !important;
	border-bottom: 1px solid var(--yt-spec-10-percent-layer) !important;

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

html[it-comments='collapsed'][data-page-type=video] ytd-comments:not([it-activated]) ytd-item-section-renderer>#spinner-container,
html[it-comments='collapsed'][data-page-type=video] ytd-comments:not([it-activated]) ytd-item-section-renderer>#contents,
html[it-comments='collapsed'][data-page-type=video] ytd-comments:not([it-activated]) ytd-item-section-renderer>#continuations {
	visibility: hidden !important;
	pointer-events: none !important;
}

@media screen and (min-width: 1599px) {
	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true] #player {margin-left: -20px !important;}
	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true] #columns {display:flex !important; max-width:100% !important;}
	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true] #comments {max-width: min(850px, 19vw) !important; margin-left:-12px;} 
	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true][it-sidebar-left='true'] #comments {margin-right: -25px  !important;} 
	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true] #related {margin-right: -22px !important; max-width: max(360px, 18vw) !important;}
	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true] #secondary {margin-right: -22px !important; max-width: max(360px, 18vw) !important;}

	html[data-page-type=video][it-comments-sidebar-simple='true'][it-columns=true]:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary {
		min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important;
	}
}

/* 2 COLS FEATURE */
@media screen and (min-width: 1952px) {	
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy #related {flex-shrink: 4; min-width: 300px;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy:not([theater]):not([fullscreen]) #related {width: auto !important;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy #columns {max-width: 100%;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy #secondary {min-width: 300px !important; max-width: 420px;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy #primary {
		flex: 0 0 auto;
		max-width: 1280px !important;
	}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {flex-shrink: 2;}

	/*--------------------------------------------------------------
		#TODO: there should be 2 new option in settings:
			1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated).
			2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1952px+ wide-screens, because player resize
			is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too).
		Might also think on the edge-cases were both options are active
	--------------------------------------------------------------*/
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy #secondary {order: 6;} /*TO DELETE once top is implemented*/
	
	
	/* PADDINGS */
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true]:not([it-sidebar-left='true']) ytd-watch-flexy #primary {padding: 0 14px 0 24px;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true]:not([it-sidebar-left='true']) ytd-watch-flexy #secondary {padding-right: 0;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true]:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding-left: 14px; padding-right: 14px;}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy #primary {padding: 0 14px}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner {padding-right: 24px; padding-left: 14px}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related,
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy:not([theater]):not([fullscreen]) #related{height: inherit; overflow-y: scroll}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true]:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy #related > :first-child {padding-top: 24px;}
	
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy #related{padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true]:not([it-sidebar-left='true']) ytd-watch-flexy #related{padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy[theater] #columns,
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] ytd-watch-flexy[fullscreen] #columns {height: auto}
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)}

	/* or unset */
	html[data-page-type=video][it-comments-sidebar='true'][it-columns=true] #columns {max-width: 2400px !important;}
} 

@media screen and (min-width: 1000px) and (max-width: 1951px) {
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {max-width: calc((100% - 420px) - 48px) !important;} /*UP TO (-658px)*/
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {width: unset !important; max-width: 420px !important;} /*UP TO 658px*/
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns {max-width: 100%; min-width: unset !important;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {margin-right: 0; padding-right: 0 !important; min-width: 300px !important;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-left: 24px; padding-right: 24px;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #primary,
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary {
		margin: 0;
		padding: 24px 24px 0 24px;
	}
	
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {justify-content: flex-start !important; overflow-x: scroll;}
	
}
@media screen and (min-width: 1000px){
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary, 
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0; flex-grow: 1;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before {content: ""; height: 24px; display: block;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;}
	html[data-page-type=video][it-comments-sidebar='true'][it-player-size="do_not_change"] ytd-watch-flexy #primary-inner {padding-top: 24px;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;}

	/* BORDERS */
	html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)}
	html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)}


	/* DIFFERENT HEADERS HEIGHT */
	html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */
	html[data-page-type=video][it-comments-sidebar='true']:not([it-header-position^=h]) ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* temporary fix */
	html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns {
		height: calc(100vh - 56px);
	}
	html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns,
	html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {
		height: calc(100vh - 14px);
	}
	html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns,
	html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {
		height: calc(100vh);
	}
	
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary,
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {
		height: inherit;
		overflow-y: scroll;
		overflow-x: hidden !important;
	}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {overflow: hidden;}
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns
	html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns {
		height: auto;
	}
}


html[data-page-type=video][it-comments-sidebar='true'] #contentContainer::after {pointer-events: none !important;} /*DISABLES the swap-from-left channels sidebar*/
html[data-page-type=video][it-comments-sidebar='true'] ytd-reel-shelf-renderer {width: 100%; padding: 0 16px; box-sizing: border-box;}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #playlist,
html[data-page-type=video][it-comments-sidebar='true'] ytd-live-chat-frame#chat, 
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #donation-shelf {
	width: 100% !important;
	min-width: unset !important;
}

/* GRID RELATED */
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer,
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-radio-renderer,
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-playlist-renderer,
html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {
	min-width: 300px;
	max-width: 420px !important;
	flex-grow: 1;
	flex-basis: 0 !important;
	margin-right: 8px;
}

/* TO FIX #1693 untested: */
html[data-page-type=video]:not([it-player-size]) #playlist #items,
html[data-page-type=video]:not([it-player-size='do_not_change']) #playlist #items {
	max-height: min(var(--it-player-height), 77vh);
	padding-bottom: 0;
}  

/* CUSTOM ENHANCEMENTS */
html[data-page-type=video][it-comments-sidebar='true'] #playlist #items {max-height: calc(70px * 4 + 4px); padding-bottom: 0;}    /* currently shows up to 4 videos */

/* these were global without [it-comments-sidebar='true']  @D-Rekk */
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #chat > tp-yt-paper-button#label {width:calc(100% - 40px);}
html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer {right: 44px !important;}
