/*== ShyFox Sidebar =================================================================================================================================

Styles for sidebar


--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------

*/

/* reserve space for bookmarks toolbar */
:root{
  --little-gap: calc(var(--margin) / 1.5);
  --bookmarks-hgt: var(--toolbar-item-hgt);
}

/* remove space reserved for bookmarks toolbar if it hidden */
#main-window:has(#PersonalToolbar[collapsed="true"]) {
  --little-gap: 0px;
  --bookmarks-hgt: 0px;
}

/* if sidebar is not hidden or clean mode not enabled, this window is not floating popup and not in fullscreen video */
#main-window:not(:is([titlepreface*="᠎"], [titlepreface*="‍"]))[chromehidden=""]:not([inDOMFullscreen="true"]){
  /* set left margin to sidebar width */
  --left-margin: var(--sdbr-wdt) !important;
}

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

/* 

--- SIDEBAR SHOWN -----------------------------------------------------------------------------------------------------------------------------------

*/

/* styles for both sidebar and bookmarks toolbar */
#sidebar-box,
#PersonalToolbar
{
  position: fixed;
  overflow: visible;
  z-index: 2 !important;
  
  min-width: 0px !important;
  max-width: 100vw !important;
  
  left: 0px;

  transition: var(--transition) !important;
  background-color: transparent !important;
  
  padding-top: 0 !important;
  
  & > * {
    opacity: var(--dyn-opct);
    transition: var(--transition) !important;
  }
}

/* styles for sidebar */
#sidebar-box{
  
  top: calc(
    var(--margin) / 2 
    + var(--bookmarks-hgt)
  );

  height: calc(
    100vh
    - var(--margin) * 2
    + var(--margin) / 2 
    - var(--bookmarks-hgt)
  )!important;
  
  width: var(--sdbr-wdt) !important;
}

/* drag window by empty space in bookmarks toolbar */
#PersonalToolbar > *, #PlacesToolbarItems .bookmark-item[style="visibility: hidden;"]{
  -moz-window-dragging: drag !important;
  background-color: var(--debug-col-2) !important;
}

/* styles for bookmarks toolbar */
#PersonalToolbar{
  visibility: visible !important;
  height: var(--toolbar-item-hgt) !important;
  top: 0px;
  border-radius: var(--rounding);
  margin-left: var(--buttonbox-left-wdt);
  
  width: calc(
    var(--sdbr-wdt) 
    - var(--buttonbox-left-wdt)
  ) !important;
  
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  
  &[collapsed="true"] {display: none}
}

/* padding for screenshot control buttons */
#main-window:not([titlepreface*="᠎"]):has(#screenshotsPagePanel:not([hidden])){
  #sidebar-box{
    padding-bottom: calc(
      var(--screenshot-tool-hgt)
      - var(--margin)
      + var(--bottom-margin)
    ) !important;
  }
}

/* 

--- SIDEBAR HIDDEN ----------------------------------------------------------------------------------------------------------------------------------

*/

@media not (-moz-bool-pref: "sidebar.revamp") {
  /* activate style when sidebar hidden or clean mode enabled (and not in customizing page) */
  #main-window:is([titlepreface*="᠎"], [titlepreface*="‍"]):not([customizing]){

    /* styles for both sidebar and bookmaarks toolbar */
    #sidebar-box,
    #sidebar-main,
    #PersonalToolbar
    {
      z-index: 99 !important;
      width: var(--sdbr-wdt) !important;

      left: calc(
        var(--left-margin) 
        + var(--panel-hide-ldg) 
        - var(--sdbr-wdt)
        ) !important;

      border-radius: var(--big-rounding) !important;

      /* hover target (invisible box between window edge and panel) */
      &::before{
        content: "";
        position: absolute;
        z-index: -999;
        background-color: var(--debug-col);

        width: 150%;
        height: 100%;
        right: 0px;
        top: 0px;
      }

      /* make all panel content invisible (it will visible when hover) */
      & > * {
        transition: var(--transition) !important;
        opacity: 0;
      }
    }

    /* styles for sidebar */
    #sidebar-box, #sidebar-main{    
      height: calc(
        100vh
        - var(--bookmarks-hgt)
        - var(--little-gap)
        - var(--top-margin)
        - var(--bottom-margin)
        - var(--margin) * 2
        ) !important;

      top: calc(
        var(--top-margin)
        + var(--margin)
        + var(--bookmarks-hgt) + var(--little-gap)
      );

      /* indication bar (line on window edge) */
      &::after{
        content: "";
        position: absolute;
        transition: var(--transition);

        left: calc(
          100% 
          - var(--panel-hide-ldg) 
          - var(--margin) 
          + var(--hide-bar-padding)
          );

        width: calc(var(--margin) - var(--hide-bar-padding) * 2 );
        height: calc(
          100% 
          - var(--hide-bar-wdt-pad) 
          + var(--bookmarks-hgt)
          + var(--little-gap)
        );

        bottom: calc(var(--hide-bar-wdt-pad) / 2);
        border-radius: var(--rounding);
        background-color: var(--bt-col);
        opacity: var(--hide-bar-opct);
      }
    }

    /* add rounded corners to sidebar content */
    #sidebar{border-radius: var(--big-rounding) !important;}

    /* styles for bookmarks */
    #PersonalToolbar{
      top: calc(var(--top-margin) + var(--margin));
      margin-left: 0px !important;
      overflow: visible !important;

      padding-inline: 2px !important;

      /* hover target between sidebar and bookmarks toolbar */
      &::after{
        content: "";
        z-index: 1;
        position: absolute;

        background-color: var(--debug-col);
        opacity: 1 !important;

        height: calc(var(--little-gap) + 4px);
        bottom: calc(-2px - var(--little-gap));

        width: 150%;

        right: 0px;
      }
    }

    /* show sidebar on hover or focus (if not in clean mode) */
    &:not([titlepreface*="‍"]):has(
    #sidebar-box:hover,
    #sidebar-box:focus-within,
    #sidebar-main:hover,
    #sidebar-main:focus-within,
    #PersonalToolbar:hover,
    #PersonalToolbar *:not(#firefox-view-button)[open],
    #sidebar-switcher-target[aria-expanded="true"]
    ) {
      #sidebar-box,
      #sidebar-main,
      #PersonalToolbar
      {
        opacity: 1 !important;
        left: calc(var(--left-margin) + var(--margin)) !important;

        background-color: var(--bg-col) !important;

        border: var(--outline) !important;
        outline: var(--shadow) !important;

        &::after{opacity: 0}

        & > * {opacity: var(--dyn-opct);}
      }
    }
  }
}
/*

--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------

*/

#main-window[customizing]{
  #PersonalToolbar{
    top: 65px !important;
    left: 20px !important;
    margin-left: 0px !important;
    
    border-radius: var(--big-rounding) !important;
    
    background-color: var(--bg-col) !important;
  }
  
  /* remove text from bookmarks toolbar elements placeholder */
  #bookmarks-toolbar-placeholder .toolbarbutton-text {display: none !important;}
}


/*

--- NOT SIDEBERY -----------------------------------------------------------------------------------------------------------------------------------

Styles when Sidebery is not opened

*/

@media not (-moz-bool-pref: "sidebar.revamp") {
  /* hide sidebar header when Sidebery opened */
  #main-window:not([customizing]):has(
    #sidebar-box:not([hidden])[sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
  ) { 
    #sidebar-header {display: none} 
  }

  /* hide sidebar button on toolbar when sidebar opened */
  #main-window:not([customizing]):has(
    #sidebar-box:not([hidden])
  ) { 
    #sidebar-button {display: none}
  }

  /* color the sidebar button red */
  #sidebar-button .toolbarbutton-icon {
    background-color: red !important;
    fill: white !important;
  }

  /* notification when sidebar is not opened */
  #main-window[chromehidden=""]:has( 
    #sidebar-box[hidden="true"]
  ) {
    --shyfox-string-open-sidebar: "Open sidebar!";
    &[lang="ru"]{--shyfox-string-open-sidebar: "Откройте боковую панель!";}

    &::before{
      content: var(--shyfox-string-open-sidebar);
      position: fixed;
      z-index: 9999;

      font-weight: bold;

      top: calc(var(--margin) + var(--toolbar-item-hgt));
      left: calc(var(--margin) * 2);

      background-color: var(--tb-col);
      color: var(--bt-col);
      outline: 3px solid red;

      border-radius: var(--big-rounding);
      padding: 10px;
    }
  }

}

/* styles when Sidebery is not opened but sidebar is */
#main-window[chromehidden=""]:has(
  #sidebar-box:not([hidden]):not([sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) 
) {
  
  --shyfox-string-to-manage-tabs-open-sidebery: "To manage tabs, open Sidebery in this menu";
  &[lang="ru"]{--shyfox-string-to-manage-tabs-open-sidebery: "Для работы с вкладками откройте Sidebery";}
  
  @media not (-moz-bool-pref: "sidebar.revamp") {
    #sidebar {
      border: var(--outline) !important;
      margin: 0 calc(var(--margin) / 1.5) !important;
    }
  }
  
  &[titlepreface*="᠎"] {#sidebar {margin-bottom: calc(var(--margin) / 1.5) !important;}}
  
  #sidebar-header{
    #sidebar-close {display: none}
    
    padding-bottom: 30px !important;
    border: none !important;
    
    /* info text */
    &::before{
      content: "";
      width: 20px;
      height: 20px;
      position: absolute;
      
      mask-image: url("chrome://global/skin/icons/info-filled.svg");
      background-color: var(--shy-color);
      mask-repeat: no-repeat;
      
      top: 44px;
      left: 10px;
    }
    
    &::after{
      content: var(--shyfox-string-to-manage-tabs-open-sidebery);
      position: absolute;
      top: 45px;
      font-size: 11.8px;
      
      padding-left: 22px;
    }
  }
}

@media not (-moz-bool-pref: "sidebar.revamp") {
  /* assign the button to move the sidebar left and right to enable and disable native tabs for emergencies */

  /* if Sidebery is not opened but sidebar is */
  #main-window:has(
    #sidebar-box:not([hidden]):not([sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) 
  ) {

    --shyfox-string-enable-native-tabs: "Enable native tabs";
    &[lang="ru"]{--shyfox-string-enable-native-tabs: "Включить нативные вкладки";}

    #sidebarMenu-popup #sidebar-reverse-position{
      /* remove original text from this button */
      .menu-text {display: none !important;}

      &::after{
        content: var(--shyfox-string-enable-native-tabs) !important;
        padding-inline: 5px;
      }
    }

    /* add rounded corners to sidebar content */
    #sidebar {border-radius: var(--big-rounding) !important;}

    /* sidebar on left (native tabs disabled, default) */
    &:has(#sidebar-box[style*="order: 2"]){
      /* there is no styles */
    }

    /* sidebar on right (native tabs enabled) */
    &:has(#sidebar-box[style*="order: 4"]){

      /* add checkmark to button to indicate state */
      #sidebarMenu-popup #sidebar-reverse-position {background-image: url("../icons/menu-check.svg") !important;}

      /* native tabs styling */
      #tabbrowser-tabs{
        --tabsbar-wdt: calc(
          (
            100vw
            - var(--margin) * 2
            - var(--left-margin)
            - var(--right-margin)
          ) / 1.5
        );

        display: flex !important;
        position: fixed !important;

        width: var(--tabsbar-wdt) !important;
        height: 45px !important;
        padding: 0 !important;

        left: calc(var(--left-margin) + var(--margin)) !important;
        top:  calc(var(--top-margin)  + var(--margin)) !important;

        background-color: var(--tb-col) !important;
        border-radius: var(--big-rounding) !important;
        border: var(--outline) !important;
        outline: var(--shadow) !important;
        transition: var(--transition) !important;

        .tabbrowser-tab:not([pinned]){
          min-width: 150px !important;
          .tab-close-button{display: flex !important;}
        }

        /* pinned tabs */
        .tabbrowser-tab[pinned]{
          position: initial !important;
          margin-inline: 0px !important;
        }
      }
    }
  }
}