* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

html, body {
  font-family: var(--font-family-ui);
  font-size: var(--font-size);
  color: var(--text-color);
  height: 100%;
  background-color: black;
}

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--main-bg);
  overflow: hidden;
}

/* title bar */
.title-bar {
  background-color: var(--title-bar-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.title-bar .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title-bar .wrapper.left {
  max-width: 25%;
  overflow: hidden;
  position: relative;
}

.title-bar .wrapper.left::after {
  content: "";
  width: 5%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to right, transparent, var(--title-bar-bg));
  pointer-events: none;
  transition: background 0.3s ease;
}

.title-bar .wrapper.right {
  height: 100%;
}

.title-bar .wrapper.right button {
  height: 100%;
  border-radius: 0;
  aspect-ratio: 1.3/1;
}

.title-bar button {
  border-radius: var(--border-radius);
}

.title-bar button:hover {
  background-color: var(--title-bar-hover-color);
}

/* main view */
#view {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* sidebar */
#sidebar {
  background-color: var(--sidebar-bg);
  width: 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 0.3s ease, background-color 0.3s ease;
  min-height: 0;
}

#sidebar button {
  position: relative;
}

#sidebar button img.icon {
  font-size: 2em;
  transition: filter 0.3s ease;
}

#sidebar button:not(.active):not(:hover) img.icon {
  filter: brightness(0.5);
}

/* explorer-toggle */
#explorer-toggle {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  appearance: none;
  aspect-ratio: 1/1;
}

#explorer-toggle::before {
  content: "";
  width: 2px;
  height: 100%;
  background-color: var(--text-color);
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

#explorer-toggle::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(./../content/icons/files.svg);
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center center;
  transition: filter 0.3s ease;
}

#explorer-toggle:checked::before {
  opacity: 0;
}

#explorer-toggle:checked::after {
  filter: brightness(0.5);
}

#sidebar-content {
  width: 200px;
  flex-shrink: 0;
  background-color: var(--sidebar-content-bg);
  overflow: hidden auto;
  transition: width 0.3s ease;
  min-height: 0;
}

#sidebar:has(#explorer-toggle:checked) ~ #sidebar-content {
  width: 0px;
}

/* content container */
#content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#tabs-container {
  display: flex;
  width: 100%;
  height: 33.5px;
  gap: 1px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  background-color: var(--tabs-container-bg);
  min-width: 0;
}

#tabs-container::-webkit-scrollbar {
  height: 6px;
}
#tabs-container::-webkit-scrollbar-track {
  background: transparent;
}
#tabs-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
#tabs-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

#tabs-container button:not(.tab) {
  border-radius: var(--border-radius);
}

#tabs-container button:not(.tab):hover {
  background-color: var(--tabs-container-hover-color);
}

.tab {
  background-color: var(--tab-bg);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  transform-origin: center left;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

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

.tab.active {
  background-color: var(--tab-active-bg);
}

.tab::after {
  content: "";
  width: 0%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: var(--tab-select-border-color);
  transition: width 0.3s ease, left 0.3s ease;
}

.tab.active::after {
  width: 100%;
  left: 0%;
}

.tab.hidden {
  transform: scaleX(0);
  pointer-events: none;
}

/* tab content */
#tab-content-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  min-height: 0;
}

#tab-content-container::-webkit-scrollbar {
  width: 6px;
}
#tab-content-container::-webkit-scrollbar-track {
  background: transparent;
}
#tab-content-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
#tab-content-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

#tab-content-container::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
  background-color: var(--main-bg);
  backdrop-filter: blur(10px);
  opacity: 0;
  z-index: 10;
  transition: opacity 150ms ease, backdrop-filter 150ms ease;
}

#tab-content-container.switching::after {
  opacity: 1;
}

#tab-content-container:has(:not(iframe.content-viewer)) {
  padding: var(--padding-big);
}

#tab-content-container:empty {
  background-color: var(--title-bar-bg);
  -webkit-mask: url(./../content/icons/vscode.svg) center/25% no-repeat;
}

/* files & folders */
.file,
.folder-header {
  display: flex;
  align-items: center;
  padding: var(--padding);
  padding-left: calc(2 * var(--padding));
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.file.active,
.folder-header.active {
  background-color: var(--sidebar-active-color);
}

.folder {
  position: relative;
}

.folder-header {
  position: relative;
}

.folder-header::before {
  content: url(./../content/icons/arrow.svg);
  height: 50%;
  width: auto;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.folder-header[data-open="true"]::before {
  transform: translateY(-50%) rotate(90deg);
}

.file:hover:not(.active),
.folder-header:hover:not(.active) {
  background-color: var(--sidebar-hover-color);
}

.folder-children-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding-left: 1em;
  position: relative;
}

.folder-children-container.open {
  max-height: 1000px;
}

.folder-children-container::before {
  content: "";
  width: 1px;
  height: 0%;
  position: absolute;
  top: 0;
  left: var(--padding);
  background-color: var(--text-color);
  border-radius: 1px;
  filter: brightness(0.5);
  transition: height 0.3s ease, filter 0.3s ease;
}

/* 1. Direct hover: only this folder's line */
.folder:hover > .folder-children-container::before {
  filter: brightness(0.75);
}

/* 2. Any ancestor folder whose subtree is hovered */
.folder:has(:hover) > .folder-children-container::before {
  filter: brightness(0.75);
}

/* 3. Active file OR active folder highlights the whole path */
.folder:has(.active) > .folder-children-container::before {
  filter: brightness(0.75);
}

.folder-children-container.open::before {
  height: 100%;
}

/* footer */
footer {
  background-color: var(--footer-bg);
  width: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 23.3px;
  justify-content: space-between;
  /* z-index: 50; */
}

footer button:hover {
  background-color: var(--footer-hover-color);
}

/* buttons & icons */
button,
.button {
  padding: 0.25em 0.5em;
  cursor: pointer;
  border: none;
  color: var(--text-color);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  transition: background-color 0.3s ease;
}

button.close:hover,
.button.close:hover {
  background-color: #E81023;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
  margin-right: 1em;
  user-select: none;
}

button .icon {
  margin: 0;
}

/* wrappers */
.wrapper {
  display: flex;
  align-items: center;
}

@media  (min-width: 960px) { /* disable half width on mobile */
  .wrapper.half-width {
    width: 50%;
  }
}

.wrapper.column {
  flex-direction: column;
  align-items: start;
}

.wrapper.padding {
  padding: var(--padding);
}

.wrapper.gap {
  gap: var(--padding);
}

.wrapper.gap.big {
  gap: var(--padding-big);
}

iframe.content-viewer {
  width: 100%;
  height: 100%;
}

/* typography */
h1 {
  font-weight: 400;
}

h2 {
  font-weight: 200;
}

h3 {
  font-weight: 400;
}

a {
  color: #74A9F5;
}

a:not(:hover) {
  text-decoration: none;
}

a[href^="http"],
a[data-file-link] {
  position: relative;
  margin-right: 1.25em;
}

a[href^="http"]::after,
a[data-file-link]::after {
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 0%;
  right: -1.25em;
  transition: transform 0.3s ease;
}

a[href^="http"]::after {
  content: url(./../content/icons/external-link.svg);
}

a[data-file-link]::after {
  content: url(./../content/icons/file-link.svg);
}

a[href^="http"]:hover::after {
  text-decoration: underline;
}

a[href^="http"]:hover::after {
  transform: translate(5%, -5%) scale(1.1);
}

a[data-file-link]:hover::after {
  transform: rotate(10deg) scale(1.1);
}