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

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */


/* #sidebar-box{ */
/*   --uc-sidebar-width: 30px; */
/*   --uc-sidebar-hover-width: 210px; */
/*   position: relative; */
/*   min-width: var(--uc-sidebar-width) !important; */
/*   width: var(--uc-sidebar-width) !important; */
/*   max-width: var(--uc-sidebar-width) !important; */
/* } */

/* #sidebar-splitter{ display: none } */

/* #sidebar-header{ overflow: hidden; color: var(--chrome-color, inherit) !important} */

/* #sidebar{ */
/*   transition: min-width 115ms linear !important; */
/*   min-width: var(--uc-sidebar-width) !important; */
/*   will-change: min-width; */
/* } */

/* #sidebar-box:hover > #sidebar{ min-width: var(--uc-sidebar-hover-width) !important; } */

/* .sidebar-panel{ */
/*   background-color: transparent !important; */
/*   color: var(--newtab-text-primary-color) !important; */
/* } */

/* .sidebar-panel #search-box{ */
/*   -moz-appearance: none !important; */
/*   background-color: rgba(249,249,250,0.1) !important;  */
/*   color: inherit !important; */
/* } */

/* /\* Add sidebar divider and give it background *\/ */

/* #sidebar, */
/* #sidebar-header{ */
/*   background-color: var(--toolbar-non-lwt-bgcolor) !important; */
/*   border-right: 1px solid rgb(80,80,80); */
/* } */







/* Made for the treestyletab stuff */

:root {
  --initial-width     : 50px;     /* initial width of the sidebar */
  --sidebar-width     : 250px;    /* expanded width of the sidebar */
  --toolbar-height    : 0;
  --menubar-height    : -40px;
  --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*/
}

/*
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"] #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 splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}