src/components/from-navigator/hover-sidebar/index.css
@import url("./top.css");
@import url("./search-input.css");
@import url("./bookmarks.css");
@import url("./tabs.css");
@import url("./bottom.css");

@property --sidebar-correction {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

/* small buttons on sidebar (navigator) */
#navigator-toolbox .toolbarbutton-1 {
  width: 36px;
  height: 36px;
  padding: 0 !important;

  .toolbarbutton-icon {
    border-radius: var(--md) !important;
    transition: background-color var(--transition);
  }

  &[open] .toolbarbutton-icon,
  &:not([disabled]):hover .toolbarbutton-icon {
    background-color: var(--base-100) !important;
  }
}

#navigator-toolbox {
  --sidebar-correction: 1;
  --sidebar-translate: calc(var(--sidebar-width) + var(--content-padding) / 2);

  position: absolute;
  z-index: 10;
  width: var(--sidebar-width) !important;
  height: calc(100vh - var(--content-padding)) !important;
  padding: var(--sidebar-padding) !important;
  background-color: var(--base-200) !important;
  background-image: none !important;
  border: 2px solid var(--neutral) !important;
  border-radius: var(--lg) !important;
  box-shadow: var(--shadow);
  transform: translateY(-50%);
  backdrop-filter: blur(1rem);
  transition: left 150ms ease-in-out, --sidebar-correction 150ms ease-in-out !important;
  inset: 50vh auto auto calc(-1 * var(--sidebar-width));

  &::before,
  &::after {
    position: absolute;
    top: 0;
    width: var(--content-padding);
    height: 100%;
    content: "";
  }

  &::before {
    left: calc(-1 * var(--content-padding));
  }

  &::after {
    right: calc(-1 * var(--content-padding));
  }
}

:root:has(
    :is(
        :is(#placesContext, #tabContextMenu):hover,
        :is(#fxa-toolbar-menu-button, #star-button-box)[open],
        :is(
            #appMenu-popup,
            #downloadsPanel,
            #notification-popup,
            #unified-extensions-panel,
            #full-page-translations-panel,
            #notification-popup,
            #appMenu-notification-popup
          )[panelopen]
      )
  )
  #navigator-toolbox,
#navigator-toolbox[movingtab],
#navigator-toolbox:has(#toolbar-menubar[inactive]):not(
    :has(:is(#urlbar[breakout-extend], screenshots-buttons):hover)
  ):hover {
  --sidebar-correction: 0;

  left: calc(var(--content-padding) / 2);
}

.titlebar-spacer,
#customizableui-special-spring1,
#customizableui-special-spring2,
#scrollbutton-up,
#scrollbutton-down,
spacer {
  display: none;
}

#appMenu-popup,
#unified-extensions-panel,
#customizationui-widget-panel,
#full-page-translations-panel,
#editBookmarkPanel {
  margin: calc(var(--sm) / 3) auto !important;
}

:root:has(#notification-popup[panelopen]) #unified-extensions-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  background-color: var(--base-200) !important;
  transform: translate(2px, 3px) !important;
}

#notification-popup {
  width: calc(var(--sidebar-width) - var(--sidebar-padding));
  padding-top: var(--sm);
  transform: translateX(0) !important;
}

#appMenu-notification-popup {
  width: calc(var(--sidebar-width) - var(--sidebar-padding) + 4px);
  transform: translate(var(--sidebar-padding), var(--sm)) !important;
}
