@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

:root {
  --button-width: 30px;

  --cell-lightness: 50%;
  --cell-saturation: 100%;
  --web-mode-cell-lightness: 70%;
  --web-mode-cell-saturation: 40%;
  --minimap-cell-lightness: 85%;
  --minimap-cell-saturation: 65%;
  --window-titlebar-saturation: 50%;
  --window-titlebar-lightness: 70%;

  --window-titlebar-gradient-multiplier: 1.5;
  --grid-cell-background-opacity: 0.1;

  --viewport-selector-disabled-brightness: 50;
  --minimap-borders-color: hsl(0, 0%, 0%);

  --url-bar-max-width: 180px;

  color: hsl(0, 0%, 0%);
  /* background-color: hsl(250 100% 50% / 0.5); */

  @media (prefers-color-scheme: dark) {
    color: hsl(0, 0%, 90%);

    --cell-lightness: 30%;
    --cell-saturation: 200%;
    --web-mode-cell-lightness: 20%;
    --web-mode-cell-saturation: 20%;
    --minimap-cell-lightness: 30%;
    --minimap-cell-saturation: 45%;
    --viewport-selector-disabled-brightness: 20;
    --minimap-borders-color: hsl(0, 0%, 5%);
    --window-titlebar-saturation: 45%;
    --window-titlebar-lightness: 40%;

    --window-titlebar-gradient-multiplier: 0.7;
  }
}

html,
body,
main {
  margin: 0;
  height: 100vh;
  width: 100vw;

  font-family: "Inter", sans-serif;
  overflow-anchor: none; /* NOTE: adding this to test if it fixes jumpy scroll behavior */
  overflow: clip; /* prevents any absolutely-positioned child (like the tooltip) from causing scrollbars or expanding the document */
}

.webview-wrapper--interacting {
  box-shadow: hsl(0 0 0 / 60%) 0px 0px 10px 1px;
  border: 2px solid hsl(0, 0%, 0%);
}

.webview-wrapper--not-interacting {
  box-shadow: hsl(0 0 0 / 60%) 0px 0px 10px 1px;
  border: 2px solid hsl(0, 0%, 0%);
}

input {
  background-color: hsla(0, 0%, 70%, 0.5);
  border: none;
  color: hsl(0, 0%, 0%);

  @media (prefers-color-scheme: dark) {
    color: hsl(0, 0%, 100%);
    background-color: hsla(0, 0%, 0%, 0); /* transparent? */
  }
}

button {
  background-color: transparent;
  border: none;
  font-size: 1em;
  height: 100%;
  width: var(--button-width);
  background-repeat: no-repeat;
  background-position: center;

  @media (prefers-color-scheme: dark) {
    color: hsl(0, 0%, 95%);
  }
}

.button--enabled {
  color: hsl(0, 0%, 5%);
  cursor: pointer;

  @media (prefers-color-scheme: dark) {
    color: hsl(0, 0%, 95%);
  }
}

.button--enabled:hover {
  background-color: hsl(0, 0%, 40%, 0.5);

  @media (prefers-color-scheme: dark) {
    background-color: hsla(0, 0%, 40%, 0.5);
  }
}

.button--disabled {
  color: hsl(0, 0%, 40%);

  @media (prefers-color-scheme: dark) {
    color: hsl(0, 0%, 50%);
  }
}

.button--active {
  background-color: hsl(0, 0%, 40%, 0.5);

  @media (prefers-color-scheme: dark) {
    background-color: hsla(0, 0%, 40%, 0.5);
  }
}

/* body, */
/* #pannable-area { */
/*   background: url("lightBackground.svg"); */
/* } */

#sidebar {
  box-shadow: hsl(0 0 0 / 80%) 0px 0px 10px 3px;
}
#grid::-webkit-scrollbar,
#minimap-grid::-webkit-scrollbar,
#closed-tabs::-webkit-scrollbar {
  display: none;
}

webview {
  background-color: white; /* if a website is laggy and doesn't render, we want it to show a white background before rendering on light mode*/
}

.cell-background-active:hover {
  background-color: hsla(238, 50%, 50%, 0.1);
}

.empty-cell-input:focus {
  outline: none;
}

#sidebar-resize-handle {
  background: hsla(0, 0%, 100%, 0.3);

  @media (prefers-color-scheme: dark) {
    background: hsla(0, 0%, 5%, 0.3);
  }
}

#sidebar-resize-handle:hover {
  background: hsla(0, 0%, 100%, 0.45);

  @media (prefers-color-scheme: dark) {
    background: hsla(0, 0%, 0%, 0.45);
  }
}

#minimap-grid {
  border-top: 1px solid var(--minimap-borders-color);
}

.minimap-cell--empty {
  border: 2px solid transparent;
}

.minimap-cell--full {
  border: 2px solid black;
}

.minimap-cell--no-dragover:hover {
  border: 2px dashed hsl(0 0 80%);
}

.minimap-cell--dragover {
  border: 2px solid blue;

  @media (prefers-color-scheme: dark) {
    border: 2px solid lightblue;
  }
}

@keyframes glow-shimmer {
  0%,
  100% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(120%) drop-shadow(0 0 5px hsl(238, 80%, 40%, 0.3));
  }
}

@media (prefers-color-scheme: dark) {
  @keyframes glow-shimmer {
    0%,
    100% {
      filter: brightness(100%);
    }
    50% {
      filter: brightness(120%) drop-shadow(0 0 5px rgba(100, 59, 189, 0.9));
    }
  }
}

.empty-cell-input {
  animation: glow-shimmer 8s ease-in-out infinite;
  box-shadow: hsl(0 0 80 / 20%) 0px 0px 12px 6px;
  background-color: hsla(0, 0%, 90%, 0.8);

  @media (prefers-color-scheme: dark) {
    box-shadow: hsl(0 0 80 / 20%) 0px 0px 12px 6px;
    background-color: hsla(0, 0%, 10%, 0.8);
  }
}

.urlbar {
  border: 1px solid hsl(0 0 20);
  background-color: hsl(0 0 100% / 0.7);
  @media (prefers-color-scheme: dark) {
    border: 1px solid hsl(0 0 0);
    background-color: hsl(0 0 0 / 0.5);
  }
}

.urlbar--minimized {
  max-width: var(--url-bar-max-width);
}

.urlbar--minimized:hover,
.urlbar--minimized:focus,
.urlbar--expanded {
  border: 1px solid hsl(0 0 30);

  @media (prefers-color-scheme: dark) {
    border: 1px solid hsl(0 0 50);
  }
}

.urlbar--expanded {
  max-width: max(90%, var(--url-bar-max-width));
  transition: width 0.05s ease-in;
}

.minimap-header-cell {
  color: hsl(0 0 90%);
}

.loader {
  width: 24px;
  height: 24px;
  border: 5px solid #fff;
  border-bottom-color: #000;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#minimized-toggle-sidebar-button {
  transition:
    background 0.3s,
    width 0.3s;
}

#minimized-toggle-sidebar-button:hover {
  background: hsl(0 0 100% / 0.5);
  width: 60px !important; /* rouglhy quarter of sidebar width*/

  @media (prefers-color-scheme: dark) {
    background: hsl(0 0 100% / 0.3);
  }
}

#context-menu {
  .context-menu-button:hover {
    background: hsl(0 0 50% / 0.5);
  }
}

/*
Source - https://stackoverflow.com/a/6382492
Posted by Blowsie, modified by community. See post 'Timeline' for change history
Retrieved 2026-02-22, License - CC BY-SA 4.0
*/
.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.preview {
  padding: 0 3px;
}

.preview:hover {
  background: hsl(150 30 50%);
}

.divider {
  background: hsl(130 30 40%);

  @media (prefers-color-scheme: dark) {
    background: hsl(130 30 40%);
  }
}

#grid-background-image {
  filter: blur(1em) brightness(0.8);

  @media (prefers-color-scheme: dark) {
    filter: blur(1em) brightness(0.5);
  }
}

#minimap-background-image {
  filter: brightness(0.8);
  @media (prefers-color-scheme: dark) {
    filter: brightness(0.7);
  }
}

.navigation-history-entry {
  background: hsl(0, 0%, 90%, 0.8);
  overflow: clip;
  cursor: pointer;

  @media (prefers-color-scheme: dark) {
    background: hsl(0, 0%, 20%, 0.8);
  }
}

.navigation-history-entry:hover {
  outline: 2px solid blue;
}