@charset "UTF-8";

/* sidebar.css */
:root {
  --base-size: calc(1rem / 3);
  --tab-height: calc(var(--base-size) * 8);
  --tab-height-compact: calc(var(--base-size) * 4);
  --icon-size: calc(var(--base-size) * 4);
  --icon-medium-size: calc(var(--base-size) * 3);
  --icon-small-size: calc(var(--base-size) * (3 * 3) / (2 * 2));
  --icon-x-small-size: calc(var(--base-size) * 2);
  --icon-xx-small-size: calc(var(--base-size) * 3 / 2);
  --background-color: #f0f0f4;
  --background-active-color: #fff;
  --background-discarded-color: #f0f0f4;
  --background-field-color: #f0f0f4;
  --background-field-active-color: #fff;
  --background-hover-color: #dadade;
  --background-hover-shadow: #15141a1a;
  --background-selection-color: #fff;
  --background-selection-hover-color: #dadade;
  --border-active-color: #80808e66;
  --border-discarded-color: transparent;
  --border-field-color: transparent;
  --border-field-active-color: #053e94;
  --focus-outline-color: #0061e066;
  --foreground-color: #15141a;
  --foreground-active-color: #15141a;
  --foreground-discarded-color: #15141a;
  --foreground-field-color: #15141a;
  --foreground-field-active-color: #15141a;
  --foreground-hover-color: #15141a;
  --foreground-selection-color: #15141a;
  --foreground-selection-hover-color: #15141a;
  --tab-group-pinned: #669;
  --tab-group-pinned-heading-text: #55557f;
  --tab-group-1: #c63;
  --tab-group-1-heading-text: #8c4623;
  --tab-group-2: #396;
  --tab-group-2-heading-text: #1e593b;
  --tab-group-3: #c69;
  --tab-group-3-heading-text: #7f3f5f;
  --tab-group-4: #69c;
  --tab-group-4-heading-text: #395672;
  --throbber-connecting-color: #0061e0;
  --font-weight-active: normal;
  --zoom-level: 1;

  color-scheme: light dark;
  font: menu;
}

/* structure */
html, body, body * {
  box-sizing: content-box;
}

body {
  margin: 0;
  padding: 0;
  -moz-context-properties: fill, fill-opacity;
  background-color: var(--background-color);
  color: var(--foreground-color);
  fill: var(--foreground-color);
}

main {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: auto;
  zoom: var(--zoom-level);
}

.narrow main {
  scrollbar-width: thin;
}

/* tab-container */
.tab-container {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  z-index: 1;
}

.tab-container.newtab,
.tab-container.pinned {
  background-color: var(--background-color);
  color: var(--foreground-color);
}

/* tab */
.tab {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  border: 0;
  padding: 0;
  width: auto;
  height: auto;
  transition: margin-top 0.1s, height 0.1s;
  user-select: none;
  z-index: 2;
}

.tab[hidden] {
  display: none;
}

/* tab items */
.tab-items {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  align-items: center;
  margin: calc(var(--base-size) / 2);
  border: 1px solid transparent;
  border-radius: var(--base-size);
  padding: var(--base-size);
  min-width: 0;
  height: var(--tab-height);
  background-color: var(--background-color);
}

.compact .tab-items {
  height: var(--tab-height-compact);
}

.tab.active > .tab-items {
  border-color: var(--border-active-color);
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 30%);
  background-color: var(--background-active-color);
  color: var(--foreground-active-color);
  fill: var(--foreground-active-color);
  font-weight: var(--font-weight-active);
  z-index: 3;
}

.tab.discarded > .tab-items {
  background-color: var(--background-discarded-color);
  color: var(--foreground-discarded-color);
  fill: var(--foreground-discarded-color);
  z-index: 3;
}

:is(.tab:hover, .tab.active:hover, .tab.discarded:hover) > .tab-items {
  background-color: var(--background-hover-color);
  color: var(--foreground-hover-color);
  fill: var(--foreground-hover-color);
  z-index: 5;
}

.tab.highlighted:not(.active) > .tab-items {
  border-color: var(--border-active-color);
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 30%);
  background-color: var(--background-selection-color);
  color: var(--foreground-selection-color);
  fill: var(--foreground-selection-color);
  z-index: 4;
}

.tab.highlighted:not(.active):hover > .tab-items {
  background-color: var(--background-selection-hover-color);
  color: var(--foreground-selection-hover-color);
  fill: var(--foreground-selection-hover-color);
}

/* dnd */
:is(.tab.drop-target, .heading.drop-target) > .tab-items {
  background-color: var(--background-hover-color);
  border-color: transparent;
}

:is(.tab.drop-target.drop-after-target, .heading.drop-target.drop-after-target) > .tab-items {
  border-bottom-color: var(--border-field-active-color);
  box-shadow: 0 0 1px var(--border-field-active-color);
}

.tab.drop-target.drop-before-target > .tab-items {
  border-top-color: var(--border-field-active-color);
  box-shadow: 0 0 1px var(--border-field-active-color);
}

.tab-content {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.tab-icon {
  margin: var(--base-size);
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--foreground-color);
  stroke: var(--throbber-connecting-color);
}

.tab.active .tab-icon {
  fill: var(--foreground-active-color);
}

.tab.discarded .tab-icon {
  fill: var(--foreground-discarded-color);
}

:is(.tab:hover, .tab.active:hover, .tab.discarded:hover) .tab-icon {
  fill: var(--foreground-hover-color);
}

.tab.highlighted:not(.active) .tab-icon {
  fill: var(--foreground-selection-color);
}

.tab.highlighted:not(.active):hover .tab-icon {
  fill: var(--foreground-selection-hover-color);
}

.tab-title {
  display: block;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  mask-image: linear-gradient(to left, transparent, black 2em);
}

.tab-title:dir(rtl) {
  mask-image: linear-gradient(to right, transparent, black 2em);
}

/* audio */
.tab-audio {
  display: none;
}

.tab-audio.audible {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 var(--icon-medium-size);
  margin: 0 var(--base-size) 0 0;
  padding: var(--base-size);
  height: var(--icon-medium-size);
  fill: var(--foreground-color);
}

.tab.active .tab-audio.audible {
  fill: var(--foreground-active-color);
}

.tab.discarded .tab-audio.audible {
  fill: var(--foreground-discarded-color);
}

:is(.tab:hover, .tab.active:hover, .tab.discarded:hover) .tab-audio.audible {
  fill: var(--foreground-hover-color);
}

.tab.highlighted:not(.active) .tab-audio.audible {
  fill: var(--foreground-selection-color);
}

.tab.highlighted:not(.active):hover .tab-audio.audible {
  fill: var(--foreground-selection-hover-color);
}

.tab-audio-icon {
  width: var(--icon-small-size);
  height: var(--icon-small-size);
}

/* contextual identities */
.tab-ident {
  display: none;
}

.tab-ident.identified {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 var(--icon-medium-size);
  margin: 0 var(--base-size) 0 0;
  padding: var(--base-size);
  height: var(--icon-medium-size);
}

.tab-ident-icon {
  width: var(--icon-medium-size);
  height: var(--icon-medium-size);
}

/* close button */
.tab-close {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 var(--icon-size);
  margin: 0;
  border-radius: var(--base-size);
  padding: var(--base-size);
  height: var(--icon-size);
  fill: var(--foreground-color);
}

.compact .tab-close {
  border-radius: calc(var(--base-size) / 2);
  padding: 0;
}

.tab.active .tab-close {
  fill: var(--foreground-active-color);
}

.tab.discarded .tab-close {
  fill: var(--foreground-discarded-color);
}

:is(.tab:hover, .tab.active:hover, .tab.discarded:hover) .tab-close {
  fill: var(--foreground-hover-color);
}

.tab.highlighted:not(.active) .tab-close {
  fill: var(--foreground-selection-color);
}

.tab.highlighted:not(.active):hover .tab-close {
  fill: var(--foreground-selection-hover-color);
}

.tab-close:hover {
  background-color: var(--background-hover-shadow);
}

.tab-close-icon {
  width: var(--icon-medium-size);
  height: var(--icon-medium-size);
}

/* pinned tabs */
.tab-container.pinned {
  position: sticky;
  top: 0;
  max-height: calc(100vh - var(--tab-height) * 3);
  overflow-y: auto;
  background-color: var(--background-color);
  color: var(--foreground-color);
  fill: var(--foreground-color);
  z-index: 6;
}

.narrow .tab-container.pinned {
  scrollbar-width: thin;
}

.tab-container.pinned .tab-close {
  display: none;
}

.tab-container:not(.pinned) .tab-pinned {
  display: none;
}

.tab-container.pinned .tab-pinned {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 var(--icon-size);
  margin: 0;
  border-radius: var(--base-size);
  padding: var(--base-size);
  height: var(--icon-size);
  fill: var(--foreground-color);
}

.compact .tab-container.pinned .tab-pinned {
  border-radius: calc(var(--base-size) / 2);
  padding: 0;
}

.tab-container.pinned > .tab.active .tab-pinned {
  fill: var(--foreground-active-color);
}

.tab-container.pinned > .tab.discarded .tab-pinned {
  fill: var(--foreground-discarded-color);
}

.tab-container.pinned > :is(.tab:hover, .tab.active:hover, .tab.discarded:hover) .tab-pinned {
  fill: var(--foreground-hover-color);
}

.tab-container.pinned > .tab.highlighted:not(.active) .tab-pinned {
  fill: var(--foreground-selection-color);
}

.tab-container.pinned > .tab.highlighted:not(.active):hover .tab-pinned {
  fill: var(--foreground-selection-hover-color);
}

.tab-pinned-icon {
  height: var(--icon-small-size);
  width: var(--icon-small-size);
}

/* new tab */
.tab-container.newtab {
  position: sticky;
  bottom: 0;
  background-color: var(--background-color);
  color: var(--foreground-color);
  fill: var(--foreground-color);
  z-index: 6;
}

.tab.newtab.show-separator {
  border-top: 1px solid var(--background-hover-shadow);
}

.tab.newtab > .newtab-items {
  all: unset;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  align-items: center;
  margin: calc(var(--base-size) / 2);
  border: none;
  border-radius: var(--base-size);
  padding: var(--base-size);
  height: var(--tab-height);
  background-color: var(--background-color);
  min-width: 0;
}

.compact .newtab-items {
  height: var(--tab-height-compact);
}

.tab.newtab:hover > .newtab-items {
  background-color: var(--background-hover-shadow);
  color: var(--foreground-hover-color);
  fill: var(--foreground-hover-color);
  z-index: 7;
}

.compact .tab.newtab > .newtab-items {
  padding: 0;
}

.tab.newtab > .newtab-items > .newtab-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1 1 auto;
  min-width: 0;
}

.compact .tab.newtab > .newtab-items > .newtab-content {
  margin: 0;
  padding: 0;
}

.tab.newtab .newtab-icon {
  margin: 0;
  padding: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  pointer-events: none;
}

/* tab group heading */
.heading {
  all: unset;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  border: 0;
  padding: 0;
  width: auto;
  height: auto;
  transition: margin-top 0.1s, height 0.1s;
  user-select: none;
  z-index: 2;
}

:not(.tab-group) > .heading,
.heading[hidden] {
  display: none;
}

.heading.active > .tab-items {
  border-color: var(--border-active-color);
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 30%);
  background-color: var(--background-active-color);
  color: var(--foreground-active-color);
  fill: var(--foreground-active-color);
  z-index: 3;
}

:is(.heading:hover, .heading.active:hover) > .tab-items {
  background-color: var(--background-hover-color);
  color: var(--foreground-hover-color);
  fill: var(--foreground-hover-color);
  z-index: 5;
}

.heading.highlighted:not(.active) > .tab-items {
  border-color: var(--border-active-color);
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 30%);
  background-color: var(--background-selection-color);
  color: var(--foreground-selection-color);
  fill: var(--foreground-selection-color);
  z-index: 4;
}

.heading.highlighted:not(.active):hover > .tab-items {
  background-color: var(--background-selection-hover-color);
  color: var(--foreground-selection-hover-color);
  fill: var(--foreground-selection-hover-color);
}

/* heading label */
.heading-label {
  display: block;
  flex: 1 1 auto;
  margin: 0 var(--base-size) 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  mask-image: linear-gradient(to left, transparent, black 2em);
  font-weight: bold;
}

/* heading label edit button */
.heading-label-edit {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 var(--icon-size);
  margin: 0;
  border-radius: var(--base-size);
  padding: var(--base-size);
  height: var(--icon-size);
  fill: var(--foreground-color);
}

.compact .heading-label-edit {
  border-radius: calc(var(--base-size) / 2);
  padding: 0;
}

.heading.active .heading-label-edit {
  fill: var(--foreground-active-color);
}

:is(.heading:hover, .heading.active:hover) .heading-label-edit {
  fill: var(--foreground-hover-color);
}

.heading-label-edit:hover {
  background-color: var(--background-hover-shadow);
}

.heading-label-edit-icon {
  width: var(--icon-medium-size);
  height: var(--icon-medium-size);
}

/* focus outline */
:is(.tab.highlighted.multi, .heading.highlighted.multi) > .tab-items {
  outline: 1px solid var(--focus-outline-color);
  outline-offset: -1px;
}

:is(.tab.highlighted.multi.active, .heading.highlighted.multi.active) > .tab-items {
  outline-width: 2px;
  outline-offset: -2px;
}

/* tab group */
.tab-group.tab-collapsed > :not([hidden]) ~ .tab {
  margin-top: 0;
  height: 0;
  overflow: hidden;
}

.tab-context {
  display: none;
}

.group:not(.ungroup) :is(.tab-group > :not([hidden]), :not(.tab-group) > .tab) > .tab-context {
  display: flex;
  flex: 0 0 var(--icon-medium-size);
  align-items: center;
  justify-content: space-around;
  margin: 0;
  border-radius: 0;
  padding: 0;
}

.narrow-tab-group.group:not(.ungroup) :is(.tab-group > :not([hidden]), :not(.tab-group) > .tab) > .tab-context {
  flex: 0 0 var(--icon-x-small-size);
}

.group:not(.ungroup) .tab-group > :is(.heading:not([hidden]), .heading[hidden] + .tab) > .tab-context {
  margin-top: calc(var(--base-size) / 2);
  border-top-left-radius: calc(var(--base-size) / 2);
  border-top-right-radius: calc(var(--base-size) / 2);
}

.group:not(.ungroup) .tab-group:not(.tab-collapsed) > .tab:last-child > .tab-context,
.group:not(.ungroup) .tab-group.tab-collapsed > .heading:not([hidden]) > .tab-context,
.group:not(.ungroup) .tab-group.tab-collapsed > .heading[hidden] + .tab > .tab-context {
  margin-bottom: calc(var(--base-size) / 2);
  border-bottom-left-radius: calc(var(--base-size) / 2);
  border-bottom-right-radius: calc(var(--base-size) / 2);
}

.tab-group.tab-collapsed > :not([hidden]) > .tab-context > .tab-toggle-icon {
  transform: rotate(-90deg);
}

:is(.tab-group > :not([hidden]), :not(.tab-group) > .tab) > .tab-context > .tab-toggle-icon {
  margin: 0;
  width: var(--icon-x-small-size);
  height: var(--icon-x-small-size);
  transition: transform 0.1s;
  pointer-events: none;
}

.narrow-tab-group :is(.tab-group > :not([hidden]), :not(.tab-group) > .tab) > .tab-context > .tab-toggle-icon {
  width: var(--icon-xx-small-size);
  height: var(--icon-xx-small-size);
}

.group :is(.tab-group > :not([hidden]) ~ .tab, :not(.tab-group) > .tab) > .tab-context > .tab-toggle-icon {
  display: none;
}

.tab-group:nth-child(4n + 1) > :not([hidden]) > .tab-context {
  background-color: var(--tab-group-1);
}

.tab-group:nth-child(4n + 1) > .heading > .tab-items > .tab-content > .tab-icon {
  fill: var(--tab-group-1-heading-text);
}

.tab-group:nth-child(4n + 1) > .heading > .tab-items > .tab-content > .heading-label:not([contenteditable]) {
  color: var(--tab-group-1-heading-text);
}

.tab-group:nth-child(4n + 2) > :not([hidden]) > .tab-context {
  background-color: var(--tab-group-2);
}

.tab-group:nth-child(4n + 2) > .heading > .tab-items > .tab-content > .tab-icon {
  fill: var(--tab-group-2-heading-text);
}

.tab-group:nth-child(4n + 2) > .heading > .tab-items > .tab-content > .heading-label:not([contenteditable]) {
  color: var(--tab-group-2-heading-text);
}

.tab-group:nth-child(4n + 3) > :not([hidden]) > .tab-context {
  background-color: var(--tab-group-3);
}

.tab-group:nth-child(4n + 3) > .heading > .tab-items > .tab-content > .tab-icon {
  fill: var(--tab-group-3-heading-text);
}

.tab-group:nth-child(4n + 3) > .heading > .tab-items > .tab-content > .heading-label:not([contenteditable]) {
  color: var(--tab-group-3-heading-text);
}

.tab-group:nth-child(4n) > :not([hidden]) > .tab-context {
  background-color: var(--tab-group-4);
}

.tab-group:nth-child(4n) > .heading > .tab-items > .tab-content > .tab-icon {
  fill: var(--tab-group-4-heading-text);
}

.tab-group:nth-child(4n) > .heading > .tab-items > .tab-content > .heading-label:not([contenteditable]) {
  color: var(--tab-group-4-heading-text);
}

.tab-group.pinned > :not([hidden]) > .tab-context {
  background-color: var(--tab-group-pinned);
}

.tab-group.pinned > .heading > .tab-items > .tab-content > .tab-icon {
  fill: var(--tab-group-pinned-heading-text);
}

.tab-group.pinned > .heading > .tab-items > .tab-content > .heading-label:not([contenteditable]) {
  color: var(--tab-group-pinned-heading-text);
}

/* text box */
[contenteditable=""],
[contenteditable="true"] {
  border: 1px solid var(--border-field-color);
  border-radius: calc(var(--base-size) / 2);
  padding: calc(var(--base-size) / 3);
  background-color: var(--background-field-color);
  color: var(--foreground-field-color);
  width: calc(100% - var(--base-size) / 3 * 2);
  height: var(--icon-size);
  font-weight: normal;
  user-select: text;
  mask-image: none;
}

[contenteditable=""]:focus,
[contenteditable="true"]:focus {
  background-color: var(--background-field-active-color);
  border-color: var(--border-field-active-color);
  color: var(--foreground-field-active-color);
}

.dark-theme {
  --background-color: #38383d;
  --background-active-color: #42414d;
  --background-discarded-color: #38383d;
  --background-field-color: #1c1b22;
  --background-field-active-color: #42414d;
  --background-hover-color: #4c4c50;
  --background-hover-shadow: #fbfbfe1a;
  --background-selection-color: #42414d;
  --background-selection-hover-color: #4c4c50;
  --border-active-color: transparent;
  --border-field-color: transparent;
  --border-field-active-color: #aaf2ff;
  --focus-outline-color: #0df6;
  --foreground-color: #f9f9fa;
  --foreground-active-color: #fbfbfe;
  --foreground-discarded-color: #f9f9fa;
  --foreground-field-color: #fbfbfe;
  --foreground-field-active-color: #fbfbfe;
  --foreground-hover-color: #f9f9fa;
  --foreground-selection-color: #fbfbfe;
  --foreground-selection-hover-color: #f9f9fa;
  --tab-group-pinned-heading-text: #aaf;
  --tab-group-1-heading-text: #ff7f3f;
  --tab-group-2-heading-text: #41bf80;
  --tab-group-3-heading-text: #f279b5;
  --tab-group-4-heading-text: #72ace5;
  --throbber-connecting-color: #0df;
}

.light-theme:not(.custom-theme) :is(.tab.active, .tab.highlighted, .heading.active, .heading.highlighted) > .tab-items {
  box-shadow: 0 0 4px -1px rgb(0 0 0 / 30%);
}

.dark-theme :is(.tab.active, .tab.highlighted, .heading.active, .heading.highlighted) > .tab-items {
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #38383d;
    --background-active-color: #42414d;
    --background-discarded-color: #38383d;
    --background-field-color: #1c1b22;
    --background-field-active-color: #42414d;
    --background-hover-color: #4c4c50;
    --background-hover-shadow: #fbfbfe1a;
    --background-selection-color: #42414d;
    --background-selection-hover-color: #4c4c50;
    --border-active-color: transparent;
    --border-field-color: transparent;
    --border-field-active-color: #aaf2ff;
    --focus-outline-color: #0df6;
    --foreground-color: #f9f9fa;
    --foreground-active-color: #fbfbfe;
    --foreground-discarded-color: #f9f9fa;
    --foreground-field-color: #fbfbfe;
    --foreground-field-active-color: #fbfbfe;
    --foreground-hover-color: #f9f9fa;
    --foreground-selection-color: #fbfbfe;
    --foreground-selection-hover-color: #f9f9fa;
    --tab-group-pinned-heading-text: #aaf;
    --tab-group-1-heading-text: #ff7f3f;
    --tab-group-2-heading-text: #41bf80;
    --tab-group-3-heading-text: #f279b5;
    --tab-group-4-heading-text: #72ace5;
    --throbber-connecting-color: #0df;

    color-scheme: dark;
  }

  :is(.tab.active, .tab.highlighted, .heading.active, .heading.highlighted) > .tab-items {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab,
  .tab-group > :not([hidden]) > .tab-context > .tab-toggle-icon {
    transition: none;
  }
}
