/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  line-height: 1.2;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: currentColor;
  text-decoration: none;
  text-decoration-skip-ink: auto;
  cursor: pointer;
}

a:hover,
a:active {
  text-decoration: underline;
}

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* General */
:root {
  --color-white: #fff;

  --color-gray-0: #f8f9fa;
  --color-gray-1: #f1f3f5;
  --color-gray-2: #e9ecef;
  --color-gray-3: #dee2e6;
  --color-gray-4: #ced4da;
  --color-gray-5: #adb5bd;
  --color-gray-6: #868e96;
  --color-gray-7: #495057;
  --color-gray-8: #343a40;
  --color-gray-9: #212529;

  --color-background: var(--color-white);
  --color-text: var(--color-gray-8);
  --color-text-muted: var(--color-gray-6);
  --color-border: var(--color-gray-4);
  --color-error: #e41a1c;
  --color-success: #4daf4a;

  --size-000: -0.5rem;
  --size-00: -0.25rem;
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;

  --font-size-00: 0.75rem;
  --font-size-0: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;

  --font-sans: "Roboto Condensed", sans-serif;

  --side-width: 176px;

  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-1);
  color: var(--color-text);
}

.container {
  width: 1200px;
  margin: var(--size-8) auto;
  padding: 0 var(--size-5);
}

.pages > .page {
  display: none;
  opacity: 0;
  transition: opacity 0.15s linear;
}

.pages > .page.active {
  display: block;
  opacity: 1;
}

.page-nav {
  display: flex;
  align-items: center;
  gap: var(--size-5);
  margin-bottom: var(--size-3);
}

.page-nav > * {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

/* Swatches */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2) var(--size-5);
}

.swatches .swatch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  align-items: center;
}

.swatches .swatch__swatch {
  width: var(--font-size-1);
  height: var(--font-size-1);
  aspect-ratio: 1;
  background-color: currentColor;
}

.swatches .swatch__swatch--line {
  height: 2px;
}

/* Ideogram Overwrite */
svg#_ideogram.labeledLeft {
  /* Avoid chromosome labels getting cut off */
  padding-left: 8px;
  padding-top: 0;
  overflow: visible;
}

#_ideogram .brush rect.selection {
  fill: var(--color-gray-7);
  stroke: var(--color-gray-7);
  fill-opacity: 0.2;
}

/* noUISlider */
.noUi-tooltip {
  font-size: var(--font-size-00);
}

.noUi-connect {
  background: var(--color-gray-3);
}

/* Virtual select */
.vscomp-wrapper {
  font-family: var(--font-sans);
  color: currentColor;
}

.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus .vscomp-toggle-button {
  box-shadow: none;
  border-color: currentColor;
}

.vscomp-toggle-button {
  border-color: var(--color-gray-3);
}

/* Fix select dropdown stacking issue */
.lollipop-container > :first-child:has(.pop-comp-active),
.heatmap-container > :first-child:has(.pop-comp-active) {
  z-index: 1;
}

/* Input */
input[type="search"] {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-3);
  color: currentColor;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 7px 10px 7px 10px;
}

input[type="search"]:focus {
  outline: none;
  border-color: currentColor;
}

/* Buttons */
.btn-group {
  display: flex;
  gap: var(--size-3);
}

.btn,
::file-selector-button {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-3);
  color: currentColor;
  padding: 7px 10px 7px 10px;
  text-align: center;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  height: 36px;
  transition:
    transform 0.15s,
    background-color 0.15s;
}

.btn:hover:not(:disabled),
.btn:active:not(:disabled),
.btn:focus-visible,
::file-selector-button:hover,
::file-selector-button:active,
::file-selector-button:focus-visible {
  outline: none;
  border-color: currentColor;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.btn[aria-pressed="true"] {
  background-color: var(--color-gray-2);
}

/* Tooltip */
.tip {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--size-1) var(--size-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-3);
  border-radius: var(--size-1);
  box-shadow:
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility linear 0.15s,
    opacity linear 0.15s;
  z-index: 1;
}

.tip.active {
  visibility: visible;
  opacity: 0.9;
}

.tip td {
  padding: 0 var(--size-1);
}

.tip td:first-child {
  text-align: right;
}

.tip td:last-child {
  text-align: left;
}

.tip i {
  font-size: var(--font-size-00);
}

/* Chromosome Axis */
.chromosome-axis > svg {
  overflow: visible;
}

.chromosome-axis text {
  fill: var(--color-text);
  font-size: var(--font-size-00);
  font-family: var(--font-sans);
}

.chromosome-axis .axis line,
.chromosome-axis .axis path {
  color: var(--color-gray-5);
}

/* Scatter Plot */
.chart-container {
  display: flex;
  align-items: center;
}

.chart-container > :nth-child(2) {
  flex: 1;
}

.scatter-plot {
  position: relative;
}

.scatter-plot text {
  fill: var(--color-text);
  font-size: var(--font-size-00);
  font-family: var(--font-sans);
}

.scatter-plot .background-rect {
  fill: var(--color-gray-1);
}

.scatter-plot .axis .domain {
  display: none;
}

.scatter-plot .axis line {
  stroke: var(--color-white);
}

.scatter-plot .focus {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.scatter-plot .focus.active {
  opacity: 1;
}

.scatter-plot .focus__line {
  stroke: var(--color-gray-7);
  stroke-dasharray: 4;
}

.scatter-plot .focus > circle {
  stroke: var(--color-white);
}

/* Lollipop Chart + Heatmap */
.lollipop-container,
.heatmap-container {
  margin-top: var(--size-7);
  display: flex;
  align-items: flex-start;
  gap: var(--size-7);
  position: relative;
}

.lollipop-container > :first-child,
.heatmap-container > :first-child {
  position: sticky;
  top: 0;
  display: grid;
  gap: var(--size-5);
  width: var(--side-width);
  padding-block: var(--size-3);
}

.lollipop-container > :last-child,
.heatmap-container > :last-child {
  flex: 1;
}

.lollipop-container label,
.lollipop-container .label {
  display: block;
  margin-bottom: var(--size-2);
}

.lollipop-chart,
.heatmap {
  position: relative;
}

.lollipop-chart text,
.heatmap text {
  fill: var(--color-text);
  font-size: var(--font-size-00);
  font-family: var(--font-sans);
}

.lollipop-chart .body-row > text,
.heatmap .body-row > text {
  font-size: var(--font-size-0);
}

.lollipop-chart .header,
.heatmap .header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-white);
}

.lollipop-chart .header-column,
.heatmap .header-column {
  position: absolute;
  top: 0;
}

.lollipop-chart .header-column__title,
.heatmap .header-column__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
}

.lollipop-chart .header-column__title__sort,
.heatmap .header-column__title__sort {
  background-color: var(--color-gray-0);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  padding: 0.25em;
  transition: background-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23adb5bd' d='M17.45 17.55L12 23l-5.45-5.45l1.41-1.41L11 19.17V4.83L7.96 7.86L6.55 6.45L12 1l5.45 5.45l-1.41 1.41L13 4.83v14.34l3.04-3.03l1.41 1.41Z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.lollipop-chart .header-column__title__sort.ascending,
.heatmap .header-column__title__sort.ascending {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23343a40' d='M13 20h-2V8l-5.5 5.5l-1.42-1.42L12 4.16l7.92 7.92l-1.42 1.42L13 8v12Z'/%3E%3C/svg%3E");
}

.lollipop-chart .header-column__title__sort.descending,
.heatmap .header-column__title__sort.descending {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23343a40' d='M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16V4Z'/%3E%3C/svg%3E");
}

.lollipop-chart .header-column__title__sort:hover,
.lollipop-chart .header-column__title__sort:active,
.heatmap .header-column__title__sort:hover,
.heatmap .header-column__title__sort:active {
  background-color: var(--color-gray-1);
}

.lollipop-chart .background-rect {
  fill: var(--color-gray-1);
}

.lollipop-chart .action-g {
  cursor: pointer;
  color: var(--color-gray-5);
}

.lollipop-chart .action-g:hover {
  color: var(--color-gray-7);
}

.lollipop-chart .axis .domain {
  display: none;
}

.lollipop-chart .axis line {
  stroke: var(--color-white);
}

.lollipop-chart .lollipop-line {
  stroke: var(--color-gray-5);
  stroke-width: 2px;
}

.lollipop-chart .focus,
.heatmap .focus {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.lollipop-chart .focus.active,
.heatmap .focus.active {
  opacity: 1;
}

.lollipop-chart .focus__line,
.heatmap .focus__line {
  stroke: var(--color-gray-7);
  stroke-dasharray: 4;
}

.heatmap-legend .axis line,
.heatmap-legend .axis path {
  color: var(--color-gray-5);
}

.heatmap .focus__value {
  stroke: var(--color-white);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke;
}

.heatmap-meta {
  border: 1px solid currentColor;
  padding: var(--size-1) var(--size-2);
}

.heatmap-meta > * + * {
  margin-block-start: var(--size-2);
}

/* File uploader */
.cta {
  position: fixed;
  top: var(--size-4);
  right: var(--size-4);
}

.file-uploader[data-welcome] ~ .cta {
  display: none;
}

html:has(.file-uploader[open]) {
  overflow-y: hidden;
}

.file-uploader {
  position: fixed;
  inset: 0;
  padding: 32px var(--size-5) var(--size-5);
}

.file-uploader .file-uploader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-5);
}

.file-uploader .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  font-size: 32px;
  padding: 0;
  line-height: 0;
  color: var(--color-text-muted);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.file-uploader .close-btn:hover,
.file-uploader .close-btn:focus {
  color: var(--color-text);
}

.file-uploader[data-welcome] .close-btn {
  display: none;
}

.file-uploader .file-uploader__title {
  font-size: var(--font-size-4);
  font-weight: 700;
}

.file-uploader .file-uploader__uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
}

.file-uploader .file-uploader__uploader__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
  padding: var(--size-4);
  border: 1px dashed var(--color-border);
}

.file-uploader .file-uploader__uploader__dropzone.dragover {
  border: 1px solid currentColor;
}

.file-uploader .file-uploader__uploader__requirements {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.file-uploader .file-uploader__uploader__files {
  list-style-type: none;
  margin: 0;
  padding-inline-start: 0;
}

.file-uploader .file-uploader__uploader__files > li + li {
  margin-block-start: var(--size-1);
}

.file-uploader .file-uploader__uploader__files > li {
  color: var(--color-text-muted);
}

.file-uploader .file-uploader__uploader__files > li::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-inline-end: 0.5em;
  vertical-align: middle;
}

.file-uploader .file-uploader__uploader__files > li[data-status="success"] {
  color: var(--color-text);
}

.file-uploader
  .file-uploader__uploader__files
  > li[data-status="success"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%234daf4a' d='m10.6 16.6l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22'/%3E%3C/svg%3E");
}

.file-uploader .file-uploader__divider {
  width: 100%;
  display: flex;
}

.file-uploader .file-uploader__divider::before,
.file-uploader .file-uploader__divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--color-text-muted);
  margin: auto;
}

/* Error Toast */
.error-toast {
  position: fixed;
  inset: 0;
  margin: var(--size-7) auto auto;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 1em;
  outline-color: currentColor;
}

.error-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-error);
  opacity: 0.05;
  z-index: -1;
}

.error-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-error);
  animation: toastCountDown 5s linear forwards;
  transform-origin: right;
}
@keyframes toastCountDown {
  100% {
    transform: scaleX(0%);
  }
}

/* Loader */
html:has(.loader[open]) {
  overflow-y: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--color-background);
}

.loader__content {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 100%;
  height: 100%;
}

.loader__spinner {
  width: 100px;
  aspect-ratio: 1;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  background: #fff;
  filter: blur(5px) contrast(10) hue-rotate(180deg);
  mix-blend-mode: darken;
}
.loader__spinner:before,
.loader__spinner:after {
  content: "";
  grid-area: 1/1;
  margin: 30px 0;
  border-radius: 100px;
  background: #000;
  animation: l4 2s infinite linear;
}
.loader__spinner:after {
  --s: -1;
}
@keyframes l4 {
  100% {
    transform: rotate(calc(var(--s, 1) * 1turn));
  }
}