/* =======
   PREFERENCES
   ======= */

/* Alas there's no body class to identify other settings pages like the Extensions page… */

:root:not(.private) {  --in-content-page-background: #F3F5F8 !important; }
@media (prefers-color-scheme: dark) {
    :root:not(.private) { --in-content-page-background: rgb(28 27 34) !important; }
}

#preferences-body .navigation {
    background: #345;
    color: rgb(255 255 255 / 75%);
    box-shadow: inset -5px 0 10px rgb(0 0 0 / 25%);
}
#preferences-body .category-icon {
    fill: rgb(255 255 255 / 50%) !important;
}
#preferences-body .category, #preferences-body .sidebar-footer-link {
    color: rgb(255 255 255 / 50%) !important;
    margin-inline-start: 0 !important;
    padding: 0 2em !important;
    border-radius: 0 !important;
}
#preferences-body .category[selected] {
  color: rgb(255 255 255 / 75%) !important;
  background-color: rgb(255 255 255 / 10% ) !important;
  border-style: solid none solid solid !important;
  border-color: rgb(255 255 255 / 10%) #E80 !important;
  border-width: 1px 0 1px 4px !important;
}
#preferences-body .category[selected] .category-icon {
    fill: rgb(255 255 255 / 75%) !important;
}
#preferences-body #categories, #preferences-body .sidebar-footer-list {
    padding: 0 !important;
    margin-inline: 0 !important;
}
#preferences-body .sidebar-footer-link { border: none !important; }
#preferences-body .sidebar-footer-link:hover {
    background-color: var(--in-content-button-background-hover) !important;
    color: #FFF !important;
}

search-textbox {
    border: 1px solid rgb(0 0 0 / 30%) !important;
    border-bottom-color: rgb(0 0 0 / 20%) !important;
    border-top-color: rgb(0 0 0 / 40%) !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 20%), 0 1px 0 rgb(255 255 255 / 50%) !important;
}