/* 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";

:root {
  --initial-width     : 70px;     /* initial width of the sidebar */
  --sidebar-width     : 250px;    /* expanded width of the sidebar */
  --toolbar-height    : 0;
  --menubar-height    : 0;
  --toolmenubar-height: -40px;    /* sum of previous two */
  --shadow-color      : #28282F;  /* 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 5px 0px 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 3px 0px 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 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* to hide the native tabs */
#TabsToolbar {
    visibility: collapse;
}

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