_navigation-bar.css

#nav-bar {
    background-color: var(--moonlight-gray-2) !important;
    box-shadow: none !important;
}

/* Toolbar buttons */
.toolbarbutton-1 {
    fill: var(--moonlight-gray-7) !important;
    transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

.toolbarbutton-1:hover {
    fill: var(--moonlight-gray-9) !important;
}

.toolbarbutton-1[open="true"] {
    fill: var(--moonlight-gray-9) !important;
}

.toolbarbutton-1[disabled] {
    fill: var(--moonlight-gray-5) !important;
}

.toolbarbutton-1 .toolbarbutton-icon,
.toolbarbutton-1 .toolbarbutton-badge-stack {
    background: none !important;
}

/* Remove back button background and border */

#back-button > .toolbarbutton-icon {
    background: none !important;
    border: none !important;
}

/* Web extensions custom styling */

#nav-bar-customization-target > .toolbarbutton-1.webextension-browser-action .toolbarbutton-badge-stack,
#nav-bar-customization-target > #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
    background: var(--moonlight-gray-4) !important;
    border: 1px solid var(--moonlight-gray-1);
    transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

#nav-bar-customization-target > .toolbarbutton-1.webextension-browser-action:hover .toolbarbutton-badge-stack,
#nav-bar-customization-target > #fxa-toolbar-menu-button:hover .toolbarbutton-badge-stack {
    background: var(--moonlight-gray-5) !important;
    border-color: var(--moonlight-blue);
}

#nav-bar-customization-target > .toolbarbutton-1.webextension-browser-action[open="true"]
    .toolbarbutton-badge-stack,
#fxa-toolbar-menu-button[open="true"] .toolbarbutton-badge-stack {
    background: var(--moonlight-blue) !important;
}

/* Remove burger menu spacing */
#PanelUI-button {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    border: none !important;
    border-inline-start: none !important;
}
/* --- */

/* - Url bar - */
#urlbar-input {
    color: var(--moonlight-gray-10) !important;
}
#urlbar #urlbar-background {
    background-color: var(--moonlight-gray-3) !important;
    border: none !important;
    border-radius: 3px;
    box-shadow: none !important;
}
#urlbar[open="true"] #urlbar-background {
    background-color: var(--moonlight-gray-4) !important;
}
.urlbarView:not(.megabar) .urlbarView-row:not([type="tip"]):hover,
.urlbarView.megabar .urlbarView-row:not([type="tip"]):hover > .urlbarView-row-inner {
    background: none !important;
}
.urlbarView #urlbar-results .urlbarView-row .urlbarView-row-inner {
    transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.urlbarView #urlbar-results .urlbarView-row .urlbarView-row-inner:hover {
    background-color: var(--moonlight-gray-5) !important;
    color: var(--moonlight-blue) !important;
}
.urlbarView
    #urlbar-results
    .urlbarView-row[aria-selected="true"]
    .urlbarView-row-inner {
    border: 1px solid var(--moonlight-blue) !important;
    background-color: var(--moonlight-gray-5) !important;
    color: var(--moonlight-blue) !important;
}
.urlbarView.megabar .urlbarView-body-inner {
    border: 0 !important;
}
.urlbarView #urlbar-results {
    color: var(--moonlight-gray-10) !important;
}
.urlbarView #urlbar-results .urlbarView-row .urlbarView-url {
    color: var(--moonlight-blue) !important;
}

/* Url bar Icons */

#urlbar-container box,
#urlbar-container image,
.urlbar-icon-wrapper {
    background-color: transparent !important;
}

#urlbar-container [class*="icon"],
#urlbar-container [id*="icon"]
{
    border: 0 !important;
    fill: var(--moonlight-gray-7) !important;
    fill-opacity: 1 !important;
    transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

#urlbar-container [class*="icon"]:hover,
#urlbar-container [id*="icon"]:hover,
#urlbar-container [open="true"] [class*="icon"],
#urlbar-container [open="true"] [id*="icon"],
#urlbar-container [class*="icon"][open="true"],
#urlbar-container [id*="icon"][open="true"]
{
    fill: var(--moonlight-gray-9) !important;
    fill-opacity: 1 !important;
}

#urlbar-zoom-button {
    border-color: var(--moonlight-gray-1) !important;
    background-color: var(--moonlight-gray-4) !important;
    color: var(--moonlight-gray-10) !important;
    transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#urlbar-zoom-button:hover {
    background-color: var(--moonlight-gray-5) !important;
    border-color: var(--moonlight-blue) !important;
}

#pageActionSeparator {
    display: none !important;
}

/* --- */