src/components/from-navigator/hover-sidebar/top.css
#titlebar {
  height: var(--xxl) !important;
}

#nav-bar {
  --toolbar-bgcolor: transparent;

  position: absolute !important;
  inset: var(--sidebar-padding) var(--sidebar-padding) auto auto;
  height: var(--xxl) !important;
  border: none !important;
}

.titlebar-buttonbox-container {
  position: absolute;
  inset: var(--sidebar-padding) auto auto var(--sidebar-padding);
  height: var(--xxl) !important;
}

.titlebar-button {
  padding-inline: calc(var(--sm) / 2) !important;

  image {
    width: 0.95rem !important;
    height: 0.95rem !important;
    margin-top: calc(-1.6 * var(--sm)) !important;
    background-color: var(--neutral) !important;
    background-image: none !important;
    transition: background-color var(--transition);
  }

  &:where(.titlebar-max, .titlebar-restore):hover image {
    background-color: var(--success) !important;
  }

  &.titlebar-close:hover image {
    background-color: var(--error) !important;
  }

  &.titlebar-min:hover image {
    background-color: var(--warning) !important;
  }
}

#PanelUI-menu-button,
#downloads-button {
  .toolbarbutton-badge-stack {
    border-radius: var(--md) !important;
    transition: background-color var(--transition);
  }

  &:hover .toolbarbutton-badge-stack {
    background-color: var(--base-100) !important;
  }

  &[open] .toolbarbutton-badge-stack {
    background-color: var(--neutral) !important;
  }
}
