From 2f37ac096137ab5857e7c0ece46097d1ca180e5a Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 17 Dec 2021 21:04:49 +0900
Subject: [PATCH] Clean: Separated to `decoration.scss`

---
 src/theme/_decoration.scss |  255 +++++++
 src/userChrome.scss        | 1440 +-----------------------------------
 2 files changed, 258 insertions(+), 1437 deletions(-)
 create mode 100644 src/theme/_decoration.scss

diff --git a/src/theme/_decoration.scss b/src/theme/_decoration.scss
new file mode 100644
index 0000000..76d1bae
--- /dev/null
+++ b/src/theme/_decoration.scss
@@ -0,0 +1,255 @@
+@media (prefers-reduced-motion: no-preference) {
+  /*= URL, Search Bar ========================================================*/
+  #urlbar:hover:not([focused="true"]) > #urlbar-background,
+  #searchbar:hover:not(:focus-within) {
+    --toolbar-field-border-color: var(--toolbar-field-focus-border-color);
+  }
+
+  /*= Other Fields ===========================================================*/
+  /* Sidebar */
+  .sidebar-panel[lwt-sidebar] #search-box:hover,
+  body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
+    border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
+  }
+  .sidebar-panel:not([lwt-sidebar]) #search-box:hover,
+  body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
+    border-color: -moz-accent-color !important;
+  }
+
+  /* Others */
+  #editBMPanel_namePicker:hover,
+  #editBMPanel_tagsField:hover,
+  .findbar-container .findbar-textbox:hover {
+    --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
+  }
+
+  /*= Downloads Panel ========================================================*/
+  /* Accent Color for downloaded item */
+  #downloadsListBox .download-state[exists] .downloadDetails {
+    color: var(--button-primary-bgcolor);
+  }
+  #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
+    color: var(--button-primary-hover-bgcolor);
+  }
+
+  /* File moved or missing */
+  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
+  }
+  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
+    filter: grayscale(100%) !important;
+  }
+}
+
+/*= Cursor Types =============================================================*/
+#appMenu-proton-update-banner,
+#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
+#appMenu-zoomReduce-button2,
+#appMenu-zoomReset-button2,
+#appMenu-zoomEnlarge-button2,
+#appMenu-fullscreen-button2,
+#panelMenu_showAllBookmarks,
+#PanelUI-historyMore,
+#appMenuClearRecentHistory:not([disabled]),
+#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
+#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
+#BMB_viewBookmarksSidebar,
+#BMB_bookmarksShowAllTop,
+#BMB_bookmarksShowAll,
+#import-button,
+menuitem.openintabs-menuitem,
+#downloadsListBox .downloadButton,
+#downloadsListBox .download-state[exists],
+#downloadsListBox .download-state[exists] .downloadDetails,
+#downloadsHistory,
+#protections-popup-settings-button,
+#protections-popup-show-report-button,
+#identity-popup-clear-sitedata-button,
+#identity-popup-more-info {
+  cursor: pointer !important;
+}
+
+/* TODO: For now, fxa-menu doesn't show any status.
+           (JS required, observe .syncNowBtn status)
+  #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
+    cursor: progress !important;
+  }
+  */
+
+/*= Animate ==================================================================*/
+@media (prefers-reduced-motion: no-preference) {
+  /*- Background Color -------------------------------------------------------*/
+  button,
+  toolbarbutton,
+  stack,
+  vbox,
+  .toolbarbutton-icon,
+  #tabs-newtab-button > .toolbarbutton-icon {
+    transition: background-color 1s var(--animation-easing-function) !important;
+  }
+  button:hover,
+  toolbarbutton:hover,
+  stack:hover,
+  vbox:hover,
+  .toolbarbutton-icon:hover,
+  #tabs-newtab-button:hover > .toolbarbutton-icon {
+    transition: background-color 0.25s var(--animation-easing-function) !important;
+  }
+  @include OS($linux) {
+    .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
+      transition: background-image 0.25s var(--animation-easing-function) !important;
+    }
+  }
+
+  .subviewbutton {
+    /* treechildren::-moz-tree-row: Can't apply
+       menu, menuitem is not apply.
+     */
+    transition: background-color 0.5s var(--animation-easing-function) !important;
+  }
+  .subviewbutton:hover {
+    transition: background-color 0.1s var(--animation-easing-function) !important;
+  }
+
+  /*- Pinned Tab -------------------------------------------------------------*/
+  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
+    /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
+    transition: -moz-box-flex 0.2s var(--animation-easing-function),
+      margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
+    max-width: var(--tab-max-width, 240px);
+  }
+  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
+    transition: -moz-box-flex 0.2s var(--animation-easing-function),
+      margin-inline-start 0.2s var(--animation-easing-function) !important;
+  }
+
+  #tabbrowser-tabs:not([movingtab]) .tab-content {
+    transition: padding-inline 0.2s var(--animation-easing-function),
+      /* Unloaded Tab */ opacity 0.5s var(--animation-easing-function) !important;
+  }
+  #tabbrowser-tabs:not([movingtab]) .tab-content::before,
+  #tabbrowser-tabs:not([movingtab]) .tab-content::after {
+    transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
+  }
+  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
+    transition: width 0.3s var(--animation-easing-function) !important;
+  }
+  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
+    transition: all 0.3s var(--animation-easing-function) !important;
+  }
+
+  /*- URL / Search Bar -------------------------------------------------------*/
+  #urlbar-background,
+  #searchbar {
+    transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
+  }
+  #urlbar-background:hover,
+  #searchbar:hover {
+    transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
+  }
+
+  /* Buttons in URL bar */
+  #tracking-protection-icon-container,
+  #identity-icon-box,
+  #identity-permission-box,
+  #notification-popup-box,
+  #page-action-buttons > .urlbar-page-action {
+    transition: background-color 2.5s var(--animation-easing-function) !important;
+  }
+  #tracking-protection-icon-container:hover,
+  #identity-icon-box:hover,
+  #identity-permission-box:hover,
+  #notification-popup-box:hover,
+  #page-action-buttons > .urlbar-page-action:hover {
+    transition: background-color 1.25s var(--animation-easing-function) !important;
+  }
+
+  /*- Border - Other Fields --------------------------------------------------*/
+  #search-box:hover,
+  xul|search-textbox.tabsFilter:hover,
+  #editBMPanel_namePicker:hover,
+  #editBMPanel_tagsField:hover,
+  .findbar-container .findbar-textbox:hover {
+    transition: border-color 1s var(--animation-easing-function) !important;
+  }
+  #search-box:hover,
+  xul|search-textbox.tabsFilter:hover,
+  #editBMPanel_namePicker:hover,
+  #editBMPanel_tagsField:hover,
+  .findbar-container .findbar-textbox:hover {
+    transition: border-color 0.5s var(--animation-easing-function) !important;
+  }
+
+  /*- Sidebar ----------------------------------------------------------------*/
+  #sidebar-box {
+    /* like #sidebar-box > #sidebar */
+    min-width: 14em;
+    width: 18em;
+    max-width: 36em;
+
+    /* Animation */
+    transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
+      visibility 0s linear !important;
+  }
+  #sidebar-box[hidden="true"] {
+    display: -moz-box !important;
+    margin-inline-start: -18em;
+    opacity: 0;
+    visibility: collapse;
+    transition-delay: 0s, 0s, 0.25s !important;
+  }
+
+  /*- Expand - Synced Tabs ---------------------------------------------------*/
+  @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
+  {
+    .item-tabs-list {
+      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+      transform: translateY(0%);
+      opacity: 1;
+      max-height: 100%;
+    }
+
+    .item.client.closed .item-tabs-list {
+      display: flex !important;
+
+      transition: transform 0.2s ease-out, opacity 0.2s ease-out,
+        max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
+      visibility: hidden;
+      transform: translateY(-100%);
+      opacity: 0;
+      max-height: 0;
+    }
+  }
+
+  /*- Arrow - Synced Tabs ----------------------------------------------------*/
+  @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
+  {
+    /* treechildren::-moz-tree-twisty: Can't apply */
+    #template-container .item.client .item-twisty-container {
+      transition: transform 0.1s var(--animation-easing-function) !important;
+    }
+
+    #template-container .item.client.closed .item-twisty-container {
+      transform: rotate(-90deg);
+      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+    }
+
+    #template-container .item.client.closed .item-twisty-container:dir(rtl) {
+      transform: rotate(90deg);
+      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
+    }
+  }
+
+  /*- Arrow - Edit Bookmark Popup --------------------------------------------*/
+  #editBookmarkPanelRows .expander-up .button-icon,
+  #editBookmarkPanelRows .expander-down .button-icon {
+    transition: transform 0.1s var(--animation-easing-function) !important;
+  }
+  #editBookmarkPanelRows .expander-up {
+    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
+  }
+  #editBookmarkPanelRows .expander-up .button-icon {
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/userChrome.scss b/src/userChrome.scss
index bf939af..d025604 100644
--- a/src/userChrome.scss
+++ b/src/userChrome.scss
@@ -28,1445 +28,11 @@
 /* Fully Dark Mode ************************************************************/
 @import "theme/fully_dark";
 
-/*= Proton Commons ===========================================================*/
-@-moz-document url("chrome://global/content/commonDialog.xhtml"),
-  url("chrome://pippki/content/editcacert.xhtml"),
-  url("chrome://pippki/content/deletecert.xhtml"),
-  url("chrome://pippki/content/exceptionDialog.xhtml"),
-  url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
-  url("chrome://global/content/appPicker.xhtml"),
-  url("chrome://browser/content/pageinfo/pageInfo.xhtml")
-{
-  /*- Overwrite --------------------------------------------------------------*/
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :root {
-      --in-content-page-background: #42414d;
-    }
-  }
-
-  :root:not(:-moz-lwtheme),
-  :root[lwt-default-theme-in-dark-mode] {
-    --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
-    --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
-    --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
-    --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
-    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
-    --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
-    --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
-  }
-
-  /*- Dialog -----------------------------------------------------------------*/
-  #commonDialog,
-    #editCaCert,
-    #deleteCertificate,
-    #exceptiondialog,
-    #unknownContentType,
-    #app-picker,
-    #topBar, /* #topBar, #mainDeck: Page Info */
-    #mainDeck {
-    -moz-appearance: none !important; /* For Mac */
-    color: var(--in-content-page-color) !important;
-    background-color: var(--in-content-page-background) !important;
-    /* border-radius: 0 0 8px 8px !important; */
-  }
-
-  /*- Button -----------------------------------------------------------------*/
-  button {
-    -moz-appearance: none !important;
-    color: var(--in-content-button-text-color) !important;
-    background-color: var(--in-content-button-background) !important;
-    font: inherit;
-    font-size: 1em !important;
-    font-weight: 600 !important;
-    min-height: 32px !important;
-    border: 1px solid transparent !important; /* shows up in high-contrast mode */
-    border-radius: var(--in-content-button-border-radius) !important;
-    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
-
-    min-height: 32px !important;
-    /* Use the same margin of other elements for the alignment */
-    margin-inline: 4px !important;
-    min-width: 6.3em !important;
-  }
-
-  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
-     * the 1px border): */
-  button.medium {
-    padding: 6px 13px !important;
-    min-height: 28px !important;
-    font-size: 0.95em !important;
-  }
-  button.small {
-    padding: 5px 11px !important;
-    min-height: 24px !important;
-    font-size: 0.9em !important;
-  }
-
-  /* Remove margin added by button.css */
-  xul|button > .button-box > .button-text {
-    margin: 0 !important;
-  }
-
-  button:-moz-focusring,
-    xul|menulist:-moz-focusring,
-    xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
-    xul|radio[focused="true"]:-moz-focusring {
-    box-shadow: none !important;
-    outline: 2px solid var(--in-content-focus-outline-color) !important;
-    outline-offset: 2px !important;
-  }
-  button:not([disabled="true"]):hover {
-    background-color: var(--in-content-button-background-hover) !important;
-    color: var(--in-content-button-text-color-hover) !important;
-    border-color: transparent !important;
-  }
-
-  xul|button:not([disabled="true"]):hover:active,
-  xul|button[open],
-  xul|button[open]:hover,
-  xul|menulist[open="true"]:not([disabled="true"]) {
-    background-color: var(--in-content-button-background-active) !important;
-  }
-
-  xul|button[default] {
-    background-color: var(--in-content-primary-button-background) !important;
-    color: var(--in-content-primary-button-text-color) !important;
-  }
-  xul|button[default]:not([disabled="true"]):hover {
-    background-color: var(--in-content-primary-button-background-hover) !important;
-    color: var(--in-content-primary-button-text-color) !important;
-  }
-  xul|button[default]:not([disabled="true"]):hover:active {
-    background-color: var(--in-content-primary-button-background-active) !important;
-  }
-
-  xul|button[disabled="true"],
-  xul|menulist[disabled="true"] {
-    opacity: 0.4 !important;
-  }
-  xul|button:not([disabled="true"]):hover,
-  xul|menulist:not([disabled="true"]):hover {
-    background-color: var(--in-content-button-background-hover) !important;
-    color: var(--in-content-button-text-color-hover) !important;
-    border-color: transparent !important;
-  }
-
-  @media (prefers-contrast) {
-    xul|button[default]:not([disabled="true"]):hover {
-      border-color: currentColor !important;
-    }
-
-    button:focus {
-      color: var(--in-content-button-text-color) !important;
-    }
-
-    xul|button[default]:focus,
-    button.primary:focus {
-      color: var(--in-content-primary-button-text-color) !important;
-    }
-  }
-
-  /*- Radio Button -----------------------------------------------------------*/
-  xul|radio {
-    /* margin-inline-start: 0 !important; */
-    appearance: none !important;
-  }
-
-  xul|*.radio-check {
-    appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-    padding: 0 !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 100% !important;
-    margin-block: 2px !important; /* extend the vertical clicktarget */
-    margin-inline: 0 6px !important;
-    background-color: var(--in-content-button-background) !important;
-    background-position: center !important;
-    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
-  }
-
-  xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
-    background-color: var(--in-content-button-background-hover) !important;
-    color: var(--in-content-button-text-color-hover) !important;
-  }
-
-  xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
-    background-color: var(--in-content-button-background-active) !important;
-  }
-
-  xul|*.radio-check[selected] {
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-    color: var(--in-content-primary-button-text-color) !important;
-    background-color: var(--in-content-primary-button-background) !important;
-    background-image: url("chrome://global/skin/icons/radio.svg") !important;
-    border-color: transparent !important;
-
-    /* Style the button also when printing with "Print Backgrounds" unchecked */
-    color-adjust: exact !important;
-  }
-
-  xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
-    background-color: var(--in-content-primary-button-background-hover) !important;
-    color: var(--in-content-primary-button-text-color-hover) !important;
-  }
-
-  xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
-    background-color: var(--in-content-primary-button-background-active) !important;
-  }
-
-  xul|*.radio-label-box {
-    margin-inline: 0 8px !important;
-    padding-inline-start: 0 !important;
-  }
-
-  /* Disabled checkboxes, radios and labels */
-  xul|checkbox[disabled="true"],
-  xul|radio[disabled="true"],
-  xul|label[disabled="true"] {
-    color: inherit !important;
-  }
-
-  xul|checkbox[disabled="true"],
-  xul|radio[disabled="true"],
-  xul|label[disabled="true"] {
-    opacity: 0.5 !important;
-  }
-
-  /*- Check Box --------------------------------------------------------------*/
-  /* From checkbox.css */
-  checkbox {
-    appearance: none !important;
-    -moz-box-align: center !important;
-    margin: 4px 2px !important;
-  }
-
-  .checkbox-icon[src] {
-    margin-inline-end: 2px !important;
-  }
-  .checkbox-label {
-    margin: 1px 0 !important;
-  }
-
-  checkbox[disabled="true"] {
-    opacity: 0.4 !important;
-  }
-
-  .checkbox-check {
-    appearance: none !important;
-    color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
-    background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
-    border: 1px solid currentColor !important;
-    border-radius: 2px !important;
-    margin-inline-end: 6px !important;
-  }
-
-  .checkbox-check {
-    height: 16px !important;
-    width: 16px !important;
-  }
-
-  checkbox:not([disabled="true"]):hover > .checkbox-check {
-    background-color: var(
-      --checkbox-unchecked-hover-bgcolor,
-      color-mix(in srgb, -moz-accent-color 4%, Field)
-    ) !important;
-  }
-
-  checkbox:not([disabled="true"]):hover:active > .checkbox-check {
-    background-color: var(
-      --checkbox-unchecked-active-bgcolor,
-      color-mix(in srgb, -moz-accent-color 8%, Field)
-    ) !important;
-  }
-
-  .checkbox-check[checked] {
-    border-color: var(--checkbox-checked-border-color, transparent) !important;
-    background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
-    background-image: url("chrome://global/skin/icons/check.svg") !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-    color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
-    /* Style the button also when printing with "Print Backgrounds" unchecked */
-    color-adjust: exact !important;
-  }
-
-  checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
-    background-color: var(
-      --checkbox-checked-hover-bgcolor,
-      color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
-    ) !important;
-  }
-
-  checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
-    background-color: var(
-      --checkbox-checked-active-bgcolor,
-      color-mix(in srgb, currentColor 25%, -moz-accent-color)
-    ) !important;
-  }
-
-  checkbox:-moz-focusring > .checkbox-check {
-    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
-    outline-offset: var(--focus-outline-offset, 2px) !important;
-  }
-
-  @media (prefers-contrast) {
-    checkbox:not([disabled="true"]):hover > .checkbox-check {
-      /* color will set the border-color on the check due to how HCM works for in-content pages. */
-      color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
-    }
-
-    .checkbox-check[checked] {
-      color: var(--checkbox-checked-border-color, currentColor) !important;
-      fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
-    }
-
-    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
-    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
-      color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-      fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-    }
-  }
-
-  /* From common.css */
-  xul|*.checkbox-check {
-    margin-block: 2px !important;
-  }
-  xul|richlistitem > xul|*.checkbox-check {
-    margin: 3px 6px !important;
-  }
-
-  /*- Menulist ---------------------------------------------------------------*/
-  /* From mulist.css */
-  xul|menulist {
-    appearance: none !important;
-    background-color: var(--in-content-button-background, ButtonFace) !important;
-    color: var(--in-content-button-text-color, ButtonText) !important;
-    border-radius: 4px !important;
-    padding-block: 4px !important;
-    padding-inline: 12px 8px !important;
-    margin: 5px 2px 3px !important;
-  }
-
-  xul|menulist[size="medium"] {
-    padding-block: 6px !important;
-    padding-inline: 16px 10px !important;
-  }
-
-  xul|menulist[size="large"] {
-    padding-block: 8px !important;
-    padding-inline: 16px 12px !important;
-  }
-
-  xul|menulist:hover {
-    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
-  }
-
-  xul|menulist:hover:active {
-    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
-  }
-
-  xul|menulist:-moz-focusring {
-    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
-    outline-offset: var(--focus-outline-offset, 2px) !important;
-  }
-
-  #label-box {
-    -moz-box-align: center !important;
-    -moz-box-pack: center !important;
-    font-weight: 600 !important;
-  }
-
-  dropmarker {
-    display: -moz-box !important;
-    appearance: none !important;
-    width: 12px !important;
-    height: 12px !important;
-  }
-
-  dropmarker::part(icon) {
-    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-  }
-
-  #highlightable-label:not([highlightable="true"]),
-  #label[highlightable="true"] {
-    display: none !important;
-  }
-
-  xul|menuitem > label:not(.menu-text) {
-    margin: 0 3px !important;
-  }
-
-  /* From common.css */
-  xul|menulist > xul|menupopup {
-    appearance: none !important;
-
-    /* Reset native styles on Windows and macOS */
-    border: none !important;
-    background-color: transparent !important;
-
-    --panel-border-color: var(--in-content-box-border-color) !important;
-    --panel-border-radius: 2px !important;
-    --panel-background: var(--in-content-box-background) !important;
-    --panel-color: var(--in-content-text-color) !important;
-    --panel-padding: 0 !important;
-  }
-
-  xul|menulist > xul|menupopup xul|menu,
-  xul|menulist > xul|menupopup xul|menuitem {
-    appearance: none !important;
-    font-size: 1em !important;
-    padding-block: 0.2em !important;
-    padding-inline: 10px 30px !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
-  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
-    color: var(--in-content-item-hover-text) !important;
-    background-color: var(--in-content-item-hover) !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
-  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
-    color: var(--in-content-item-selected-text) !important;
-    background-color: var(--in-content-item-selected) !important;
-  }
-
-  xul|menulist > xul|menupopup > xul|menu[disabled="true"],
-  xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
-    color: #999 !important;
-    /* override the [_moz-menuactive="true"] background color from
-         global/menu.css */
-    background-color: transparent !important;
-  }
-
-  xul|menulist > xul|menupopup xul|menuseparator {
-    appearance: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border-top: 1px solid var(--in-content-box-border-color) !important;
-    border-bottom: none !important;
-  }
-
-  xul|menulist::part(dropmarker) {
-    margin-block: 1px !important;
-  }
-
-  /* Override menulist.css */
-  xul|menulist[disabled="true"] {
-    background-color: var(--in-content-button-background) !important;
-  }
-
-  xul|menulist:-moz-focusring > xul|*.menulist-label-box {
-    outline: none !important;
-  }
-
-  /*- List Boxes -------------------------------------------------------------*/
-  html|select[size][multiple],
-  xul|listheader,
-  xul|richlistbox {
-    appearance: none !important;
-    margin-inline: 0 !important;
-    background-color: var(--in-content-box-background) !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 4px !important;
-    color: var(--in-content-text-color) !important;
-  }
-
-  xul|listheader {
-    border-bottom: none !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    padding-bottom: 1px !important;
-    box-shadow: inset 0 -1px var(--in-content-border-color) !important;
-    overflow: clip !important; /* Clip border-radius */
-  }
-
-  xul|listheader + xul|richlistbox {
-    margin-top: 0 !important;
-    border-top: none !important;
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-
-  html|select[size][multiple] > html|option,
-  xul|treechildren::-moz-tree-row {
-    padding: 0.3em inherit !important;
-    margin: 0 !important;
-    border: none !important;
-    border-radius: 0 !important;
-    background-image: none !important;
-  }
-
-  xul|treechildren::-moz-tree-row(multicol, odd) {
-    background-color: var(--in-content-box-background-odd);
-  }
-
-  html|select[size][multiple] > html|option:hover,
-  xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover,
-  xul|treechildren::-moz-tree-row(hover) {
-    background-color: var(--in-content-item-hover) !important;
-    color: var(--in-content-item-hover-text) !important;
-  }
-
-  xul|richlistbox > xul|richlistitem[selected],
-  xul|treechildren::-moz-tree-row(selected) {
-    background-color: var(--in-content-item-selected) !important;
-    color: var(--in-content-item-selected-text) !important;
-  }
-
-  xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
-    /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
-    --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important;
-    --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important;
-    --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important;
-    --in-content-button-text-color: var(--in-content-item-selected-text) !important;
-    --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
-    --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
-  }
-
-  xul|richlistitem[selected] xul|menulist:focus-visible {
-    outline-offset: -2px !important;
-  }
-
-  /* Use a 2px border so that selected row highlight is still visible behind
-        an existing high-contrast border that uses the background color */
-  @media (prefers-contrast) {
-    xul|treechildren::-moz-tree-row(selected) {
-      border: 2px solid currentColor !important;
-      border-radius: 4px !important;
-    }
-  }
-
-  xul|panel[type="autocomplete-richlistbox"] {
-    background-color: var(--in-content-box-background) !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    color: var(--in-content-text-color) !important;
-  }
-
-  /*- Each OS ----------------------------------------------------------------*/
-  @include OS($win) {
-    xul|checkbox,
-    xul|radio {
-      padding-inline-start: 0 !important;
-    }
-
-    /* Override menulist.css */
-    xul|menulist[disabled="true"] {
-      background-color: var(--in-content-button-background) !important;
-    }
-
-    xul|menulist:-moz-focusring > xul|*.menulist-label-box {
-      outline: none !important;
-    }
-  }
-
-  @include OS($linux) {
-    /* Overriding appearance also avoids incorrect selection background color with light text. */
-    xul|button > xul|*.button-box,
-    xul|menulist::part(label-box),
-    xul|*.radio-label-box,
-    xul|*.checkbox-label-box {
-      appearance: none !important;
-    }
-
-    xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
-      appearance: none !important;
-    }
-    xul|menulist {
-      font-size: inherit !important;
-    }
-    xul|menulist::part(dropmarker) {
-      display: -moz-box;
-      margin-block: 6px !important;
-    }
-    xul|menulist:-moz-focusring::part(label-box) {
-      outline: none !important;
-    }
-  }
-
-  @include OS($mac) {
-    xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
-    xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
-      display: none !important;
-    }
-
-    xul|menulist::part(dropmarker) {
-      display: -moz-box !important;
-      margin-block: 1px !important;
-    }
-
-    xul|menulist > xul|menupopup xul|menu,
-    xul|menulist > xul|menupopup xul|menuitem {
-      padding-inline-end: 34px !important;
-    }
-
-    xul|*.checkbox-icon,
-    xul|*.radio-icon {
-      margin-inline-end: 0 !important;
-    }
-
-    xul|*.text-link:-moz-focusring {
-      box-shadow: none !important;
-    }
-  }
-}
-
-/*= Delete Cert ==============================================================*/
-@-moz-document url("chrome://pippki/content/deletecert.xhtml")
-{
-  :root {
-    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
-  }
-  #certlist {
-    border: 1px solid var(--in-content-border-color) !important;
-    border-radius: 4px !important;
-  }
-}
-
-/*= Cert Exeption Dialog =====================================================*/
-@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml")
-{
-  :root {
-    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
-  }
-  #locationTextBox {
-    appearance: none !important;
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 4px !important;
-    color: inherit !important;
-    background-color: var(--in-content-box-background) !important;
-
-    font-family: inherit !important;
-    font-size: inherit !important;
-    padding: 8px !important;
-    margin: 2px 4px !important;
-  }
-  #locationTextBox:focus {
-    border-color: transparent !important;
-    outline: 2px solid var(--in-content-focus-outline-color) !important;
-    outline-offset: -1px !important; /* Prevents antialising around the corners */
-  }
-  #locationTextBox:-moz-ui-invalid {
-    border-color: transparent !important;
-    outline: 2px solid var(--in-content-border-invalid) !important;
-    outline-offset: -1px !important; /* Prevents antialising around the corners */
-  }
-  #locationTextBox:disabled {
-    opacity: 0.4 !important;
-  }
-
-  #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) {
-    width: 48px !important;
-    height: 48px !important;
-    background-image: url("chrome://global/skin/icons/warning.svg") !important;
-    background-size: 48px !important;
-    background-repeat: no-repeat !important;
-
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-  }
-  #exceptiondialog:first-child > hbox > vbox > image {
-    display: none !important;
-  }
-}
-
-/*= Page Info ================================================================*/
-@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml")
-{
-  :root {
-    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
-  }
-
-  #viewGroup > radio {
-    border-radius: 8px !important;
-    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
-    margin: 4px !important;
-  }
-  #viewGroup > radio:hover {
-    background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
-  }
-  #viewGroup > radio[selected="true"] {
-    color: var(--in-content-button-text-color) !important; /* SelectedItemText */
-    background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
-  }
-  #viewGroup > radio {
-    color: var(--in-content-deemphasized-text) !important; /* FieldText */
-  }
-
-  #viewGroup > radio {
-    list-style-image: none !important;
-    background-image: var(--viewgroup-image) !important;
-    background-repeat: no-repeat;
-    background-position: top var(--in-content-button-vertical-padding) center;
-    background-size: 32px !important;
-
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-  }
-  #generalTab {
-    --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
-  }
-  #mediaTab {
-    --viewgroup-image: url(chrome://browser/skin/canvas.svg);
-  }
-  #permTab {
-    --viewgroup-image: url(chrome://browser/skin/permissions.svg);
-  }
-  #securityTab {
-    --viewgroup-image: url(chrome://global/skin/icons/security.svg);
-  }
-
-  #viewGroup > radio > .radio-label-box {
-    /* Overwrite */
-    margin: 0 !important;
-    padding: 0 6 !important;
-  }
-
-  #mainDeck input {
-    color: var(--in-content-page-color) !important;
-  }
-
-  #permList {
-    -moz-appearance: none !important;
-    color: var(--in-content-page-color) !important;
-    background-color: var(--in-content-box-background) !important;
-  }
-  .permission:hover {
-    color: var(--in-content-text-color) !important;
-    background-color: var(--in-content-button-background-hover) !important;
-  }
-  .permission radio[disabled] {
-    color: var(--in-content-deemphasized-text) !important;
-  }
-
-  treecols {
-    -moz-appearance: none !important;
-    background: var(--in-content-table-header-background) !important;
-    color: var(--in-content-table-header-color) !important;
-  }
-  treecols > treecol,
-  treecols > treecolpicker.treecol-image {
-    -moz-appearance: none !important;
-    color: var(--in-content-table-header-color) !important;
-    background: var(--in-content-table-header-background) !important;
-    border: 1px solid var(--in-content-border-color) !important;
-    padding: 4px !important;
-    border-spacing: 0;
-
-    text-align: center !important;
-  }
-
-  tree,
-  treechildren::-moz-tree-row {
-    -moz-appearance: none !important;
-    color: var(--in-content-text-color) !important;
-    background-color: var(--in-content-table-background) !important;
-    border: 1px solid var(--in-content-border-color) !important;
-  }
-
-  treechildren::-moz-tree-row(odd) {
-    background-color: var(--in-content-box-background-odd) !important;
-  }
-
-  treechildren::-moz-tree-row(hover) {
-    color: var(--in-content-item-hover-text) !important;
-    background-color: var(--in-content-item-hover) !important;
-  }
-  treechildren::-moz-tree-row(selected) {
-    background-color: var(--in-content-item-selected) !important;
-  }
-
-  treechildren::-moz-tree-cell {
-    border-inline: 1px solid var(--in-content-border-color) !important;
-    border-spacing: 0 !important;
-    padding: 4px !important;
-    margin: 0 !important;
-  }
-  treechildren::-moz-tree-cell-text(hover) {
-    color: var(--in-content-item-hover-text) !important;
-  }
-  treechildren::-moz-tree-cell-text(selected) {
-    font-weight: 600 !important;
-    color: var(--in-content-item-selected-text) !important;
-  }
-
-  #imagecontainerbox {
-    background-color: var(--in-content-box-background) !important;
-  }
-
-  #metatree,
-  #imagetree,
-  #imagecontainerbox,
-  #permList {
-    border-radius: 4px !important;
-  }
-  #metatree,
-  #imagetree {
-    overflow: hidden !important;
-  }
-
-  #topBar,
-  #imagecontainerbox,
-  #permList {
-    border-color: var(--in-content-border-color) !important;
-  }
-}
-
-/*= Library Popup ============================================================*/
-@-moz-document url("chrome://browser/content/places/places.xhtml")
-{
-  @include OS($linux) {
-    :root {
-      --organizer-color: -moz-DialogText;
-      --organizer-deemphasized-color: GrayText;
-
-      --organizer-toolbar-background: -moz-Dialog;
-      --organizer-pane-background: -moz-Dialog;
-      --organizer-content-background: -moz-Dialog;
-
-      --organizer-hover-background: SelectedItem;
-      --organizer-hover-color: SelectedItemText;
-      --organizer-selected-background: SelectedItem;
-      --organizer-selected-color: SelectedItemText;
-      --organizer-outline-color: SelectedItem;
-
-      --organizer-separator-color: ThreeDDarkShadow;
-      --organizer-border-color: ThreeDShadow;
-
-      --organizer-toolbar-field-background: Field;
-      --organizer-toolbar-field-background-focused: Field;
-      --organizer-toolbar-field-border-color: ThreeDShadow;
-      --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
-      --organizer-toolbar-field-focus-box-shadow: unset;
-      --organizer-pane-field-border-color: ThreeDShadow;
-    }
-
-    @media not all and (prefers-contrast) {
-      :root {
-        --organizer-color: var(--in-content-page-color);
-        --organizer-deemphasized-color: var(--in-content-deemphasized-text);
-
-        --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
-        --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
-        --organizer-content-background: var(--in-content-page-background);
-
-        --organizer-hover-background: var(--in-content-button-background-hover);
-        --organizer-hover-color: var(--organizer-color);
-        --organizer-selected-background: var(--in-content-button-background-active);
-        --organizer-selected-color: var(--organizer-color);
-        --organizer-outline-color: var(--in-content-primary-button-background);
-
-        --organizer-separator-color: var(--organizer-pane-field-border-color);
-        --organizer-border-color: var(--in-content-border-color);
-
-        --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
-        --organizer-toolbar-field-background-focused: Field;
-        --organizer-toolbar-field-border-color: transparent;
-        --organizer-toolbar-field-focus-border-color: color-mix(
-          in srgb,
-          var(--organizer-outline-color) 50%,
-          transparent
-        );
-        --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
-        --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
-      }
-
-      @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-        :root {
-          --organizer-color: rgb(251, 251, 254);
-          --organizer-deemphasized-color: rgb(191, 191, 201);
-
-          --organizer-toolbar-background: rgb(43, 42, 51);
-          --organizer-pane-background: rgb(35, 34, 43);
-          --organizer-content-background: rgb(28, 27, 34);
-
-          --organizer-hover-background: rgb(82, 82, 94);
-          --organizer-selected-background: rgb(91, 91, 102);
-          --organizer-outline-color: rgb(0, 221, 255);
-
-          --organizer-toolbar-field-background: var(--in-content-page-background);
-          --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
-          scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
-        }
-      }
-    }
-
-    /*- Toolbar & Menus ------------------------------------------------------*/
-    #placesToolbar {
-      appearance: none !important;
-      background-color: var(--organizer-toolbar-background) !important;
-      color: var(--organizer-color) !important;
-      border-bottom: 1px solid var(--organizer-border-color) !important;
-      padding: 4px !important;
-      padding-inline-end: 6px !important;
-    }
-
-    #placesToolbar > toolbarbutton {
-      appearance: none !important;
-      padding: 5px !important;
-      border-radius: 4px !important;
-    }
-
-    #placesToolbar > toolbarbutton[disabled] {
-      opacity: 0.6 !important;
-    }
-
-    #placesToolbar > toolbarbutton:not([disabled]):hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #placesToolbar > toolbarbutton:not([disabled]):hover:active {
-      background-color: var(--organizer-selected-background) !important;
-    }
-
-    #placesToolbar > toolbarbutton > .toolbarbutton-icon,
-    #placesMenu > menu > image,
-    #placesMenu > menu > .menubar-text {
-      -moz-context-properties: fill !important;
-      fill: currentColor !important;
-    }
-
-    #placesMenu {
-      margin-inline-start: 6px !important;
-    }
-
-    #placesMenu > menu {
-      appearance: none !important;
-      color: var(--organizer-color) !important;
-      border-radius: 4px !important;
-      padding-block: 5px !important;
-      padding-inline-start: 5px !important;
-      margin-inline-end: 2px !important;
-    }
-
-    #placesMenu > menu[_moz-menuactive="true"],
-    #placesMenu > menu:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #placesMenu > menu:hover:active,
-    #placesMenu > menu[open] {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-    }
-
-    #placesMenu > menu > .menubar-text {
-      margin-block: 0 !important; /* override menu.css */
-      padding-inline-end: 4px !important;
-    }
-
-    /*- Search Bar & Input ---------------------------------------------------*/
-    #searchFilter,
-    #detailsPane html|input {
-      appearance: none !important;
-      background-color: var(--organizer-toolbar-field-background) !important;
-      color: var(--organizer-color) !important;
-      border: 1px solid var(--organizer-toolbar-field-border-color) !important;
-      border-radius: 4px !important;
-      margin: 0 !important;
-      padding-block: 2px !important;
-      min-height: 24px !important;
-    }
-
-    #searchFilter[focused] {
-      box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
-      background-color: var(--organizer-toolbar-field-background-focused) !important;
-      border-color: transparent !important;
-      outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
-      outline-offset: -2px !important;
-    }
-
-    /*- Sidebar & Splitter ---------------------------------------------------*/
-    #placesList {
-      background-color: var(--organizer-pane-background) !important;
-    }
-
-    #placesView > splitter {
-      border: 0 !important;
-      border-inline-end: 1px solid var(--organizer-border-color) !important;
-      min-width: 0 !important;
-      width: 3px !important;
-      background-color: transparent !important;
-      margin-inline-start: -3px !important;
-      position: relative !important;
-    }
-
-    /*- Downloads Pane -------------------------------------------------------*/
-    #downloadsRichListBox {
-      color: var(--organizer-color) !important;
-      background-color: var(--organizer-content-background) !important;
-    }
-
-    #clearDownloadsButton:focus-visible {
-      outline: 2px solid var(--organizer-outline-color) !important;
-    }
-
-    richlistitem[selected="true"],
-    richlistitem:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-color) !important;
-    }
-
-    richlistbox:where(:focus) > richlistitem[selected="true"] {
-      background-color: var(--organizer-selected-background) !important;
-    }
-
-    /*- Tree -----------------------------------------------------------------*/
-    #contentView treecol {
-      /* Use box-shadow to draw a bottom border instead of border-bottom
-         * because otherwise the items on contentView won't be perfectly
-         * aligned with the items on the sidebar. */
-      box-shadow: inset 0 -1px var(--organizer-border-color) !important;
-    }
-
-    tree {
-      background-color: var(--organizer-content-background) !important;
-      color: var(--organizer-color) !important;
-    }
-
-    treecol:not([hideheader="true"]),
-    treecolpicker {
-      appearance: none !important;
-      border: none !important;
-      background-color: var(--in-content-button-background) !important;
-      color: var(--organizer-color, inherit) !important;
-      padding: 5px 10px !important;
-    }
-
-    treecol:not([hideheader="true"], [sortable="false"]):hover,
-    treecolpicker:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-color) !important;
-    }
-
-    treecol:not([hideheader="true"], [sortable="false"]):hover:active,
-    treecolpicker:hover:active {
-      background-color: var(--organizer-selected-background) !important;
-    }
-
-    treecol:not([hideheader="true"], :first-child),
-    treecolpicker {
-      padding-left: 10px !important;
-      border-inline-start-width: 1px !important;
-      border-inline-start-style: solid !important;
-      border-image: linear-gradient(
-          transparent 0%,
-          transparent 20%,
-          var(--organizer-border-color) 20%,
-          var(--organizer-border-color) 80%,
-          transparent 80%,
-          transparent 100%
-        )
-        1 1 !important;
-    }
-
-    treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
-      fill: currentColor !important;
-      width: 18px !important;
-      height: 18px !important;
-    }
-
-    treechildren::-moz-tree-row {
-      background-color: transparent !important;
-    }
-
-    treechildren::-moz-tree-row(hover) {
-      background-color: var(--organizer-hover-background) !important;
-    }
-
-    treechildren::-moz-tree-row(selected) {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-      border: 1px solid transparent !important;
-    }
-
-    treechildren::-moz-tree-image(hover),
-    treechildren::-moz-tree-twisty(hover),
-    treechildren::-moz-tree-cell-text(hover) {
-      color: var(--organizer-hover-color) !important;
-    }
-
-    treechildren::-moz-tree-image(selected),
-    treechildren::-moz-tree-twisty(selected),
-    treechildren::-moz-tree-cell-text(selected) {
-      color: var(--organizer-selected-color) !important;
-    }
-
-    treechildren::-moz-tree-separator {
-      height: 1px !important;
-      border-color: var(--organizer-separator-color) !important;
-    }
-
-    treechildren::-moz-tree-separator(hover) {
-      border-color: var(--organizer-hover-color) !important;
-    }
-
-    treechildren::-moz-tree-separator(selected) {
-      border-color: var(--organizer-selected-color) !important;
-    }
-
-    /*- Info Box -------------------------------------------------------------*/
-    #detailsPane {
-      background-color: var(--organizer-pane-background) !important;
-      color: var(--organizer-color) !important;
-      padding: 5px !important;
-      border-top: 1px solid var(--organizer-border-color) !important;
-    }
-
-    #editBookmarkPanelRows .expander-up,
-    #editBookmarkPanelRows .expander-down {
-      appearance: none !important;
-      min-width: 0 !important;
-      padding: 5px !important;
-      margin: 0 !important;
-      margin-inline-end: 4px !important;
-      border: 1px solid var(--organizer-pane-field-border-color) !important;
-      border-radius: 4px !important;
-      color: var(--organizer-color) !important;
-      background-color: var(--organizer-content-background) !important;
-      list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
-      -moz-context-properties: fill !important;
-      fill: currentColor !important;
-    }
-
-    #editBookmarkPanelRows .expander-up:hover,
-    #editBookmarkPanelRows .expander-down:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #editBookmarkPanelRows .expander-up:hover:active,
-    #editBookmarkPanelRows .expander-down:hover:active {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-    }
-
-    #editBookmarkPanelRows .expander-up:focus-visible,
-    #editBookmarkPanelRows .expander-down:focus-visible {
-      outline: 2px solid var(--organizer-outline-color) !important;
-      outline-offset: -1px !important;
-    }
-
-    #editBookmarkPanelRows .expander-up {
-      list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
-    }
-
-    #editBookmarkPanelRows .expander-up > .button-box,
-    #editBookmarkPanelRows .expander-down > .button-box {
-      padding: 0 !important;
-    }
-
-    #places input {
-      border: 1px solid var(--organizer-pane-field-border-color) !important;
-      border-radius: 4px !important;
-      background-color: var(--organizer-content-background) !important;
-      color: var(--organizer-color) !important;
-      min-height: 20px !important;
-      padding-inline: 4px !important;
-    }
-
-    #places input:focus {
-      outline: 2px solid var(--organizer-outline-color) !important;
-      outline-offset: -1px !important;
-    }
-
-    #places input:not(:read-write):focus {
-      outline: none !important;
-    }
-
-    .caption-label {
-      margin-inline-start: 8px !important;
-      color: var(--organizer-deemphasized-color) !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox {
-      appearance: none !important;
-      color: var(--organizer-color) !important;
-      background-color: var(--organizer-content-background) !important;
-      border: 1px solid var(--organizer-border-color) !important;
-      border-radius: 4px !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
-      border: 1px solid transparent !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
-      background-color: var(--organizer-hover-background) !important;
-      color: var(--organizer-hover-color) !important;
-    }
-
-    #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
-      background-color: var(--organizer-selected-background) !important;
-      color: var(--organizer-selected-color) !important;
-    }
-  }
-}
+/* Proton Theme Mode **********************************************************/
+@import "theme/proton_chrome";
 
 /** Decoration ****************************************************************/
-@media (prefers-reduced-motion: no-preference) {
-  /*= URL, Search Bar ========================================================*/
-  #urlbar:hover:not([focused="true"]) > #urlbar-background,
-  #searchbar:hover:not(:focus-within) {
-    --toolbar-field-border-color: var(--toolbar-field-focus-border-color);
-  }
-
-  /*= Other Fields ===========================================================*/
-  /* Sidebar */
-  .sidebar-panel[lwt-sidebar] #search-box:hover,
-  body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
-    border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
-  }
-  .sidebar-panel:not([lwt-sidebar]) #search-box:hover,
-  body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
-    border-color: -moz-accent-color !important;
-  }
-
-  /* Others */
-  #editBMPanel_namePicker:hover,
-  #editBMPanel_tagsField:hover,
-  .findbar-container .findbar-textbox:hover {
-    --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
-  }
-
-  /*= Downloads Panel ========================================================*/
-  /* Accent Color for downloaded item */
-  #downloadsListBox .download-state[exists] .downloadDetails {
-    color: var(--button-primary-bgcolor);
-  }
-  #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
-    color: var(--button-primary-hover-bgcolor);
-  }
-
-  /* File moved or missing */
-  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
-    text-decoration: line-through;
-    text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
-  }
-  #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
-    filter: grayscale(100%) !important;
-  }
-}
-
-/*= Cursor Types =============================================================*/
-#appMenu-proton-update-banner,
-#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
-#appMenu-zoomReduce-button2,
-#appMenu-zoomReset-button2,
-#appMenu-zoomEnlarge-button2,
-#appMenu-fullscreen-button2,
-#panelMenu_showAllBookmarks,
-#PanelUI-historyMore,
-#appMenuClearRecentHistory:not([disabled]),
-#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
-#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
-#BMB_viewBookmarksSidebar,
-#BMB_bookmarksShowAllTop,
-#BMB_bookmarksShowAll,
-#import-button,
-menuitem.openintabs-menuitem,
-#downloadsListBox .downloadButton,
-#downloadsListBox .download-state[exists],
-#downloadsListBox .download-state[exists] .downloadDetails,
-#downloadsHistory,
-#protections-popup-settings-button,
-#protections-popup-show-report-button,
-#identity-popup-clear-sitedata-button,
-#identity-popup-more-info {
-  cursor: pointer !important;
-}
-
-/* TODO: For now, fxa-menu doesn't show any status.
-           (JS required, observe .syncNowBtn status)
-  #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
-    cursor: progress !important;
-  }
-  */
-
-/*= Animate ==================================================================*/
-@media (prefers-reduced-motion: no-preference) {
-  /*- Background Color -------------------------------------------------------*/
-  button,
-  toolbarbutton,
-  stack,
-  vbox,
-  .toolbarbutton-icon,
-  #tabs-newtab-button > .toolbarbutton-icon {
-    transition: background-color 1s var(--animation-easing-function) !important;
-  }
-  button:hover,
-  toolbarbutton:hover,
-  stack:hover,
-  vbox:hover,
-  .toolbarbutton-icon:hover,
-  #tabs-newtab-button:hover > .toolbarbutton-icon {
-    transition: background-color 0.25s var(--animation-easing-function) !important;
-  }
-  @include OS($linux) {
-    .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
-      transition: background-image 0.25s var(--animation-easing-function) !important;
-    }
-  }
-
-  .subviewbutton {
-    /* treechildren::-moz-tree-row: Can't apply
-       menu, menuitem is not apply.
-     */
-    transition: background-color 0.5s var(--animation-easing-function) !important;
-  }
-  .subviewbutton:hover {
-    transition: background-color 0.1s var(--animation-easing-function) !important;
-  }
-
-  /*- Pinned Tab -------------------------------------------------------------*/
-  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
-    /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
-    transition: -moz-box-flex 0.2s var(--animation-easing-function),
-      margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
-    max-width: var(--tab-max-width, 240px);
-  }
-  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
-    transition: -moz-box-flex 0.2s var(--animation-easing-function),
-      margin-inline-start 0.2s var(--animation-easing-function) !important;
-  }
-
-  #tabbrowser-tabs:not([movingtab]) .tab-content {
-    transition: padding-inline 0.2s var(--animation-easing-function),
-      /* Unloaded Tab */ opacity 0.5s var(--animation-easing-function) !important;
-  }
-  #tabbrowser-tabs:not([movingtab]) .tab-content::before,
-  #tabbrowser-tabs:not([movingtab]) .tab-content::after {
-    transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
-  }
-  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
-    transition: width 0.3s var(--animation-easing-function) !important;
-  }
-  #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
-    transition: all 0.3s var(--animation-easing-function) !important;
-  }
-
-  /*- URL / Search Bar -------------------------------------------------------*/
-  #urlbar-background,
-  #searchbar {
-    transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
-  }
-  #urlbar-background:hover,
-  #searchbar:hover {
-    transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
-  }
-
-  /* Buttons in URL bar */
-  #tracking-protection-icon-container,
-  #identity-icon-box,
-  #identity-permission-box,
-  #notification-popup-box,
-  #page-action-buttons > .urlbar-page-action {
-    transition: background-color 2.5s var(--animation-easing-function) !important;
-  }
-  #tracking-protection-icon-container:hover,
-  #identity-icon-box:hover,
-  #identity-permission-box:hover,
-  #notification-popup-box:hover,
-  #page-action-buttons > .urlbar-page-action:hover {
-    transition: background-color 1.25s var(--animation-easing-function) !important;
-  }
-
-  /*- Border - Other Fields --------------------------------------------------*/
-  #search-box:hover,
-  xul|search-textbox.tabsFilter:hover,
-  #editBMPanel_namePicker:hover,
-  #editBMPanel_tagsField:hover,
-  .findbar-container .findbar-textbox:hover {
-    transition: border-color 1s var(--animation-easing-function) !important;
-  }
-  #search-box:hover,
-  xul|search-textbox.tabsFilter:hover,
-  #editBMPanel_namePicker:hover,
-  #editBMPanel_tagsField:hover,
-  .findbar-container .findbar-textbox:hover {
-    transition: border-color 0.5s var(--animation-easing-function) !important;
-  }
-
-  /*- Sidebar ----------------------------------------------------------------*/
-  #sidebar-box {
-    /* like #sidebar-box > #sidebar */
-    min-width: 14em;
-    width: 18em;
-    max-width: 36em;
-
-    /* Animation */
-    transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
-      visibility 0s linear !important;
-  }
-  #sidebar-box[hidden="true"] {
-    display: -moz-box !important;
-    margin-inline-start: -18em;
-    opacity: 0;
-    visibility: collapse;
-    transition-delay: 0s, 0s, 0.25s !important;
-  }
-
-  /*- Expand - Synced Tabs ---------------------------------------------------*/
-  @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
-  {
-    .item-tabs-list {
-      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-      transform: translateY(0%);
-      opacity: 1;
-      max-height: 100%;
-    }
-
-    .item.client.closed .item-tabs-list {
-      display: flex !important;
-
-      transition: transform 0.2s ease-out, opacity 0.2s ease-out,
-        max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
-      visibility: hidden;
-      transform: translateY(-100%);
-      opacity: 0;
-      max-height: 0;
-    }
-  }
-
-  /*- Arrow - Synced Tabs ----------------------------------------------------*/
-  @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
-  {
-    /* treechildren::-moz-tree-twisty: Can't apply */
-    #template-container .item.client .item-twisty-container {
-      transition: transform 0.1s var(--animation-easing-function) !important;
-    }
-
-    #template-container .item.client.closed .item-twisty-container {
-      transform: rotate(-90deg);
-      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
-    }
-
-    #template-container .item.client.closed .item-twisty-container:dir(rtl) {
-      transform: rotate(90deg);
-      background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
-    }
-  }
-
-  /*- Arrow - Edit Bookmark Popup --------------------------------------------*/
-  #editBookmarkPanelRows .expander-up .button-icon,
-  #editBookmarkPanelRows .expander-down .button-icon {
-    transition: transform 0.1s var(--animation-easing-function) !important;
-  }
-  #editBookmarkPanelRows .expander-up {
-    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
-  }
-  #editBookmarkPanelRows .expander-up .button-icon {
-    transform: rotate(180deg);
-  }
-}
+@import "theme/decoration";
 
 /** Reduce Padding ************************************************************/
 /*= Root - Reduce Padding ====================================================*/