/* Header bar's URL bar */

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

#urlbar {
	--urlbar-height: 34.00px;
	--urlbar-toolbar-height: 34.00px !important;
}

#urlbar-container {
	--urlbar-container-height: 34px !important;

	@media (max-width: 630px) {
		width: auto !important;
	}
}

/* Center the URL bar */
toolbarspring {
	max-width: 10000px !important;
}

/* URL bar */
#urlbar {
	box-shadow: none !important;
	&[breakout] {
		width: calc(var(--urlbar-width) - var(--gnome-toolbar-spacing)) !important;
	}

	.urlbar-background {
		box-shadow: var(--gnome-entry-box-shadow) !important;
		border: 0 !important;
		border-radius: var(--gnome-entry-radius) !important;
		background: transparent !important;
	}
	
	.urlbar-input-container {
		padding: 0 !important;
	}
}

.urlbar-input::placeholder, .searchbar-textbox::placeholder {
	opacity: 0.85 !important;
}

#urlbar-searchmode-switcher {
	background-color: transparent !important;
	border-radius: var(--gnome-button-radius) !important;
	&:hover {
		background-color: var(--gnome-hover-color) !important;
	}
	&:active, &[open] {
		background-color: var(--gnome-active-color) !important;
	}
	#urlbar[searchmode] & {
		background-color: var(--gnome-selected-color) !important;
		border-start-end-radius: 0 !important;
		border-end-end-radius: 0 !important;			
		&:hover {
			background-color: var(--gnome-selected-hover-color) !important;
		}
		&:active, &[open] {
			background-color: var(--gnome-selected-active-color) !important;
		}
	}
}
#searchmode-switcher-icon {
	margin-inline-start: 6px !important;
}
#searchmode-switcher-chicklet {
	background-color: var(--gnome-button-background) !important;
	border-start-end-radius: var(--gnome-button-radius) !important;
	border-end-end-radius: var(--gnome-button-radius) !important;
}
#searchmode-switcher-title {
	color: var(--gnome-window-color);
	padding-inline: 4px !important;
}
#searchmode-switcher-close {
	background-size: 16px !important;
	border-radius: 24px !important;
	width: 24px !important;
	height: 24px !important;
}

/* URL bar results */
.urlbarView {
	background: transparent !important;
	color: var(--gnome-window-color) !important;
	margin: 11px 0 0 -3px !important;
    position: absolute !important;
    box-shadow: var(--gnome-menu-shadow) !important;
    border-radius: 12px !important;
	width: 100% !important;
}

/* Search bar result */
#PopupSearchAutoComplete {
  margin-top: 7px !important;
}

.urlbarView-body-outer {
	--item-padding-start: 0 !important;
	--item-padding-end: 0 !important;
    background: var(--gnome-menu-background) !important;
	overflow-x: auto;
	padding: 2px 6px !important;
    border-radius: 8px 8px 0 0 !important;
}

.urlbarView-body-inner {
	border: 0 !important;
}

.urlbarView-row-inner, .urlbarView-no-wrap  {
	align-items: center !important;
}
.urlbarView-row-inner {
	padding-block: 5px !important;
	border-radius: 5px !important;
}

.urlbarView-row[selected] {
	background: var(--gnome-selected-color) !important;
	color: var(--gnome-window-color) !important;
}
.urlbarView-row[selected]:hover {
	background: var(--gnome-selected-hover-color) !important;
}
.urlbarView-row:not([selected]):hover {
	background: var(--gnome-hover-color) !important;
}
.urlbarView-row:not([selected]):active {
	background: var(--gnome-active-color) !important;
}

.urlbarView-url {
	color: var(--gnome-accent) !important;
}

.urlbarView-action {
	background: transparent !important;
}

/* Fix items overflow */
.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap,
.urlbarView-row[has-url]:not([type$="tab"]) > .urlbarView-row-inner > .urlbarView-no-wrap, .urlbarView-row[has-url]:is([type="remotetab"],
[sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap {
	max-width: calc(96% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px))) !important;
}

/* Search engines buttons */	
.search-one-offs {
	padding: 8px !important;
	background: var(--gnome-menu-background) !important;
	border-top: 1px solid var(--gnome-menu-separator-color) !important;
	border-radius: 0 0 8px 8px !important;
}

.search-one-offs[is_searchbar="true"] {
	margin-bottom: -8px !important;
}

/* URL bar and Search bar */
#urlbar[focused] .urlbar-textbox-container {
	margin: -1px !important;
}
#searchbar > .searchbar-textbox[focused] .searchbar-search-button {
	margin-left: -1px !important;
}
#searchbar > .searchbar-textbox[focused] .search-go-button {
	margin-right: -1px !important;
}

/* URL bar and Search bar's icons */
.urlbar-icon:hover,
.urlbar-icon-wrapper:hover,
.urlbar-icon[open],
.urlbar-icon-wrapper[open],
.urlbar-icon:hover:active,
.urlbar-icon-wrapper:hover:active,
.searchbar-search-button:hover .searchbar-search-icon,
.searchbar-search-button[open] .searchbar-search-icon,
.searchbar-search-button:hover:active .searchbar-search-icon {
	background-color: transparent !important;
	fill-opacity: 1 !important;
}

#urlbar .urlbar-icon {
	margin: 0 !important;
	height: 100%  !important;
}
#notification-popup-box {
	height: 100%  !important;
}

@media -moz-pref("browser.urlbar.richSuggestions.featureGate") {
	#urlbar:not(.searchButton) > .urlbar-input-container > #identity-box[pageproxystate="invalid"] > .identity-box-button {
		margin-inline-start: 2px;
	}
}

/* Search mode indicator */
#urlbar-search-mode-indicator,
#urlbar-label-box,
#urlbar-zoom-button {
	background: var(--gnome-button-background) !important;
	border: 0 !important;
	border-radius: 26px !important;
	outline: 0 !important;
	margin: 4px 0;
}
#urlbar-search-mode-indicator {
	padding-right: 0 !important;
}
#urlbar-search-mode-indicator-title {
	color: var(--gnome-window-color);
	padding-inline: 4px !important;
}
#urlbar-search-mode-indicator-close {
	background-size: 16px !important;
	background-position: center;
	border-radius: 26px !important;
	padding: 5px !important;
}
#urlbar-search-mode-indicator-close:hover {
	background-color: var(--gnome-button-hover-background) !important;
}
#urlbar-zoom-button {
	opacity: 0.8;
}
#urlbar-zoom-button:hover {
	opacity: 1;
}

/* Firefox identity box */
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button,
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button,
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button,
#urlbar-label-box {
	background-color: transparent !important;
}

#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]),
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]),
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) {
	background-color: hsla(0,0%,70%,.2) !important;
}

#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active,
#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true],
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active,
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true],
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active,
#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] {
	background-color: hsla(0,0%,70%,.3) !important;
}

@media -moz-pref("browser.urlbar.richSuggestions.featureGate") {
	#identity-box[pageproxystate="invalid"] > .identity-box-button {
		padding-inline:  var(--urlbar-icon-padding) !important;
	}
}
