html#main-window {
	--color-bg: #282828;
	--toolbar-bgcolor: var(--color-bg) !important;

	--gap-between-tabs: 5px;
	--margin-after-tab-list: 8x;
	--margin-before-tab-list: 8px;
	--tab-font: "Cantarell", sans-serif;
	--tab-font-weight: 700;
	--tab-height: 32px;
	--tabs-container-height: 140px;

	--urlbar-container-margin: 5px;
	--urlbar-list-width: 60%;
	--urlbar-text-font: "mononoki Nerd Font", sans-serif;
	--urlbar-text-size: 15pt;
	--urlbar-text-weight: 700;

	/* Firefox variables */
	--lwt-toolbar-field-focus-color: #ebdbb2 !important;
	--lwt-toolbar-field-color: #ebdbb2 !important;
	--lwt-toolbar-field-background-color: var(--color-bg) !important;

	--arrowpanel-background: #282828 !important;
	--arrowpanel-color: white !important;
	--arrowpanel-border-color: transparent !important;
}

/* This positions the tabs under the navaigator container */
#titlebar {
	-moz-box-ordinal-group: 3 !important;
}

/* *******************************************************************
	Toolbar Elements
*/
.browser-toolbar {
	padding-left: 10px !important;
	padding-top: 10px !important;
	padding-right: 10px !important;
}

/* Bookmarks bar tweaks */
#PlacesToolbar {
	align-items: center !important;
	display: flex !important;
	font-family: "mononoki Nerd Font", sans-serif !important;
	font-size: 12pt !important;
	font-weight: 700 !important;
	justify-content: center !important;
}

/* Custom back and forward buttons */
#back-button {
	list-style-image: url("left-arrow.svg") !important;
}

#forward-button {
	list-style-image: url("right-arrow.svg") !important;
}

#navigator-toolbox {
	--tabs-border-color: var(--color-bg) !important;
	background-color: var(--color-bg) !important;
	border: none !important;
	box-shadow: none !important;
	max-height: var(		--tabs-container-height	) !important;
	min-height: var(		--tabs-container-height	) !important;
}

/* *******************************************************************
	Urlbar
*/

/* Url bar suggestions list container */
.urlbarView {
	background-color: var(--color-bg) !important;
	border-radius: 0 8px 8px !important;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 35%) !important;
	box-shadow: none !important;
	margin: auto !important;
	width: var(--urlbar-list-width) !important;
}

/* Url bar suggestions' selected row */
.urlbarView:not(.megabar) .urlbarView-row:not([type="tip"])[selected],
.urlbarView.megabar .urlbarView-row:not([type="tip"])[selected] > .urlbarView-row-inner {
	background: #83a598 !important;
	color: black !important;
	fill-opacity: 1;
}

/* The text that says 'Search with ...' */
.urlbarView-action {
	color: black !important;
}

/* Url bar suggestions' row that is being hovered over */
.urlbarView-row:hover {
	background-color: none !important;
	background-image: linear-gradient(77deg, #a89984, #ebdbb2) !important;
	color: black !important;
}

/* Text that says: This time, search with: */
#urlbar-one-offs-header-label {
	font-family: "Cantarell", sans-serif !important;
	font-size: 14pt !important;
	font-weight: 700 !important;
}

#urlbar-background,
#urlbar-container,
.urlbar-input-box {
	background-color: var(--color-bg) !important;
	background-image: none !important;
}

#urlbar:not(.megabar),
#urlbar.megabar > #urlbar-background,
#searchbar {
	border: none !important;
	box-shadow: none !important;
}

/* Hacky way to make the url input bar centered */
input#urlbar-input {
	caret-color: transparent !important;
	font-family: var(--urlbar-text-font) !important;
	font-size: var(--urlbar-text-size) !important;
	font-weight: var(--urlbar-text-weight) !important;
	text-align: center !important;
	width: 99999px !important;
}

.urlbarView-favicon,
.urlbar-history-dropmarker,
#star-button,
#identity-box {
	display: none !important;
}

#tracking-protection-icon-container,
#urlbar-search-button {
	background-color: none !important;
	background-image: none !important;
	border: none !important;
}

/* *******************************************************************
	Browser tabs
*/

/* Hide some bloat */
.tab-close-button,
.tab-line,
.tabbrowser-tab::before,
.tabbrowser-tab::after,
.tabbrowser-tab .tab-icon-image {
	display: none !important;
}

/* Regular browser tabs */
.tabbrowser-tab {
	background-color: #3c3836 !important;
	background-image: linear-gradient(to left, var(--color-tab-normal-start), var(--color-tab-normal-end)) !important;
	border-radius: var(--tab-height) !important;
	margin-inline-end: var(--gap-between-tabs) !important;
	max-height: var(--tab-height) !important;
	min-height: var(--tab-height) !important;
}

.tabbrowser-tab:hover {
	background-color: none !important;
	background-image: linear-gradient(to left, #a89984, #a89984) !important;
	color: black !important;
}

.tabbrowser-tab[selected="true"] {
	background-color: none !important;
	background-image: linear-gradient(to left, #fe8019, #fe8019) !important;
	color: black !important;
	font-weight: var(--tab-font-weight) !important;
}

.tab-content {
	background-color: none !important;
	background-image: none !important;
	font-family: var(--tab-font) !important;
}

/* pinned browser tabs */
/* TODO: Find a way to add spacing between the pinned tabs when tab list scrolling is triggered. Adding a margin just screws everything up */
.tabbrowser-tab:hover[pinned="true"] {
	background-image: linear-gradient(to left, #ff8989, #ff8989) !important;
}

.tabbrowser-tab[pinned="true"][selected="true"] {
	background-image: linear-gradient(to left, #a1ffb6, #a1ffb6) !important;
}

.tabbrowser-tab[pinned="true"] {
	background-image: linear-gradient(to left, #ffc386, #ffc386) !important;
	color: #1d1d1d !important;
	max-width: var(--tab-height) !important;
	min-width: var(--tab-height) !important;
}

.tabbrowser-tab[pinned="true"] .tab-icon-image {
	align-items: center !important;
	display: inline-block !important;
	min-height: var(--pinned-tab-favicon-dim) !important;
	min-width: var(--pinned-tab-favicon-dim) !important;
}

.tabbrowser-tab[pinned="true"] .tab-label-container {
	display: none !important;
}

.tab-stack {
	display: flex !important;
	justify-content: center !important;
}

/* Modify these values to tweak the start point of the tab list */
.tabbrowser-arrowscrollbox {
	margin-inline-start: var(--margin-before-tab-list) !important;
	margin-inline-end: var(--margin-after-tab-list) !important;
}

/* *******************************************************************
	Settings menu pop-up
*/
.panel-arrowbox {
	margin: 0 !important;
	display: none !important;
}

.panel-arrowcontent {
	opacity: 1 !important;
	margin: 0 !important;
}

/* Fix annoying context menu right clicking "feature" on i3 and bspwm */
#contentAreaContextMenu{ margin: 2px 0 0 2px }

