:root {
  --sidebar-background-color: var(--toolbar-bgcolor) !important; 
  --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#sidebar-box {
  --zen-sidebar-box-border-radius: var(--zen-appcontent-border-radius);
  margin: var(--zen-appcontent-separator-from-window) !important;
  border-radius: var(--zen-sidebar-box-border-radius) !important;
  overflow: hidden;
  transition: .2s;
  margin-left: 0 !important;
  border: var(--zen-appcontent-border);
}

#sidebar-box:not([positionend="true"]) {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  margin-right: 0 !important;
}

#sidebar-box[hidden="true"] {
  width: 0 !important;
  opacity: 0 !important;
}

#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
  box-shadow: none !important;
}

#sidebar-splitter {
  /* we can still use the splitter but we can't see it */
  background: transparent !important;  
  border-color: transparent !important;
  width: 1px !important;
}

#sidebar-splitter[inlinedwithsidebar="true"] {
  background-color: -moz-dialog !important;
}

#sidebar-box[positionend] {
  margin-left: 0 !important;
}

.zen-sidebar-action-button {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#TabsToolbar .toolbarbutton-1 > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button {
  border-radius: 100px !important;
}

#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button:hover,
.zen-sidebar-action-button[open="true"] {
  background: var(--toolbarbutton-hover-background);
}

.zen-sidebar-action-button:hover image {
  background: transparent !important;
}

.zen-sidebar-action-button label {
  display: none !important;
}

#sidebar-box[hidden="true"] .zen-sidebar-action-button {
  opacity: 0;
  animation: zen-sidebar-button-fadeIn 0.4s forwards;
}

@keyframes zen-sidebar-button-fadeIn {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Icons */

#zen-preferences-button {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

#zen-history-button {
  list-style-image: url("chrome://browser/skin/history.svg");
}

#zen-bookmark-button {
  list-style-image: url(chrome://browser/skin/bookmark-hollow.svg);
}

#zen-profile-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

#zen-profile-button > div:last-child {
  background-image: var(--avatar-image-url);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  width: 20px;
  height: 20px;
}

/* Ugly code */

#TabsToolbar .zen-sidebar-action-button:nth-child(1) { animation-delay: 0.1s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(2) { animation-delay: 0.2s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(3) { animation-delay: 0.3s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(4) { animation-delay: 0.4s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(5) { animation-delay: 0.5s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(6) { animation-delay: 0.6s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(7) { animation-delay: 0.7s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(8) { animation-delay: 0.8s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(9) { animation-delay: 0.9s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(10) { animation-delay: 1s; }

#TabsToolbar .zen-side-bar-profiles-button-panel-correction {
  position: absolute;
  bottom: -2px;
  right: -2px;
}

#zen-sidebar-icons-wrapper toolbarbutton {
  position: relative;
}

#zen-sidebar-icons-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 3px;
  height: 100%;
  position: relative;
  background: transparent !important;
  align-items: center;
  justify-content: end;
}