/* container colors */

#main-window:has(.tabbrowser-tab[selected][class*="identity-color-"]) {
  --cust-accent: color-mix(in srgb, var(--container-color) 60%, black);
  --cust-accent-dark: color-mix(in srgb, var(--cust-accent) 50%, black);
  --cust-accent-darker: color-mix(in srgb, var(--cust-accent) 30%, black);
  --cust-accent-text: color-mix(in srgb, var(--cust-accent) 50%, white);

  #TabsToolbar,
  .urlbarView-row:is([selected]),
  ::-moz-selection {
      background-color: var(--cust-accent) !important;
  }
  
  #titlebar,
  .browser-toolbar,
  .tab-background:is([selected], [multiselected]) {
      background-color: var(--cust-accent-dark) !important;

      &:-moz-window-inactive {
          opacity: .85 !important;
      }
  }
  
  #urlbar-background,
  #searchbar,
  .panel-viewcontainer {
      outline: none !important;
      border: none !important;
      background-color: var(--cust-accent-darker) !important;
  }

  .urlbarView-url {
      color: var(--cust-accent-text) !important;
  }

}

#main-window:has(.tabbrowser-tab[selected].identity-color-blue) {
  --container-color: dodgerblue;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-turquoise) {
  --container-color: turquoise;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-green) {
  --container-color: green;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-yellow) {
  --container-color: gold;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-orange) {
  --container-color: orange;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-red) {
  --container-color: firebrick;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-pink) {
  --container-color: pink;
}

#main-window:has(.tabbrowser-tab[selected].identity-color-purple) {
  --container-color: purple;
}