// fixes for default Firefox colors feature
@include moz-pref-media("userChrome.theme-default") {

  // urlbar suggestions item
  .urlbarView-row {
    &[selected] {
      background-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important;
    }

    &[selected] {
      border-left-color: var(--color-accent-primary) !important;
    }

    &:not([selected]):hover {
      background-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important;
    }
  }

  .urlbarView-row {
    &:not([selected]):hover {
      border-left-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important;
    }
  }

  [dir="rtl"] {
    .urlbarView-row {
      &[selected] {
        border-left-color: var(--color-accent-primary) !important;
      }

      &:not([selected]):hover {
        border-right-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important;
      }
    }
  }

  // global accent color
  :root,
  html,
  body {
    --#{$prefix}-accent-color: var(--color-accent-primary) !important;
    // --md-text-on-accent: var(--button-primary-color) !important;
    --#{$prefix}-menu-border-color: var(--arrowpanel-border-color) !important;

    --toolbar-field-focus-border-color: var(--color-accent-primary) !important;
  }

  .browser-toolbar {
    &:not(.titlebar-color) {
      background-color: var(--toolbar-bgcolor) !important;
    }
  }

  // make navbar the same color as selected tab
  @media (prefers-color-scheme: dark) {

    html,
    body {
      --toolbar-bgcolor: var(--tab-selected-bgcolor) !important;
    }

    #nav-bar {
      background-color: var(--toolbar-bgcolor) !important;
    }
  }

  #urlbar-background, .urlbar-background {
    background-color: var(--toolbar-field-background-color) !important;
  }

  #urlbar:is([open], [focused]) {

    #urlbar-background, .urlbar-background,
    #searchbar {
      background-color: var(--toolbar-field-focus-background-color) !important;
    }
  }

  @include moz-pref-media("userChrome.ui-chrome-refresh") {
    #alltabs-button {
      .toolbarbutton-badge-stack {
        background-color: var(--tab-selected-bgcolor) !important;
      }

      &:not(:active, [open="true"]):hover {
        .toolbarbutton-badge-stack {
          background-color: get-var("alltabs-background-color-open") !important;
        }
      }

      &:active:hover {
        .toolbarbutton-badge-stack {
          background-color: var(--tab-selected-bgcolor) !important;
        }
      }
    }
  }
}