/*--------------------------------------------------------------
>>> HEADER:
----------------------------------------------------------------
# Position
# Improve logo
# Hide right buttons
# Hide country code
# Hide voice search button
--------------------------------------------------------------*/
html[it-header-transparent=true] ytd-masthead#masthead {background: transparent !important;}
html[it-header-transparent=true] #background.ytd-masthead {background-color: rgba(230, 230, 230, 0.1) !important;}
html[it-header-transparent=true] ytd-masthead[frosted-glass] #background.ytd-masthead {backdrop-filter: blur(1px) !important;}
html[it-header-transparent=true] {  --ytd-searchbox-background: rgba(var(--ytd-searchbox-background), 0.5) !important;}

/* Header-transparent alternative by @joaolscosta */
/* Change opacity when scrolling down */
html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0;}
html[it-header-transparent-alternative=true] ytd-masthead #logo-icon,
/* Hide country code when scrolling down */
html[it-header-transparent-alternative=true][data-scroll-direction=down] #country-code,
/* Hide the filter chips*/
html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-feed-filter-chip-bar-renderer {display: none !important;}
/* Define opacity for the icons */
html[it-header-transparent-alternative=true] ytd-masthead #end {opacity: 1 !important; transition: opacity 2s ease;}	
/* Show the voice search button when scrolled to the top */
html[it-header-transparent-alternative=true] #voice-search-button {display: block !important; background-color: black !important;}
/* TURN TOP BAR SEARCH BUTTONS BARELY VISIBLE */
/* Make top header bar transparent */
html[it-header-transparent-alternative=true] ytd-masthead,
html[it-header-transparent-alternative=true] ytd-masthead #masthead,
html[it-header-transparent-alternative=true] ytd-masthead #background,
html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt,
html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container,
html[it-header-transparent-alternative=true] ytd-masthead #search-input input {opacity: 0.7 !important; background: transparent; box-shadow: none; border: none;}
html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: transparent !important;}
html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input input,
/* Make other icons barely visible */
html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0.7 !important;}
/* Make the entire search bar transparent with transparent border */
html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important;}
/* Fill search button with black */
html[it-header-transparent-alternative=true] ytd-masthead #search-icon-legacy {background-color: black !important; opacity: 1 !important;}
/* Make chips filter bar barely visible */
html[it-header-transparent-alternative=true] #chips-wrapper {opacity: 0.7 !important;}

/* Fix for filter tabs being hidden by hover header */
html[it-header-position="hover"] #masthead-container[it-search-focus="true"] ~ ytd-page-manager ytd-feed-filter-chip-bar-renderer,
html[it-header-position="hover"] #masthead-container[it-search-focus="true"] ~ ytd-page-manager ytd-search-sub-menu-renderer {
  transform: translateY(56px) !important;
  transition: transform 0.2s ease-in-out;
  position: relative;
  z-index: 6;
}
html[it-header-position="hover"]  #masthead-container[it-search-focus="true"]  ~ ytd-page-manager  #contents.ytd-section-list-renderer {
  padding-top: 56px;
}

/* Ensure filter chips are visible when header is hovered */
html[it-header-position="hover"] #masthead-container:hover ~ ytd-page-manager ytd-feed-filter-chip-bar-renderer,
html[it-header-position="hover"] #masthead-container:hover ~ ytd-page-manager ytd-search-sub-menu-renderer {
  transform: translateY(56px) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/*--------------------------------------------------------------
# POSITION
--------------------------------------------------------------*/

html[it-header-position=hidden] #masthead-container:not([it-search-focus=true]),
html[data-page-type=video][it-header-position=hidden_on_video_page] #masthead-container:not([it-search-focus=true]) {
	transform: translateY(-100%);
}
html[it-header-position=hidden] tp-yt-app-drawer#guide #guide-spacer,
html[it-header-position=hidden] tp-yt-app-drawer:not([opened]) #header ytd-topbar-logo-renderer,
html[it-header-position=hidden] tp-yt-app-drawer:not([opened]) #header .it-button,
html[it-header-position=hover] tp-yt-app-drawer#guide #guide-spacer,
html[it-header-position=hover] tp-yt-app-drawer:not([opened]) #header ytd-topbar-logo-renderer,
html[it-header-position=hover] tp-yt-app-drawer:not([opened]) #header .it-button,
html[it-header-position=static] tp-yt-app-drawer#guide #guide-spacer,
html[it-header-position=static] tp-yt-app-drawer:not([opened]) #header ytd-topbar-logo-renderer,
html[it-header-position=static] tp-yt-app-drawer:not([opened]) #header .it-button,
html[data-page-type=video][it-header-position=hidden_on_video_page] tp-yt-app-drawer#guide #guide-spacer,
html[data-page-type=video][it-header-position=hover_on_video_page] tp-yt-app-drawer#guide #guide-spacer {
	display:none;
}

html[it-header-position=hover] #masthead-container,
html[it-header-position=hover] tp-yt-app-drawer,
html[it-header-position=hover] ytd-mini-guide-renderer,
html[data-page-type='video'][it-header-position=hover_on_video_page] #masthead-container,
html[data-page-type='video'][it-header-position=hover_on_video_page] tp-yt-app-drawer,
html[data-page-type='video'][it-header-position=hover_on_video_page] ytd-mini-guide-renderer,
html[it-header-position=static] tp-yt-app-drawer,
html[it-header-position=static] ytd-mini-guide-renderer {
	z-index: 7 !important;
}

html[it-header-position=hidden] ytd-page-manager#page-manager,
html[data-page-type='video'][it-header-position=hidden_on_video_page] ytd-page-manager#page-manager,
html[it-header-position=hover] ytd-page-manager#page-manager,
html[data-page-type='video'][it-header-position=hover_on_video_page] ytd-page-manager#page-manager,
html[it-header-position=hidden][data-page-type='channel'] tp-yt-app-header#header,
html[it-header-position=hover][data-page-type='channel'] tp-yt-app-header#header,
html[it-header-position=static] ytd-page-manager#page-manager {
	margin-top: 0;
}

html[it-header-position=hover]:not([it-improvedtube-search=true]) #masthead-container,
html[data-page-type='video'][it-header-position=hover_on_video_page]:not([it-improvedtube-search=true]) #masthead-container {
	transition: all 320ms ease-in-out;
	transform: translateY(-38%);
	height: 68px;
	opacity: 0;
	backdrop-filter: blur(4px);
}

html[it-header-position=hidden] #masthead-container:not([it-search-focus=true]):focus-within,
html[data-page-type=video][it-header-position=hidden_on_video_page] #masthead-container:not([it-search-focus=true]):focus-within,
html[it-header-position=hover] #masthead-container:hover,
html[it-header-position=hover] #masthead-container:focus-within,
html[it-header-position=hover][it-search-focus=true] #masthead-container,
html[data-page-type='video'][it-header-position=hover_on_video_page] #masthead-container:hover,
html[data-page-type='video'][it-header-position=hover_on_video_page] #masthead-container:focus-within,
html[data-page-type='video'][it-header-position=hover_on_video_page][it-search-focus=true] #masthead-container,
html[it-header-position=hover] #masthead-container:hover #background,
html[it-header-position=hover] #masthead-container:focus-within #background,
html[it-header-position=hover][it-search-focus=true] #masthead-container #background,
html[data-page-type='video'][it-header-position=hover_on_video_page] #masthead-container:hover #background,
html[data-page-type='video'][it-header-position=hover_on_video_page] #masthead-container:focus-within #background,
html[data-page-type='video'][it-header-position=hover_on_video_page][it-search-focus=true] #masthead-container #background {
	transform: translateY(0%);
	opacity: 1 !important;
}

html[it-header-position=static] .ytd-app:not([masthead-hidden_]) #masthead-container {
	position: static;
	z-index: 7 !important;
}

html[it-header-position=hover_on_video_page]:not([data-page-type=video]) tp-yt-app-drawer:not([opened]) #header,
html[it-header-position=hover]:not([data-page-type=video]) tp-yt-app-drawer:not([opened]) #header,
html[it-header-position=hidden]:not([data-page-type=video]) tp-yt-app-drawer:not([opened]) #header,
html[it-header-position=static]:not([data-page-type=video]) tp-yt-app-drawer:not([opened]) #header {
	position: absolute;
	visibility: hidden;
	left: 240px;
	top: 120px;
	padding: 0 16px;
	background: var(--yt-spec-brand-background-solid);
}

html[it-header-position=hover] tp-yt-app-drawer #header,
html[it-header-position=hidden] tp-yt-app-drawer #header,
html[it-header-position=static] tp-yt-app-drawer #header {
	display: flex !important;
}

/*
html[it-header-position=hover] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[it-header-position=hidden] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[it-header-position=static] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
	top: 9px !important;
}*/
/*--------------------------------------------------------------
# WEBSITE LOGO
--------------------------------------------------------------*/
html[it-header-hide-logo='true'] #logo-icon yt-icon-shape,
html[it-header-hide-logo='true'] #logo-icon .yt-icon-shape {
	visibility:hidden;
}
/* Simple fix: Add modern YouTube logo selectors */
html[it-header-improve-logo='true'] ytd-topbar-logo-renderer path[fill='#FF0000'],
html[it-header-improve-logo='true'] ytd-topbar-logo-renderer polygon[fill='#FFFFFF'],
html[it-header-improve-logo='true'] #logo path[fill='#FF0000'],
html[it-header-improve-logo='true'] #logo polygon[fill='#FFFFFF'] {
	fill: rgb(44, 44, 44) !important;
}
html[it-header-improve-logo='true'][dark] ytd-topbar-logo-renderer path[fill='#FF0000'],
html[it-header-improve-logo='true'][dark] #logo path[fill='#FF0000'] {
	fill: rgb(70, 70, 70) !important;
}
/*--------------------------------------------------------------
# HIDE RIGHT BUTTONS
--------------------------------------------------------------*/
html[it-header-hide-right-buttons='true'] #masthead #container #end {visibility: hidden !important; pointer-events: none !important;}
/*--------------------------------------------------------------
# HIDE COUNTRY CODE
--------------------------------------------------------------*/
html[it-header-hide-country-code='true'] #logo #country-code,
/*--------------------------------------------------------------
# HIDE VOICE SEARCH BUTTON
--------------------------------------------------------------*/
html[it-hide-voice-search-button='true'] #voice-search-button  {
	display: none !important;
}
