Firefox CSS: Set a variable based on properties of another element

Question

I am making a Firefox CSS theme, but an element I am working on needs to inherit traits from another element. In this instance, the #identity-box element will color the #urlbar based on connection security. Since the #identity-box is nested in the #urlbar, it is easy to implement this code. The main issue is that the #searchbar needs to be affected by the code that the #identity-box uses to color the #urlbar in order to color the #searchbar as well as the #urlbar.

I have determined that the best way to implement this type of code is using a variable, however the variable needs to change its value based on the current state of the #identity-box value. Since I am just starting out learning CSS, I'm not quite sure how exactly to implement a variable, but I would think that perhaps I can reference the element directly in the variable such as: --identity-box-bgcolor #identity-box. However this doesn't work (I'm sure this is to be expected.)

How can I implement a variable for the #searchbar to be affected by the #identity-box color?

Thanks! Code below.

#urlbar, #searchbar-textbox /*ADDS SUBTLE TRANSLUCENT BOX INSIDE URL BAR, ALSO GOVERNS THE SPACE BETWEEN THE TABS AND TOP OF THE TITLE BAR*/
{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    background: transparent !important;
    border-radius: 0px 0px 0px 0px !important;
    color: #000000 !important;
}

#searchbar /*ADDS SUBTLE TRANSLUCENT BOX INSIDE URL BAR, ALSO GOVERNS THE SPACE BETWEEN THE TABS AND TOP OF THE TITLE BAR*/
{
    margin-top: 0px !important;
    margin-left: -4px !important;
    margin-bottom: 0px !important;
    background-color: rgba(255,255,255,0.53) !important;
    border-color: rgba(0,0,0,0.3) !important;
    border-radius: 0px 0px 0px 0px !important;
    color: #000000 !important;
}

#identity-box::before
{
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: var(--urlbar-height);
  left: 0;
  top: 0;
  pointer-events: none;
}
:root[customizing] #identity-box::before,
#urlbar[focused] #identity-box::before { display: none }
#searchbar[focused] #identity-box::before { display: none }

/* https */
#identity-box[pageproxystate="valid"].verifiedDomain::before
{
    background-color: rgba(147,235,117,0.5) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(155,196,141,0.6), inset 0px 1px 0px 0px rgba(155,196,141,0.6) !important;
}

/* http: and potentially some other insecure connections like ftp: rgba(255,0,35,0.32)*/
#identity-box[pageproxystate="valid"].certErrorPage::before,
#identity-box[pageproxystate="valid"].certUserOverridden::before,
#identity-box[pageproxystate="valid"].notSecure::before
{
    background-color: rgba(252,78,104,0.53) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(252,78,104,0.78), inset 0px 1px 0px 0px rgba(252,78,104,0.78) !important;
}

#identity-box.certErrorPage::before,
#identity-box.notSecure::before
{
    background-color: rgba(255,255,255,0.53) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
}

/* Mixed content including neterror */
#identity-box[pageproxystate="valid"].unknownIdentity::before,
#identity-box[pageproxystate="valid"].mixedDisplayContent::before,
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked::before,
#identity-box[pageproxystate="valid"].weakCipher::before
{
    background-color: rgba(255,235,117,0.53) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(255,235,117,0.68), inset 0px 1px 0px 0px rgba(255,235,117,0.78) !important;
}

/* Extension pages rgba(150,35,250,0.32) */
#identity-box[pageproxystate="valid"].extensionPage::before
{
    background-color: rgba(255,255,255,0.53) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
}

/* Internal about: and chrome:// urls (includes reader-view) rgba(35,150,250,0.32) */
#identity-box[pageproxystate="valid"].chromeUI::before
{
    background-color: rgba(255,255,255,0.53) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
}

#identity-box.localResource::before
{
    background-color: rgba(255,255,255,0.53) !important;
    box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
}

Since I'm new to Stack Overflow, I'm not quite sure how to format these posts. I apologize in advance. I did try what I mentioned above however.