/* material firefox imports */
@import "global/variables.css";
@import "global/global.css";
@import "icons/icons.css";
@import "tabbar/tabbar.css";
@import "navbar/navbar.css";
@import "personalbar/personalbar.css";
@import "popup/popup.css";
@import "urlbar/urlbar.css";
@import "findbar/findbar.css";


html#main-window {
	--color-bg: #1d1f21;
	--toolbar-bgcolor: var(--color-bg) !important;
        --color-accent: #fb3d66;
	--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: var(--color-accent)!important;
	--lwt-toolbar-field-color: #fefefa !important;
	--lwt-toolbar-field-background-color: var(--color-bg) !important;

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

:root {
  --initial-width     : 70px;     /* initial width of the sidebar */
  --sidebar-width     : 250px;    /* expanded width of the sidebar */
  --toolbar-height    : 0;
  --menubar-height    : 0px;
  --toolmenubar-height: -40px;    /* sum of previous two */
  --shadow-color      : #1d1f21;  /* shadow color. set to #00000000 for no shadow. same as folder color from hntp and tab-hover color from tst*/
}

/* show bookmarks toolbar on new tab only */
#main-window #PersonalToolbar {
  visibility : collapse !important;
  z-index    : 1!important;
  position   : relative!important;
  margin-left: var(--initial-width);              /* shift toolbar to the right based on initial width */
  margin-top : var(--toolbar-height) !important;
}

#main-window[title^="Firefox Developer Edition"] #PersonalToolbar {
  visibility: visible !important;
  margin-top: -1px !important;
}

/* 
There's two main sidebar components. 
1. #sidebar-box (outer)
2. #sidebar (inner) 
*/
/* lock outer to height by doing the inverse margin of the toolbar element */
/* set outer width = initial width */
#sidebar-box {
  z-index      : 1000 !important;
  position     : relative!important;
  margin-top   : var(--menubar-height) !important;
  padding-top  : calc(-1*var(--menubar-height));
  border-radius: 0;
  min-width    : var(--initial-width) !important;
  max-width    : var(--initial-width) !important;
}

/* inner width = expanded width & move inner to only show initial-width long section */
#sidebar-box #sidebar {
    min-width    : var(--sidebar-width) !important;
    max-width    : var(--sidebar-width) !important;
    transform    : translateX(calc(var(--initial-width) - var(--sidebar-width))) !important;
    border-radius: 0;
    transition   : all 0.2s ease-in-out;
}

/* move inner to show entire sidebar */
#sidebar-box #sidebar:hover {
    transform : translateX(0) !important;
    box-shadow: 2px 0 33px var(--shadow-color);
}

#main-window[title^="Firefox Developer Edition"] #sidebar-box {
  margin-top: var(--toolmenubar-height) !important;
}

/* hide sidebar header for tree style tabs sidebar */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/* Hide the title bar */
#titlebar{ visibility: collapse; }

/* hide normal horizontal tab bar */
#TabsToolbar { visibility: collapse; }

#sidebar { border-right: none !important; }

toolbar#nav-bar {
  padding-top   : 12px;
  padding-bottom: 7px;
  margin-left   : var(--initial-width);
  padding-left  : 7px;
  border        : none !important;
}

toolbar{
  border: none !important;
}

/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}
/* *******************************************************************
	Urlbar
*/

/* Url bar suggestions list container */
.urlbarView {
	background-color: var(--color-bg) !important;
	border-radius: 20pt !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: var(--color-accent)!important;
	color: white !important;
	opacity: 1;
}

.urlbarView:not(.megabar) .urlbarView-row:not([type="tip"])[selected] > .urlbarView-row-inner {
	background: var(--color-accent)!important;
	opacity: 1;
}
/* The text that says 'Search with ...' */
.urlbarView-action {
	color: white !important;
}

/* Url bar suggestions' row that is being hovered over */
.urlbarView-row:hover {
	background-color: none !important;
	background-image: linear-gradient(77deg, var(--color-accent), #ff8989) !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;
        border: none !important;
        border-radius: 20pt !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;
}
