/*== ShyFox Sidebery ===============================================================================================================================

Styles for Sidebery extension


--- VARIABLES ---------------------------------------------------------------------------------------------------------------------------------------

*/


@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html"){ /* wrap start */

  #root.root {
    --general-border-radius: var(--rounding) !important;
    --general-margin: 4px !important;
    
    --button-size: 35px;
    --pin-favicon-size: 30px;

    --nav-btn-margin: calc(var(--margin) / 2) !important;
    --nav-btn-width: var(--button-size) !important;
    --nav-btn-height: var(--button-size) !important;
    --nav-btn-len-margin: calc(var(--rounding) / 4) !important;
    
    --audio-btn-round-margin: calc(var(--big-rounding) / 2) !important;

    --tabs-audio-btn-width: 22px !important;
    --tabs-margin: 6px !important;
    --tabs-height: var(--button-size) !important;
    --tabs-inner-gap: calc(var(--margin) / 2) !important;
    --tabs-border-radius: var(--big-rounding) !important;
    
    @media (-moz-bool-pref: "shyfox.fill.accent.with.icons.fill.color") {--shy-color: var(--s-toolbar-fg, var(--shy-accent-color)) !important;}
    --accent: var(--shy-color) !important;
    --frame-el-overlay-selected-border: var(--accent) !important;
    --toolbar-el-overlay-selected-border: var(--accent) !important;
    --status-notice: var(--accent) !important;
  }

/*

--- PINNED TABS -------------------------------------------------------------------------------------------------------------------------------------

*/
  
  /* size calculation */
  .PinnedTabsBar .tab-wrapper .Tab {
    --n: 3; --m: 1;
    
    width: calc(
      100vw / var(--n) 
      - var(--tabs-margin) * (1/var(--n) + 1)
    ) !important;
    
    height: calc( (
      (100vw - var(--tabs-margin)) / 3.6
    ) / var(--m) ) !important;
  }
  
  /* 1 pinned tab */
  .PinnedTabsBar 
    .tab-wrapper:nth-child(1):last-child .Tab
      {--n: 1; --m: 1.4;}
  
  /* 2 tabs in bottom row */
  .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 2):last-child)
    .tab-wrapper:nth-last-child(-n + 2) .Tab
      {--n: 2; --m: 1.2;}

  /* 4 tabs in bottom row */
  .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 4):last-child) 
    .tab-wrapper:nth-last-child(-n + 4) .Tab
      {--n: 4; --m: 1.3;}
  
  /* audio icon */
  .Tab[data-pin="true"] > .body > .audio { 
    background: transparent !important;
    box-shadow: none !important;
    right: var(--audio-btn-round-margin) !important;
    top: var(--audio-btn-round-margin) !important;
  }

  /* bigger favicon */
  .Tab[data-pin="true"] :is(.fav, .fav-icon){ 
    width: var(--pin-favicon-size) !important;
    height: var(--pin-favicon-size) !important;
  }

  /* shadow, outline and background */
  .Tab[data-pin="true"] .body {
    border: 1px solid var(--s-frame-bg) !important;
    background-color: var(--toolbar-bg) !important;
  }

  /* selected tab outline */
  .Tab[data-pin="true"][data-active="true"] .body 
  {border: 1px solid var(--s-frame-fg) !important;}

  /* remove bottom margin */
  .PinnedTabsBar {margin-bottom: 0px !important;}
  
/* 

--- OTHER -------------------------------------------------------------------------------------------------------------------------------------------

*/

  /* consistent navbar background */
  #nav_bar {background-color: transparent !important;}

  /* padding */
  #nav_bar {
    padding-top: var(--nav-btn-margin) !important;
    padding-bottom: var(--general-margin) !important;
  }
  
  .BottomBar {padding: var(--nav-btn-margin) !important;}

  /* popup */
  .popup {margin: var(--tabs-margin) !important;}
  .popup-container {background-color: transparent !important;}

  /* search */
  #search_bar {margin: 4px !important;}
  #search_bar[data-showed="false"]{display: none !important;}
  #search_bar .clear-btn{margin-inline-end: var(--general-margin)}
  
  .NavigationBar{box-shadow: none !important}
  
  /* accent colored selection */
  ::selection {background: var(--shy-accent-color) !important;}
  
  /* notification */
  .notification{
    border-radius: var(--rounding) !important;
    &::after{
      top: calc(var(--rounding) / 4 + 3px) !important;
      right: calc(var(--rounding) / 4 + 3px) !important; 
    }
  }

} /* wrap end */