sidebar.css

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(66, 79, 90);
  color: rgb(242, 242, 242);
  font: message-box;
  -moz-user-select: none;
}

section {
  margin: 0 0 0.5rem 0;
}

a {
 color: #fff;
}

.container {
  display: flex;
  padding: 0.25rem;
  align-items: center;
}


.expandable .container {
  cursor: pointer;
}

.expandable .container:hover {
  background-color: rgb(94, 105, 114);
}

.usercontext-icon {
  max-inline-size: 32px;
  max-block-size: 24px;
  min-inline-size: 32px;
  min-block-size: 24px;
}

[data-identity-icon="undefined"] .usercontext-icon {
  fill: currentColor;
  background: center center no-repeat url("img/blank-tab.svg");
}

.close-tab, .new-tab {
  border: none;
  block-size: 16px;
  cursor: pointer;
}

.new-tab {
  box-sizing: content-box;
  max-block-size: 12px;
  max-inline-size: 12px;
  min-block-size: 12px;
  min-inline-size: 12px;
  padding: 0.3rem;
  background: no-repeat url("img/newtab-inverted.svg");
  background-position: center 3px;
}

.new-tab:hover {
  background-image: url("img/newtab.svg");
  background-color: #cccccccc;
}

.close-tab {
  margin-inline-start: auto;
  margin-inline-end: 6px;
  background-image: url("img/close.svg");
}

.close-tab:hover {
  background-color: #cccccccc;
}

/*
.tab-item:hover .close-tab {
  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
}
*/

.container-name {
  font-size: 1.25rem;
}

.tab-count {
  padding: 0.25rem;
  font-size: 0.75rem;
}

.tab-container {
  background: rgb(251, 251, 251);
  color: rgb(51, 51, 51);
}

.closed .tab-container {
  display: none;
}

.tab-item {
  cursor: pointer;
  color: unset;
  text-decoration: none;
  margin: 0;
  padding: calc(0.3rem + 1px) 2px calc(0.3rem + 1px) 5px;
  display: flex;
  --in-content-border-highlight: transparent;
  border-inline-start: 4px solid var(--in-content-border-highlight);
  border-block-end: 1px solid #efefef;
}

.tab-item:last-of-type {
  border-block-end: none;
}

.tab-item.dragging {
  border: 2px dashed #000;
}
.tab-item.over {
  border-block-end: 1px solid fuchsia;
}

.tab-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-item.active .tab-title {
  white-space: normal;
}

.tab-item img {
  min-inline-size: 16px;
  min-block-size: 16px;
  max-inline-size: 16px;
  max-block-size: 16px;
  margin: 0 4px 0 0;
}

.tab-item.active {
  --in-content-border-highlight: #0052cc;
}
.tab-item:hover {
  background-color: #eee;
}

.pinned-tabs {
  margin-inline-start: auto;
  margin-inline-end: 0.5rem;
  display: flex;
  flex-flow: wrap;
  justify-content: end;
}

.pinned-tabs .tab-item {
  border-inline-start: none;
  padding: 0.3rem;
  border-block-end: solid 4px var(--in-content-border-highlight);
}

.pinned-tabs .tab-item:hover {
  background: #eee;
}

.pinned-tabs .tab-item.active {
  background: #fff;
}

.pinned-tabs .tab-item img {
  margin: 0;
}

/* Lets hide the image but make it load */
.offpage {
  opacity: 0;
}

.tab-item::before {
  content: "";
  min-block-size: 16px;
  min-inline-size: 16px;
  max-block-size: 16px;
  max-inline-size: 16px;
  margin-inline-start: -12px;
  filter: url(img/filters.svg#fill);
  fill: rgb(66, 79, 90);
  background: center center no-repeat;
}

.sound-playing::before {
  background-image: url("img/tab-audio-small.svg#tab-audio-white");
}

.muted::before {
  background-image: url("img/tab-audio.svg#tab-audio-muted");
}

#containersAdvert {
  display: block;
  text-decoration: none;
  padding: 1rem;
}

#containersAdvert[hidden] {
  display: none;
}

#containersAdvert:hover {
  background-color: rgb(94, 105, 114);
}

#containersAdvert > img {
  max-inline-size: 100%;
}