#root.root {
  --tabs-indent: 0px;
  --general-border-radius: 4px;
  --toolbar-bg-light: #f1f1fa;
  --toolbar-bg-dark: #262629;
  --frame-bg-light: #f1f1fa;
  --frame-bg-dark: #262629;
  --tabs-height: 32px;
  --tabs-margin: 6px;
  --pinned-tabs-col: 4;
  --toolbar-bg: var(--toolbar-bg-light);
  --frame-bg: var(--frame-bg-light);
  flex-direction: column-reverse;
}

@media (prefers-color-scheme: dark) {
  #root.root {
    --toolbar-bg: var(--toolbar-bg-dark);
    --frame-bg: var(--frame-bg-dark);
  }
}

.NavigationBar .main-items {
  justify-content: center;
}

.Tab {
  min-width: 33px;
  transition: all ease-in-out 200ms;
}

.NavigationBar {
  transition: all ease-in-out 200ms;
}

.NavigationBar[data-layout="inline"] .main-items .nav-item {
  transform: translateX(0) !important;
  position: relative !important;
  flex-grow: 1;
  max-width: 66px;
}

.NavigationBar[data-layout="inline"] .main-items .nav-item[data-active="false"] {
  display: none;
}

.BottomBar {
  display: none;
}

.Tab .audio, .Tab .title {
  opacity: 0 !important;
  transition: ease-in-out 250ms;
}

.Tab[data-pin="true"] .fav, .Tab[data-pin="true"] .fav-icon {
  width: 20px;
  height: 20px;
}

.Tab[data-pin="false"] .fav, .Tab[data-pin="false"] .fav-icon {
  width: 18px;
  height: 18px;
}

.Tab[data-pin="true"][data-active="true"] .color-layer {
  background-color: #ffffff !important;
}

.Tab[data-pin="false"] .color-layer {
  opacity: 0 !important;
  border: 0 !important;
}

.Tab[data-pin="false"][data-active="true"] .body {
  box-shadow: rgba(17, 17, 26, 0.15) 0px 0px 16px;
}

.Tab[data-pin="false"] {
  border: 0 !important;
}

.Tab .title {
  background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%);
  background-clip: text;
  color: transparent;
}

@media screen and (min-width: 350px) {
  .NavigationBar[data-layout="inline"] .main-items .nav-item[data-active="false"] {
    display: flex;
  }
  .BottomBar {
    display: flex;
  }
  #root.root {
    --tabs-indent: 14px;
  }
  .Tab .audio, .Tab .title {
    opacity: 1 !important;
  }
  #root.root {
    --tabs-pinned-height: 40px;
  }
  #root.root {
    --tabs-pinned-width: calc((100vw - (var(--tabs-margin) * (var(--pinned-tabs-col) + 1))) / var(--pinned-tabs-col));
  }
}