.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: 0.3s ease-in-out;  /* Smooth transitions */
}

/* 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%);
}
