/*== ShyFox Global Styles ===========================================================================================================================

All sorts of important tweaks that don't belong in any category


--- BROWSER CONTENT ---------------------------------------------------------------------------------------------------------------------------------

Area where website is displayed 

*/

/* set background color */
#appcontent .browserStack, #browser, .browserContainer {background: var(--bg-col)}

#browser #tabbrowser-tabbox {
  /* shift website content relative to panels */
  margin-left: var(--left-margin) !important;
  margin-right: var(--right-margin) !important;
  margin-top: var(--top-margin) !important;
  margin-bottom: var(--bottom-margin) !important;
  
  /* add smoothness to it */
  transition: var(--transition) !important;
}

/* completely remove the browser interface in fullscreen videos and popups like login with Google or in a floating Bitwarden window */
#main-window:is(:not([chromehidden=""]), [inDOMFullscreen="true"]){
  #navigator-toolbox {display: none !important;}
  --margin: 0px !important;
}

/* some z-index */
#navigator-toolbox {z-index: 2 !important;}
#browser {z-index: 1 !important;}

/* if it not fullscreen video or floating window */
#main-window:not([inDOMFullscreen="true"])[chromehidden=""]{
    
  /* if navbar is not hidden in f11 fullscreen or not only navbar is visible in f11 or window is not maximized in clean mode */
  &:not(
    :is(
      :is([titlepreface*="‌"], [titlepreface*="᠎"][titlepreface*="​"])[inFullscreen="true"]),
      [titlepreface*="‍"]:is([sizemode="maximized"], [inFullscreen="true"], [gtktiledwindow="true"])
  ){
    
    /* add rounded corners and outline to browser content */
    #tabbrowser-tabbox {
      border-radius: var(--big-rounding) !important;
      border: var(--outline);
      outline: none !important;
    }
    
    #tabbrowser-tabpanels::after {
      content: "";
      margin: -1px;
      border: var(--outline);
      position: absolute;
      inset: 0;
      border-radius: var(--big-rounding);
      box-shadow: 0 0 0 100px var(--bg-col) !important;
      clip-path: inset(0);
      pointer-events: none;
    }
  }
  
  /* if in f11 fullscreen sidebar active but navbar not */
  &:not([titlepreface*="‍"]):not([titlepreface*="᠎"])[titlepreface*="‌"][inFullscreen="true"]{
    #appcontent browser {border-left: var(--outline);}
  }
  
  /* if in f11 fullscreen toolbar active but navbar not */
  &:not([titlepreface*="‍"]):not([titlepreface*="​"])[titlepreface*="‌"][inFullscreen="true"]{
    #appcontent browser {border-right: var(--outline);}
  }
  
  /* if in f11 fullscreen nor toolbar or sidebar active but navbar is */
  &:not([titlepreface*="‍"])[titlepreface*="᠎"][titlepreface*="​"]:not([titlepreface*="‌"])[inFullscreen="true"]{
    #appcontent browser {border-top: var(--outline);}
  }
}

/* private mode outline */
#main-window[privatebrowsingmode="temporary"]
{--outline: 1px solid var(--private-col) !important;}

/* drag window using border */

/* shared */
#browser::before,
#browser::after,
#navigator-toolbox::before,
#navigator-toolbox::after
{
  position: fixed;
  pointer-events: none;
  -moz-window-dragging: drag;
    
  content: "";
  background-color: var(--debug-col-2);
}

/* top */
#browser::after {
  height: calc(var(--top-margin) + 2px);
  top: -1px;
  width: 100vw;
}

/* bottom */
#browser::before {
  height: calc(var(--bottom-margin) + 2px);
  bottom: -1px;
  width: 100vw;
}

/* left */
#navigator-toolbox::before{
  width: calc(var(--bottom-margin) + 2px);
  left: -1px;
  height: 100vw;
}

/* right */
#navigator-toolbox::after{
  width: calc(var(--right-margin) + 2px);
  right: -1px;
  height: 100vw;
}

/* statuspanel (that thing at the bottom of the screen that shows the address of the link you're hovering over) */
#statuspanel #statuspanel-label {
  padding-inline: 6px !important;
  border-radius: var(--big-rounding) !important;
  
  background-color: var(--tb-col) !important;
  color: var(--bt-col) !important;
  
  border: var(--outline) !important;
  outline: var(--shadow) !important;
}

/* rounded things */
richlistitem,
panel tree,
menulist,
button,
select,
input:not([type="checkbox"]),
#urlbar-background,
#preview-image,
.ctrlTab-canvas,
.ctrlTab-canvas *

{border-radius: var(--rounding) !important}

.ctrlTab-preview .ctrlTab-preview-inner,
#ctrlTab-showAll,
richlistbox
{border-radius: var(--big-rounding) !important;}

/* disable pointer events in clean mode */ 
#main-window[titlepreface*="‍"]{
  #nav-bar:not(:has(#urlbar[breakout-extend])),
  #sidebar,
  #TabsToolbar,
  #PersonalToolbar
  {pointer-events: none !important;}
}

/*

--- DIALOG ------------------------------------------------------------------------------------------------------------------------------------------

Styles for dialogs e.g. "confirm deleting extension"

*/


#commonDialogWindow, #commonDialogWindow .titleIcon{
  background-color: transparent !important;
  color: var(--bt-col) !important;
}

.dialogBox {
  border-radius: var(--big-rounding) !important;
  border: var(--outline) !important;
  background-color: var(--tb-col) !important;
}

.dialogTemplate{
  background-color: transparent !important;
  :before{
    content: "";
    position: fixed;
    z-index: -1;
    
    width: 100%;
    height: 100%;
    
    left: 0px;
    top: 0px;
    
    background-color: color-mix(in srgb, var(--bg-col) 80%, transparent);
  }
}

#window-modal-dialog {margin-top: var(--margin) !important;} /* shift top-aligned dialogs little bit lower */
.sizeDetermined #infoBody {min-height: 20px !important;} /* add minimal height to alert text */
#searchbar-anon-search-settings {margin-inline-end: 7px !important;} /* margin for settings button in searcbar popup */
#PopupSearchAutoComplete {--panel-border-radius: var(--big-rounding) !important;} /* rounding for this popup */

/* print dialog */
print-preview::before,
print-preview .previewStack::before,
.printPreviewNavigation::before
{display: none !important;}

.printDialogBox::before {border-radius: var(--rounding) !important;}

.printDialogBox {margin-top: var(--margin) !important;}

/*

--- SCREENSHOTS -------------------------------------------------------------------------------------------------------------------------------------

Ctrl + Shift + S

*/

#screenshotsPagePanel{  
  position: fixed !important;
  transition: var(--transition);
  
  bottom: calc(
    var(--bottom-margin) 
    + var(--screenshot-tool-hgt)
  );
  
  left: 0;
  
  z-index: -1 !important;
  width: var(--sdbr-wdt) !important;
}

/* for smooth transition */
#screenshotsPagePanel[hidden]{
  display: flex !important;
  opacity: 0;
  pointer-events: none !important;
  bottom: 0px !important;
}

screenshots-buttons{
  background-color: transparent !important;
  transition: var(--transition);
  position: absolute !important;
  display: flex !important;
  height: var(--screenshot-tool-hgt) !important;
  width: var(--sdbr-wdt) !important;
  padding: calc(var(--margin) / 2) !important;
  
  top: 0px !important;
  inset-inline-end: 0px !important;
}

.screenshot-button{
  width: calc(
    var(--sdbr-wdt) / 2
    - var(--margin) * 1.5
  )!important;
  
  margin: calc(var(--margin) / 2) !important;
  padding-top: 56px !important;
  background-position-y: 10px !important;
}

/* when sidebar hidden */
#main-window:is([titlepreface*="᠎"], [titlepreface*="‍"]){
  #screenshotsPagePanel{
    bottom: calc(
      var(--bottom-margin)
      + var(--margin)
      + var(--screenshot-tool-hgt)
    );

    left: calc(
      var(--left-margin)
      + var(--margin)
    );
  }
  
  screenshots-buttons {background-color: var(--bg-col) !important;}
}


/*

--- CONTEXT MENU ------------------------------------------------------------------------------------------------------------------------------------

Apply theme colors to context menus and menubar

*/

/* in page context menu */
#contentAreaContextMenu[showservicesmenu="true"],
#contentAreaContextMenu[showservicesmenu="true"] menupopup
{
  --panel-background: var(--bg-col)!important;
  --panel-border-color: var(--tb-col) !important;
  
  --toolbar-field-focus-background-color: var(--bt-col) !important;
  --panel-color: var(--bt-col) !important;  
  
  menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {
    background-color: var(--panel-item-hover-bgcolor) !important;
    color: var(--bt-col) !important;
  }
}

/* toolbar menu */
#toolbar-menubar menupopup,
#toolbar-context-menu, #toolbar-context-menu menupopup,
#unified-extensions-context-menu, #unified-extensions-context-menu menupopup,
#placesContext, #placesContext menupopup,
#downloadsContextMenu, #downloadsContextMenu menupopup,
#sidebarMenu-popup, #PopupSearchAutoComplete,
:is(#back-button, #forward-button) menupopup,
#permission-popup-menulist menupopup
{
  --panel-background: var(--pp-col)!important;  
  --panel-border-color: var(--tb-col) !important;
  
  --toolbar-field-focus-background-color: var(--bt-col) !important;
  --panel-color: var(--bt-col) !important;  
  
  menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {
    background-color: var(--panel-item-hover-bgcolor) !important;
    color: var(--bt-col) !important;
  }
}

/* dropdown selectors */
menupopup {--content-select-background-image: none !important;}
#ContentSelectDropdown .ContentSelectDropdown-item-0:not([_moz-menuactive="true"]) {background-color: transparent !important;;}

/*

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

Right click > Customize toolbar

*/

#main-window[customizing]{
  #customization-palette-container {padding-top: 100px}
  
  #customization-panelWrapper{
    margin-top: 60px;
    margin-right: 50px;
  }
  
  .panel-arrowbox {opacity: 0 !important;}
  .panel-arrowcontent{border-radius: var(--big-rounding) !important;}
  toolbarspring {border-radius: var(--rounding) !important;}
  
  #customization-footer{
    position: fixed !important;

    bottom: 10px;   
    right: 70px;
    left: 10px;
    
    background-color: var(--bg-col) !important;
    border-radius: var(--big-rounding) !important;
  }
}

toolbarpaletteitem#wrapper-search-container[place="palette"] #searchbar {background-color: var(--bg-col) !important;}

:root[customizing] .customization-target:not(#widget-overflow-fixed-list) {min-width: 0px !important;}

/* red sidebar icon styles */
#main-window{
  --shyfox-string-sidebar-button-tooltip: "This button is only shown when the sidebar is disabled and is colored red to attract attention";
  &[lang="ru"]{--shyfox-string-sidebar-button-tooltip: "Эта кнопка отображается только тогда, когда боковая панель отключена, и окрашена в красный цвет, чтобы привлечь внимание";}
}

#wrapper-sidebar-button[place="palette"] .toolbarbutton-icon {
  padding: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}

#wrapper-sidebar-button[mousedown]{
  &::after{
    content: var(--shyfox-string-sidebar-button-tooltip) !important;
    text-align: left !important;
    position: absolute;
    color: black !important;
    background-color: white !important;
    border-radius: var(--rounding);
    padding: 5px;
    width: 160px !important;
    margin-left: 40px;
    margin-top: 40px;
  }
}

/*

--- NOTIFICATION BAR --------------------------------------------------------------------------------------------------------------------------------

Sometimes Firefox shows notifications at the top of the window suggesting, for example, to restore tabs from a previous session

*/

#tab-notification-deck, .global-notificationbox{
  position: fixed !important;
  transition: var(--transition) !important;
  z-index: 0 !important;
  vbox {background-color: transparent !important;}
  background-color: transparent !important;
  width: auto;
  
  max-width: calc(
    100vw 
    - var(--margin)
    - var(--right-margin)
    - var(--left-margin)
  );
  
  top: calc(
    var(--top-margin) 
    + var(--margin) / 2
  );
  
  left: calc(
    var(--left-margin) 
    + var(--margin) / 2
  );
  
  notification-message{
    border-radius: var(--big-rounding) !important;
    background-color: var(--tb-col) !important;
    color: var(--bt-col) !important;
    
    &::before {display: none !important;}
  }
  
  .footer-button {margin: 4px !important;}
}

/* notification close button color */
button[type~="icon"][type~="ghost"][part="button"][size="small"] {fill: var(--bt-col) !important;}

/* icon color */ 
:is(.icon, img)[src="chrome://global/skin/icons/info-filled.svg"] {fill: var(--shy-color) !important;}

/*

--- MENUBAR ----------------------------------------------------------------------------------------------------------------------------------------

File Edit View History Bookmarks Tools Help

*/

@media not (-moz-platform: macos) {
  
  #toolbar-menubar {
    
    position: fixed;
    overflow: clip;
    visibility: visible !important;
    z-index: 5;
    
    width: -fit-content;
    max-height: 0px;
    padding-bottom: 0 !important;
    
    transition: var(--transition) !important;
    
    top: var(--top-margin);
    left: var(--left-margin);
    
    border-radius: var(--rounding);
    background-color: var(--tb-col) !important;
    & > * {opacity: var(--dyn-opct);}
    
    /* outline only when visible */
    &:not([inactive="true"]) {
      border: var(--outline) !important;
      outline: var(--shadow) !important;
    }
  }

  #main-menubar > * {padding-top: 0px !important;}
}

/*

--- DEVTOOLS ---------------------------------------------------------------------------------------------------------------------------------------

*/

.browserSidebarContainer, .responsive-mode {background-color: var(--bg-col) !important;}

.devtools-side-splitter, .devtools-horizontal-splitter {
  background-color: transparent !important;
  margin-inline: 0px !important;
  margin: 0px !important;
}

.devtools-side-splitter       { min-width: calc(var(--margin) / 1.5) !important;}
.devtools-horizontal-splitter {min-height: calc(var(--margin) / 1.5) !important;}

.rdm-toolbar {
  margin-top: var(--margin) !important;
  width: 95% !important;
  margin-left: 3% !important;
}

.rdm-toolbar, .user-agent {border-radius: var(--rounding) !important;}

.user-agent {border: 1px solid grey !important;}

/*

--- FIXES ------------------------------------------------------------------------------------------------------------------------------------------

*/

/* fix some items dissapearing */
#titlebar {
  opacity: 1 !important;
  z-index: 1 !important;
}

:root[tabsintitlebar] #titlebar:-moz-window-inactive {
  opacity: 1 !important;
}

#navigator-toolbox:-moz-window-inactive {
  background-color: initial !important;
  color: initial !important;
}

/* remove annoying line at the top of the window */
#navigator-toolbox {
  margin-top: -1px !important;
  position: relative;
  z-index: 3;
}

/* weird margin fix */
#tabbrowser-tabpanels {
  & browser[type="content"] {
    margin: 0 !important;
  }
}

/* z-index fix */
#tabbrowser-tabbox{z-index: 1 !important;}

/* border fix */
* {
  border: 0px solid transparent; 
  outline: 0px solid transparent;
}

/* background color fix */
#browser:not(.browser-toolbox-background) {
  :root[lwtheme] & {
    background-image: none !important;
  }
}

/*

--- ACCENT COLOR ----------------------------------------------------------------------------------------------------------------------------------

*/

.text-link, a {color: var(--shy-color) !important;}

.footer-button {
  &:not([disabled]) {
    &[default], &.primary {
      background-color: var(--shy-accent-color) !important;;
      &:hover {
        background-color: color-mix(in srgb, var(--bt-col, black) 10%,var(--shy-accent-color)) !important;
      }
    }
  }
}

::selection {background: var(--shy-accent-color) !important;}

#tracking-protection-icon-box[active]{
  fill: var(--shy-color) !important;
  list-style-image: url(chrome://browser/skin/tracking-protection.svg) !important;
}

.urlbarView-url {
  .urlbarView-row:not([selected]) & {
    color: var(--shy-color) !important;
  }
}

.urlbarView-row[selected] {background-color: var(--shy-accent-color) !important;}

.urlbarView-favicon {
  .urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
    color: var(--shy-color) !important;
  }
}

.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
  &:not([selected]) > .urlbarView-no-wrap {
    & > .urlbarView-favicon {
      color: var(--shy-color) !important;
    }
  }
}

.ctrlTab-preview:focus > .ctrlTab-preview-inner, #ctrlTab-showAll:focus {border-color: var(--shy-color) !important;}

:root, panel, dialog, window{
  --in-content-primary-button-background-active: var(--shy-color) !important;
  --in-content-primary-button-background-hover:  var(--shy-color) !important;
  --lwt-toolbarbutton-icon-fill-attention:       var(--shy-color) !important;
  --in-content-primary-button-background:        var(--shy-color) !important;
  --toolbarbutton-icon-fill-attention:           var(--shy-color) !important;
  --fxview-primary-action-background:            var(--shy-color) !important;
  --toolbar-field-focus-border-color:            var(--shy-color) !important;
  --uei-button-attention-dot-color:              var(--shy-color) !important;
  --button-primary-active-bgcolor:               var(--shy-color) !important;
  --button-primary-hover-bgcolor:                var(--shy-color) !important;
  --uc-checkbox-checked-bgcolor:                 var(--shy-color) !important;
  --color-accent-primary-active:                 var(--shy-color) !important;
  --color-accent-primary-hover:                  var(--shy-color) !important;
  --checkbox-checked-bgcolor:                    var(--shy-color) !important;
  --in-content-accent-color:                     var(--shy-color) !important;
  --button-primary-bgcolor:                      var(--shy-color) !important;
  --in-content-link-color:                       var(--shy-color) !important;
  --color-accent-primary:                        var(--shy-color) !important;
  --focus-outline-color:                         var(--shy-color) !important;
  --input-border-color:                          var(--shy-color) !important;
}

#historySwipeAnimationPreviousArrow,#historySwipeAnimationNextArrow {
	--swipe-nav-icon-primary-color: color-mix(in srgb, var(--shy-color) 80%, #FFFFFF50) !important;
	--swipe-nav-icon-accent-color:  color-mix(in srgb, var(--shy-color) 20%, #00000050) !important;
}