:root {
  --sno-colors-border: #e8e8e80f;
  --sno-colors-border-hover: #3e3e3eb2;

  #urlbar {
    transform-origin: right;
    transition: all 0.2s linear !important;
    --toolbarbutton-border-radius: 10px;
    --urlbarView-separator-color: var(--zen-colors-border);
    --urlbarView-hover-background: var(--toolbarbutton-hover-background);
    --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
    border: 1px solid var(--sno-colors-border);
    border-radius: var(--toolbarbutton-border-radius);
    overflow: hidden;
    padding: 1px;
  }

  #urlbar:hover {
    border: 1px solid var(--sno-colors-border-hover);
  }

  #urlbar[breakout][breakout-extend] {
    top: 10%;
  }

  #urlbar:is([focused], [open]) > #urlbar-background,
  #searchbar:focus-within {
    background: #000000e5;
  }
}

:root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not(
    [chromehidden~="toolbar"]
  ) {
  & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
    width: -moz-available;
    border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
    transform: translate3d(0, 0, 0);
    position: relative;

    --uc-tweak-rounded-corners-shadow-color: var(--sno-colors-border);

    --uc-tweak-rounded-corners-shadow: 0 0 0 1px
      var(--uc-tweak-rounded-corners-shadow-color);

    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;

    /* Use pseudo element overlay to simulate rounded corners, similar to the
     * tab corners, fixes bug with backdrop-filter. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      /* Draw toolbar background on the negative corner space, then draw the
       * same shadow from the browser window on top. */
      box-shadow:
        var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
        0 0 0 16px var(--zen-main-browser-background) !important;
      clip-path: inset(0);
      pointer-events: none;
    }
  }
}