/*== ShyFox about:something pages ===================================================================================================================

Styles for settings, Firefox View, etc.

*/

@-moz-document url-prefix("about:"), url-prefix("chrome:"){

  /* accent color */
  :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;
    --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;
  }
  
  .primary-button{
     --primary-button-background-color: var(--shy-color) !important;
     --primary-button-hover-background-color: color-mix(in srgb, white 10%, var(--shy-color)) !important;
     --primary-button-active-background-color: color-mix(in srgb, white 20%, var(--shy-color)) !important;
  }
  
  :is(.icon, img)[src="chrome://global/skin/icons/info-filled.svg"] {fill: var(--shy-color) !important;}
  moz-message-bar {background-color: var(--in-content-button-background) !important;}
  
  .cpu{
    background: linear-gradient(
      to left,
      var(--shy-color) 
      calc(var(--bar-width) * 1%),
      transparent 
      calc(var(--bar-width) * 1%)
    ) !important;
  }
  
  button[role="tab"][selected]::before {display: none !important;}
  
  /* big rounded corners */
  .menupopup-arrowscrollbox,     moz-message-bar,
  .addon-detail-contribute,      panel-list,
  .trr-message-container,
  .web-appearance-choice,        body[dir],
  .sidebar-footer-link,          menupopup,
  .info-box-container,           section,
  .sidebar-item--tall,           details,
  .info-box-content,
  .sidebar-item,
  .qr-code-box,                  select,
  .action-box,                   table,
  .dialogBox,                    tree,
  .info-box,
  .category,
  .toolbar,
  .modal,
  .card,

  #ping-picker,
  #reportBox,
  #reportBox #comments,
  #migrationWizardDialog,
  #translations-manage-install-list
  
  {border-radius: var(--big-rounding) !important;}
  
  /* small rounded corners */
  button:not(
    :is(
      [class*="devtools"],
      [class*="search"],
      [class*="tab"]
    )
  ),
  
  input:not([type="checkbox"]),
  
  .search-container,
  .study-icon,
  
  search-textbox,
  menulist,
  span,
  a, 
  
  .tooltip-container .tooltip-panel,
  
  #activeLanguages
  
  {border-radius: var(--rounding) !important;}
  
  /* only top or bottom corners */
  .card-heading-image{
    border-top-left-radius: var(--big-rounding) !important;
    border-top-right-radius: var(--big-rounding) !important;
  }
  
  listheader{
    border-top-left-radius: var(--rounding) !important;
    border-top-right-radius: var(--rounding) !important;
  }
  
  richlistbox{
    border-bottom-left-radius: var(--rounding) !important;
    border-bottom-right-radius: var(--rounding) !important;
  }
  
  /* dropdown menu margin */
  .tooltip-container .tooltip-panel .menuitem,
  panel-list[role="menu"] panel-item {margin-inline: 5px}
  
}

/* about:debugging thin mode */
@-moz-document url-prefix("about:debugging") {
  @media (max-width: 700px) {
    .sidebar{
      width: 45px !important;
      img{margin: none !important;}
      
      .sidebar-item:has(.qa-sidebar-no-devices),
      .sidebar__adb-status,
      .sidebar__refresh-usb,
      .sidebar__footer__support-help span,
      .ellipsis-text {display: none}
    }
    
    sidebar__footer__support-help, .sidebar-item__link{width: 23px !important;}
    .sidebar-item:has(.sidebar__footer__support-help) {width: 14px !important;}
    .sidebar-fixed-item__icon{margin-right: 0px !important;}
    .app{display: flex !important;}
  }
}