#appcontent
  > #tabbrowser-tabbox
  > #tabbrowser-tabpanels
  > .deck-selected
  > .browserContainer
  > .browserStack
  > browser {
  border-radius: 10px !important;
  margin: 10px !important;
}

$sidebarColor1: #3b3f52;
$sidebarColor2: #3b3f52;

browser {
  background: linear-gradient(
    #{darken($sidebarColor1, 10%)},
    #{darken($sidebarColor2, 10%)}
  );
  border-radius: 6px;
}

.browserStack {
  padding: 10px;
  background: linear-gradient(#{$sidebarColor1}, #{$sidebarColor2});
}

.browserContainer {
  background-color: var(
    --lwt-accent-color-inactive,
    var(--lwt-accent-color)
  ) !important;
  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
  background-repeat: no-repeat, var(--lwt-background-tiling) !important;
  background-position: right top, var(--lwt-background-alignment) !important;
}

#titlebar {
  display: none !important;
}

.titlebar-buttonbox-container {
  display: none !important;
}

#forward-button,
#back-button,
#reload-button {
  display: none !important;
}

#sidebar-button {
  margin-left: 10px !important;
}

#navigator-toolbox:not(:hover) {
  --is-bar-visible: hidden;
  opacity: 0 !important;
  transition: height 200ms ease-in-out, opacity 175ms ease-in-out;
}

#PersonalToolbar {
  display: none;
}

#navigator-toolbox {
  position: fixed;
  z-index: 1;
  height: 15px;
  overflow: var(--is-bar-visible);
  right: 0;
  top: 0;
  width: 100%;
  transition: 0.1s !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

#navigator-toolbox:hover {
  height: 40px;
  opacity: 1 !important;
  transition: opacity 175ms ease-in-out;
}

#navigator-toolbox:focus-within {
  height: 40px;
  opacity: 1 !important;
  transition: opacity 175ms ease-in-out;
  --is-bar-visible: visible;
}

#nav-bar {
  background: #{$sidebarColor1} !important;
  border-radius: 10px;
}

#urlbar-background {
  background: #{$sidebarColor1} !important;
}

toolbarbutton[open="true"] {
  --is-bar-visible: visible !important;
}

#sidebar-header {
  display: none;
}

#sidebar-box {
  width: 200px;
  min-width: 190px !important;
  max-width: 300px !important;
  min-height: unset !important;
  max-height: unset !important;
  border-right: none !important;
  background-color: $sidebarColor1 !important;
}

#sidebar-splitter {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hiding the header on new tab page */
#main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
#main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box {
  padding-top: 0 !important;
}

@media (prefers-color-scheme: light) {
  .browserStack {
    background: linear-gradient(
      #{lighten($sidebarColor1, 60%)},
      #{lighten($sidebarColor2, 60%)}
    );
  }
  #nav-bar,
  #urlbar-background {
    background: #{lighten($sidebarColor1, 60%)} !important;
  }
}
