:root {
  --dark-background: #000210;
  --dark-background-half: #00021080;
  --light-background: #f8f8f8;
  --light-background-half: #f8f8f880;
}

@media (prefers-color-scheme: dark) {
  background {
    background-color: var(--dark-background);
  }
  html,
  #issues-container > div,
  .preview {
    background-color: var(--dark-background);
    border-color: var(--border-color);
    border-color: #80808020;
  }
  #issues-container > div,
  .preview > .preview-content {
    box-shadow: inset 0 0 24px #0080ff08;
  }

  .toolbar.ready {
    background-color: var(--dark-background-half);
  }
  body.preview-active button#github-login-button.highlight {
    /* background-color: #008080; */
    /* border-width: 0; */
    animation: highlight-dark-mode 1s ease-in-out infinite alternate;
  }
  .grid-loaded #bottom-bar {
    background-color: var(--dark-background-half);
  }
}

@media (prefers-color-scheme: light) {
  #issues-container > div,
  .preview > .preview-content {
    box-shadow: inset 0 0 24px #00000008;
  }
  background {
    /* background-color: var(--light-background); */
  }
  #grid {
    /* opacity: 0.25; */
    filter: invert(1);
  }
  #issues-container > div,
  .preview {
    background-color: var(--light-background);
  }
  .toolbar.ready {
    background-color: var(--light-background-half);
  }
  .grid-loaded #bottom-bar {
    background-color: var(--light-background-half);
  }
  body.preview-active button#github-login-button.highlight {
    animation: highlight-light-mode 1s ease-in-out infinite alternate;
  }
  .grid-loaded background .gradient {
    opacity: 0;
    animation: none;
    background-image: none;
  }
}

@keyframes highlight-dark-mode {
  from {
    background-color: #808080;
    box-shadow: 0 0 24px 0px #808080;
  }
  to {
    background-color: #000;
  }
}
@keyframes highlight-light-mode {
  from {
    background-color: #bfbfbf;
  }
  to {
    background-color: #fff;
    box-shadow: 0 0 24px 12px #fff;
  }
}