/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    .tabbrowser-tab[selected="true"] .tab-background {
      border: 1px solid #313244 !important;
    }
    --toolbar-bgcolor: rgb(30, 30, 46) !important;
    --toolbox-non-lwt-bgcolor: rgb(17, 17, 27) !important;
    --toolbox-non-lwt-textcolor: rgb(205, 214, 244) !important;
    --input-bgcolor: rgb(24, 24, 37) !important;
    --toolbar-field-background-color: var(--input-bgcolor) !important;
    --input-color: rgb(205, 214, 244) !important;
    --toolbar-field-color: var(--input-color) !important;
    .tab-background[selected]:not([multiselected]) {
      outline: 1px solid rgb(49, 50, 68);
      outline-offset: -1px;
    }
    .tab-background[multiselected] {
      --focus-outline-color: rgb(49, 50, 68);
    }
    --arrowpanel-background: rgb(30, 30, 46) !important;
    --arrowpanel-color: rgb(205, 214, 244) !important;
    --toolbarbutton-active-background: rgb(108, 112, 134) !important;
    &:where([tabsintitlebar]) {
      --toolbox-non-lwt-bgcolor-inactive: rgb(17, 17, 27) !important;
    }
    --toolbarbutton-icon-fill-attention: rgb(249, 226, 175) !important;
    --toolbarbutton-icon-fill: rgb(205, 214, 244) !important;
    --arrowpanel-border-color: rgb(49, 50, 68) !important;
    --urlbarView-highlight-color: rgb(205, 214, 244) !important;
    --urlbarView-highlight-background: rgb(108, 112, 134) !important;
    #tabbrowser-tabs {
      --tab-loading-fill: rgb(249, 226, 175) !important;
    }
    --tab-selected-bgcolor: rgb(30, 30, 46) !important;
    --tab-selected-textcolor: rgb(205, 214, 244) !important;
    --chrome-content-separator-color: rgb(30, 30, 46) !important;
    --toolbar-field-focus-border-color: rgb(49, 50, 68) !important;
    --input-border-color: rgb(49, 50, 68) !important;
    --toolbar-field-border-color: var(--input-border-color) !important;
    --toolbar-field-focus-background-color: rgb(30, 30, 46) !important;
    #urlbar-input:focus::selection,
    .searchbar-textbox:focus::selection {
      color: rgb(30, 30, 46);
    }
    #urlbar-input:focus::selection,
    .searchbar-textbox:focus::selection {
      background-color: rgb(249, 226, 175);
    }
    --toolbarseparator-color: rgb(249, 226, 175) !important;
  }
}

/* Light theme */
@media (prefers-color-scheme: light) {
  :root {
    .tabbrowser-tab[selected="true"] .tab-background {
      border: 1px solid #ccd0da !important;
    }
    --toolbar-bgcolor: rgb(239, 241, 245) !important;
    --toolbox-non-lwt-bgcolor: rgb(220, 224, 232) !important;
    --toolbox-non-lwt-textcolor: rgb(76, 79, 105) !important;
    --input-bgcolor: rgb(230, 233, 239) !important;
    --toolbar-field-background-color: var(--input-bgcolor) !important;
    --input-color: rgb(76, 79, 105) !important;
    --toolbar-field-color: var(--input-color) !important;
    .tab-background[selected]:not([multiselected]) {
      outline: 1px solid rgb(223, 142, 29);
      outline-offset: -1px;
    }
    .tab-background[multiselected] {
      --focus-outline-color: rgb(223, 142, 29);
    }
    --arrowpanel-background: rgb(239, 241, 245) !important;
    --arrowpanel-color: rgb(76, 79, 105) !important;
    --toolbarbutton-active-background: rgb(156, 160, 176) !important;
    &:where([tabsintitlebar]) {
      --toolbox-non-lwt-bgcolor-inactive: rgb(220, 224, 232) !important;
    }
    --toolbarbutton-icon-fill-attention: rgb(223, 142, 29) !important;
    --toolbarbutton-icon-fill: rgb(76, 79, 105) !important;
    --arrowpanel-border-color: rgb(223, 142, 29) !important;
    --urlbarView-highlight-color: rgb(76, 79, 105) !important;
    --urlbarView-highlight-background: rgb(156, 160, 176) !important;
    #tabbrowser-tabs {
      --tab-loading-fill: rgb(223, 142, 29) !important;
    }
    --tab-selected-bgcolor: rgb(239, 241, 245) !important;
    --tab-selected-textcolor: rgb(76, 79, 105) !important;
    --chrome-content-separator-color: rgb(239, 241, 245) !important;
    --toolbar-field-focus-border-color: rgb(223, 142, 29) !important;
    --input-border-color: rgb(239, 241, 245) !important;
    --toolbar-field-border-color: var(--input-border-color) !important;
    --toolbar-field-focus-background-color: rgb(239, 241, 245) !important;
    #urlbar-input:focus::selection,
    .searchbar-textbox:focus::selection {
      color: rgb(239, 241, 245);
    }
    #urlbar-input:focus::selection,
    .searchbar-textbox:focus::selection {
      background-color: rgb(223, 142, 29);
    }
    --toolbarseparator-color: rgb(223, 142, 29) !important;
  }
}