/*
	theme.css

	this contains css code supporting 3 possible themes
	syntax involves using html[data-theme-display='theme_type'] { css selector here }
*/

html[data-theme-display='blackhole'] {
	--main-background-color: black;
	--white-color: white;
	--gray-color: #adadad;
}

html[data-theme-display='darkerdarkmode'] {
	--main-background-color: #0f0f0f;
	--white-color: white;
	--gray-color: #adadad;
}

html[data-theme-display='darkmode'] {
	--main-background-color: #212121;
	--white-color: white;
	--gray-color: #adadad;
}



/* share the same css selectors */
html[data-theme-display='blackhole'] .touch-by-touch:active,
html[data-theme-display='darkmode'] .touch-by-touch:active,
html[data-theme-display='darkerdarkmode'] .touch-by-touch:active {
	background: rgba(255, 255, 255, 0.1);
}

html[data-theme-display='blackhole'] .themed-borders,
html[data-theme-display='darkmode'] .themed-borders,
html[data-theme-display='darkerdarkmode'] .themed-borders {
	border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-display='blackhole'] .engagement-panel-drag-line,
html[data-theme-display='darkmode'] .engagement-panel-drag-line,
html[data-theme-display='darkerdarkmode'] .engagement-panel-drag-line {
	background: rgba(255, 255, 255, 0.15);
}

html[data-theme-display='blackhole'] .general-skeleton,
html[data-theme-display='darkmode'] .general-skeleton,
html[data-theme-display='darkerdarkmode'] .general-skeleton {
	background: rgba(255, 255, 255, 0.1);
}

html[data-theme-display='blackhole'] body,
html[data-theme-display='darkmode'] body,
html[data-theme-display='darkerdarkmode'] body {
	background: var(--main-background-color) !important;
}

html[data-theme-display='blackhole'] .gray-text,
html[data-theme-display='darkmode'] .gray-text,
html[data-theme-display='darkerdarkmode'] .gray-text {
	color: var(--gray-color) !important;
}



#topbar {
	background: var(--main-bankground-color) !important;
	border-bottom: 1px solid rgb(48, 48, 48);
}

html[data-theme-display='blackhole'] footer,
html[data-theme-display='darkmode'] footer,
html[data-theme-display='darkerdarkmode'] footer {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme-display='blackhole'] .section-renderer,
html[data-theme-display='darkmode'] .section-renderer,
html[data-theme-display='darkerdarkmode'] .section-renderer {
	background: rgba(255, 255, 255, 0.1);
}

#app-title-text,
#fallback-header-name,
.heading-two-section-body-text,
#main-settings-title {
	color: var(--white-color);
}


html[data-theme-display='blackhole'] .heading-four-section-body-text,
html[data-theme-display='darkmode'] .heading-four-section-body-text,
html[data-theme-display='darkerdarkmode'] .heading-four-section-body-text {
	color: var(--gray-color);
}

.sidenav {
	background: #161616;
}

.sidenav a:hover {
	background: #262626;
	color: var(--gray-color);
}

.sidenav a:active {
	background: rgba(30, 124, 255, 0.15) !important;
	color: dodgerblue;
}

#comment-expand-container, #videos-icon > div > svg, #about-icon > div > svg {
	fill: var(--white-color);
}

html[data-theme-display='blackhole'] #video-metadata.video-metadata-renderer,
html[data-theme-display='darkmode'] #video-metadata.video-metadata-renderer,
html[data-theme-display='darkerdarkmode'] #video-metadata.video-metadata-renderer {
	color: var(--gray-color);
}

html[data-theme-display='blackhole'] #follow-transcript-text,
html[data-theme-display='darkmode'] #follow-transcript-text,
html[data-theme-display='darkerdarkmode'] #follow-transcript-text {
	color: var(--gray-color);
}

#video.title, #transcript-text-header, #more-from-author-text-header {
	font-weight: 500;
	color: var(--white-color);
}

#statistics {
	color: var(--white-color);
}

.vote-count {
	color: var(--gray-color);
}

#video-average-rating {
	color: var(--gray-color);
}

#yt-channel-name-link {
	color: var(--white-color);
}

html[data-theme-display='blackhole'] a.yt-channel-sub-count,
html[data-theme-display='darkmode'] a.yt-channel-sub-count,
html[data-theme-display='darkerdarkmode'] a.yt-channel-sub-count {
	color: var(--gray-color) !important;
}

html[data-theme-display='blackhole'] #subscribe-text-link,
html[data-theme-display='darkmode'] #subscribe-text-link,
html[data-theme-display='darkerdarkmode'] #subscribe-text-link {
	color: rgb(255, 84, 84);
}

html[data-theme-display='blackhole'] .video-id-input-field,
html[data-theme-display='darkmode'] .video-id-input-field,
html[data-theme-display='darkerdarkmode'] .video-id-input-field {
	background-color: rgba(255, 255, 255, 0.1);
}

html[data-theme-display='blackhole'] #show-transcript-button,
html[data-theme-display='darkmode'] #show-transcript-button,
html[data-theme-display='darkerdarkmode'] #show-transcript-button {
	border-color: var(--call-to-action-color-dark);
	color: var(--call-to-action-color-dark);
}

html[data-theme-display='blackhole'] #sign-in-button,
html[data-theme-display='darkmode'] #sign-in-button,
html[data-theme-display='darkerdarkmode'] #sign-in-button {
	background: var(--call-to-action-color-dark);
	color: black;
}

.menu-buttons-text,
.inner-button-icons {
	color: var(--white-color);
}

#createbutton-icon {
	border-color: var(--white-color) !important;
}

html[data-theme-display='blackhole'] .menu-buttons:active,
html[data-theme-display='darkmode'] .menu-buttons:active,
html[data-theme-display='darkerdarkmode'] .menu-buttons:active {
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
	transition: .2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.button-icon {
	fill: var(--white-color);
}

.subpage-title {
	color: var(--white-color);
	font-weight: 600;
}

.intfuncs-text-style {
	color: var(--gray-color);
}

#description-text {
	color: var(--white-color) !important;
}

#comment-caption {
	color: var(--white-color);
}

html[data-theme-display='blackhole'] .comment-counts,
html[data-theme-display='darkmode'] .comment-counts,
html[data-theme-display='darkerdarkmode'] .comment-counts {
	color: var(--gray-color) !important;
}

input {
	color: var(--white-color);
}

html[data-theme-display='blackhole'] #video-title-desc,
html[data-theme-display='darkmode'] #video-title-desc,
html[data-theme-display='darkerdarkmode'] #video-title-desc {
	color: var(--white-color);
}

#yt-channel-name-link-desc {
	color: var(--white-color);
}

#video-stats-desc, #ryd-data-estimated-container {
	color: var(--white-color);
}

.grouped-text-renderer-title {
	color: var(--gray-color) !important;
}

#more-button {
	color: var(--white-color);
}

#thick-border {
	border: 4px solid rgba(255, 255, 255, 0.1);
}

html[data-theme-display='blackhole'] .transparent-button-with-border,
html[data-theme-display='darkmode'] .transparent-button-with-border,
html[data-theme-display='darkerdarkmode'] .transparent-button-with-border {
	border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme-display='blackhole'] .loading-author-views-and-date.skeleton,
html[data-theme-display='blackhole'] .ghost-action-button-skeleton > .icon-circle-face,
html[data-theme-display='blackhole'] .ghost-action-button-skeleton > .text-label-face,
html[data-theme-display='blackhole'] #channel-avatar-skeleton,
html[data-theme-display='blackhole'] #channel-information-skeleton,
html[data-theme-display='blackhole'] #published-on-date-or-comment-counts,
html[data-theme-display='blackhole'] #video-description-or-comment-preview > .skeleton-bars,
html[data-theme-display='darkmode'] .loading-author-views-and-date.skeleton,
html[data-theme-display='darkmode'] .ghost-action-button-skeleton > .icon-circle-face,
html[data-theme-display='darkmode'] .ghost-action-button-skeleton > .text-label-face,
html[data-theme-display='darkmode'] #channel-avatar-skeleton,
html[data-theme-display='darkmode'] #channel-information-skeleton,
html[data-theme-display='darkmode'] #published-on-date-or-comment-counts,
html[data-theme-display='darkmode'] #video-description-or-comment-preview > .skeleton-bars,
html[data-theme-display='darkerdarkmode'] .loading-author-views-and-date.skeleton,
html[data-theme-display='darkerdarkmode'] .ghost-action-button-skeleton > .icon-circle-face,
html[data-theme-display='darkerdarkmode'] .ghost-action-button-skeleton > .text-label-face,
html[data-theme-display='darkerdarkmode'] #channel-avatar-skeleton,
html[data-theme-display='darkerdarkmode'] #channel-information-skeleton,
html[data-theme-display='darkerdarkmode'] #published-on-date-or-comment-counts,
html[data-theme-display='darkerdarkmode'] #video-description-or-comment-preview > .skeleton-bars {
	background: rgba(255, 255, 255, 0.1);
}

.loading-video-thumbnails,
.img-author-skeleton,
.video-title-skeleton,
.video-author-skeleton,
.shorts-skeleton {
	background: rgba(255, 255, 255, 0.1);
}

html[data-theme-display='blackhole'] .loaded-video-title-renderer.general-feed,
html[data-theme-display='darkmode'] .loaded-video-title-renderer.general-feed,
html[data-theme-display='darkerdarkmode'] .loaded-video-title-renderer.general-feed {
	color: var(--white-color);
}

html[data-theme-display='blackhole'] .loaded-video-author-skeleton-renderer.general-feed,
html[data-theme-display='darkmode'] .loaded-video-author-skeleton-renderer.general-feed,
html[data-theme-display='darkerdarkmode'] .loaded-video-author-skeleton-renderer.general-feed {
	color: var(--gray-color);
}