.geneviewer-container {
  display: flex;
  flex-direction: column; /* or row, depending on the desired layout */
  align-content: stretch;
}

.geneviewer-svg-content {
  flex: 1 1 auto; /* This makes the SVGs grow and shrink as needed */
  min-height: 0; /* This may be needed for correct sizing in some browsers */
}

.hovered {
  cursor: pointer !important;
}

.geneviewer-svg-content {
  z-index: 2;
}

/* Common styles */
.legend .legend-marker,
.legend .legend-label,
.label {
    transition: opacity 0.3s ease-in-out;  /* Fade on hover; only opacity, so rotated labels are not animated */
}

/* Hover styles: Gives a dim effect to the marker and text when hovered */
.legend.hovered .legend-marker,
.legend.hovered .legend-label,
.label.hovered {
    opacity: 0.7;
}

/* Highlighted/Clicked styles: Gives a more dimmed effect to both marker and text when clicked */
.legend.unselected .legend-marker,
.legend.unselected .legend-label {
    opacity: 0.5;
}

.gene.hovered, .exon.hovered, .utr.hovered, .intron.hovered {
  filter: brightness(80%);
}

/* Tooltip arrow; each tooltip sets --tooltip-bg to its background colour */
.cluster-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--tooltip-bg, white) transparent transparent transparent;
}