// nav bar top right and top left rounded corners
#nav-bar {
  border-radius: 7px 7px 0 0 !important;
}

// remove rounded corners for popup windows
#main-window[chromehidden="menubar toolbar directories extrachrome "] {
  #nav-bar {
    border-radius: 0 !important;
  }
}

// chrome refresh lock icon style
@include moz-pref-media("not userChrome.ui-compact-url-bar") {

  // lock (secure)
  #identity-box[pageproxystate="valid"] {
    &:is(.verifiedDomain, .mixedActiveBlocked) #identity-icon {
      list-style-image: get-var("page-info") !important;
    }
  }

  #identity-box {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    margin-inline-end: 4px !important;
    margin-inline-start: 2px !important;

    @include moz-pref-media("not userChrome.ui-force-old-icons") {
      fill: get-var(icon-color-primary) !important;
    }
  }

  #identity-icon-box {
    min-width: 24px !important;
  }

  // remove box side paddings
  #identity-box:not(.chromeUI):not(.extensionPage) {
    #identity-icon-box.identity-box-button {
      padding-inline: unset !important;
    }
  }

  // for icon box middle position
  :is(#identity-icon-box, #identity-permission-box).identity-box-button,
  #notification-popup-box,
  #urlbar-go-button,
  .search-go-button {
    // height: unset !important;
    max-height: 24px !important;
  }

  #identity-box {
    align-items: center !important;
  }

  // correct permissions icon position
  #identity-permission-box.identity-box-button {
    padding-inline: 4px !important;
  }

  #identity-icon-box {
    background-color: get-var(background-color-100) !important;
  }

  #identity-box[pageproxystate="valid"].notSecureText>.identity-box-button,
  #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button,
  #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button,
  #urlbar-label-box {
    background-color: get-var(background-color-100) !important;
  }
}

// ----------------------------------------------------------------
// * (Temporary disabled) New Nav Bar style

// #nav-bar {
//   min-height: 46px !important;
//   max-height: 46px !important;
// }

// html,
// body {

// --toolbarbutton-inner-padding: 9px !important; // Button Inner Padding

// --toolbarbutton-outer-padding: 1px !important; // gap between nav buttons
// --toolbar-start-end-padding: 5px !important; // first button left and last button right padding

// }

// #nav-bar  {
//   display: flex !important;
//   align-items: center !important;

//   .toolbarbutton-1 {
//   min-height: 34px !important;
//   max-height: 34px !important;
//   min-width: 34px !important;

//   place-content: center !important;
//   place-items: center !important;
//   align-items: center !important;
//   justify-content: center !important;

//   &>stack, &>image {
//     min-height: 34px !important;
//     max-height: 34px !important;
//     min-width: 34px !important;

//     place-content: center !important;
//     place-items: center !important;
//     align-items: center !important;
//     justify-content: center !important;
//   }
//   }

//   :is(.toolbarbutton-1, #home-button, #reload-button, #stop-button)  > :is(stack, image){
//     padding: 9px !important;
//   }

//   #home-button {
//     .toolbarbutton-icon{
//       padding: 9px !important;
//     }
//   }

//   #reload-button, #stop-button {
//     .toolbarbutton-icon{
//       padding: 7px !important;
//     }
//   }

//   #unified-extensions-button{
//     .toolbarbutton-icon{
//       padding: 7px !important;
//     }
//   }

//   #developer-button {
//     .toolbarbutton-icon{
//       padding: 7px !important;
//     }
//   }

//   #PanelUI-button {
//     display: flex !important;
//     align-items: center !important;
//   }
// }