/* Toolbar items */
.toolbar-item {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  outline: inherit;
}

/* Disabled toolbar item */
.toolbar-item:disabled {
  opacity: 0.25 !important;
}

/* Toolbar icon */
.toolbar-icon {
  opacity: 0.8;
}

.toolbar-icon:not(.toolbar-item-disabled):hover {
  opacity: 1.0;
}

/* Toolbar styling */
#item-container-toolbar,
#sidebar-toolbar {
  background: none;
  font-size: 22px;
  padding-top: 8px;
  padding-bottom: 8px;
}
#sidebar-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-left: 0.7em;
  padding-right: 0.7em;
}
#item-container-toolbar {
  padding-left: 0.59em;
  padding-right: 0.59em;
}


/* Toolbar when scrolling sidebar */
body[data-theme="dark"].toolbar-contrast #item-container-toolbar {
  background-color: rgba(0,0,0,0.001); /* trigger */
  backdrop-filter: blur(10px) brightness(0.8);
  -webkit-backdrop-filter: blur(10px) brightness(0.8); /* Safari */
}
body[data-theme="light"].toolbar-contrast #item-container-toolbar {
  background-color: rgba(255,255,255,0.001);
  backdrop-filter: blur(10px) brightness(1.2);
  -webkit-backdrop-filter: blur(10px) brightness(1.2); /* Safari */
}

.toolbar-left-side {
width:140px;
}
.toolbar-right-side {
width:140px;
}

@media (max-width: 576px) {
  #item-container-toolbar,
  #sidebar-toolbar {
  font-size: 20px;
  }
  .toolbar-left-side {
  width:100px;
  }
  .toolbar-right-side {
  width:100px;
  }
}

/* Toolbar item groups */
.toolbar-item-group {
  display: flex;
  align-items: center; /* vertically center children */
  justify-content: flex-start;
  gap:10px;
}

body[data-theme="dark"] .toolbar-item.toolbar-item-active {
  background: color(display-p3 0.197 0.208 0.228) !important;
  border-radius: 4px;
}
body[data-theme="light"] .toolbar-item.toolbar-item-active {
  background: #f2f2f2f8 !important;
  border-radius: 4px;
}