/**
 * This is the default stylesheet for pileup.js.
 * In general, it attempts to look like IGV.
 * You are encouraged to override anything you like.
 */

.pileup-root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pileup-root > .track {
  display: flex;
  flex-direction: row;
}
.pileup-root text, .track-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.track-label {
  flex: 0 0 100px;  /* fixed-width track labels */
  text-align: right;
  font-size: 0.9em;
  position: relative;  /* make this an offset parent for positioning the label. */
}
.track-label > span {
  padding-right: 5px;
}
/* bottom-justify these track labels */
.track.reference .track-label > span,
.track.variants .track-label > span
{
  position: absolute;
  bottom: 0;
  right: 0;
}
.track-content {
  flex: 1;  /* stretch to fill remaining space */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.track-content > div {
  position: absolute; /* Gets the child of the flex-item to fill height 100% */
}
.track-content canvas {
  display: block;
}

/* controls */
.pileup-root > .controls {
  flex: 0 0 30px;  /* fixed height */
}
.pileup-root > .controls > .track-content {
  overflow: visible;
}
.pileup-root > .controls form.controls {
  margin-bottom: 0;  /* overrides browser default */
}
.pileup-root > .controls .zoom-controls {
  display: inline-block;
}
.pileup-root > .controls .btn-zoom-out:before {
  content: '-';
}
.pileup-root > .controls .btn-zoom-in:before {
  content: '+';
}
.pileup-root > .controls input,
.pileup-root > .controls button,
.pileup-root > .controls select,
.pileup-root > .controls option {
  font-size: 0.9em;
}

.gear {
  margin-left: 0.5em;
  font-size: 2em;
  color: #666;
}
.gear:hover {
  color: black;
}
.menu-container {
  z-index: 1;
  width: 250px;  /* not really 250px, but clears parent constraint */
}
.menu {
  border: 1px solid black;
  border-radius: 2px;
  display: table;
  background: white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: left;
}
.menu-header {
  font-weight: bold;
  border-bottom: 1px solid #777;
  padding: 2px 4px;
}
.menu-item {
  padding: 4px;
}
.menu-separator {
  border-top: 1px solid #777;
  height: 0px;
}
.menu-item:hover {
  background: lightblue;
}

.check {
  display: inline-block;
  width: 1em;
}
.check.checked:before {
  content: '✓';
}

/* reference track */
.pileup-root > .reference {
  flex: 0 0 20px;  /* fixed height */
}

.background {
  fill: white;
}
.basepair.A { fill: #188712; }
.basepair.G { fill: #C45C16; }
.basepair.C { fill: #0600F9; }
.basepair.T { fill: #F70016; }
.basepair.U { fill: #F70016; }
.basepair text, text.basepair {
  text-anchor: middle;
}
.loose text {
  font-size: 24;
}
.tight text {
  font-size: 12;
  font-weight: bold;
}

/* gene track */
.pileup-root > .genes {
  flex: 0 0 50px;
}
.gene {
  stroke-width: 1;
  stroke: blue;
}
.gene text {
  font-size: 16px;
  text-anchor: middle;
  stroke: black;
  alignment-baseline: hanging;
}
#sense, #antisense .main {
  stroke: blue;
  fill: none;
  stroke-width: 1;
}
#antisense .offset, #sense .offset {
  stroke: white;
  fill: none;
  stroke-width: 1;
}
.exon {
  fill: blue;
  stroke: none;
}

/* pileup track */
.pileup-root > .pileup {
  flex: 1;  /* stretch to fill remaining space */
}
.pileup .alignment .match {
  fill: #c8c8c8;  /* matches IGV */
}
.pileup text.basepair {
  alignment-baseline: hanging;
  font-size: 12;
  font-weight: bold;
}
.pileup .insert {
  stroke: rgb(97, 0, 216);  /* matches IGV */
  stroke-width: 2;
}
.pileup .delete {
  stroke: black;
  stroke-width: 2;
}
.pileup .network-status {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pileup .network-status-message {
  padding: 4px 8px;
  width: auto;
  background: #eee;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: small;
}

.pileup .mate-connector {
  stroke: #c8c8c8;  /* matches IGV */
}

/* variants */
.pileup-root > .variants {
  flex: 0 0 25px;  /* fixed height */
}
.variants rect {
  fill: #ddd;
  stroke: blue;
}

/* coverage track */
.pileup-root > .coverage {
  flex: 0 0 50px;  /* fixed height */
}
.coverage rect.bin {
  stroke-width: 0.1;
  stroke: white;
  fill: #a0a0a0;
}
.coverage .y-axis {
  stroke: black;
  stroke-width: 1;
}
.coverage .y-axis g.tick text {
  color: black;
  font-size: x-small;
  stroke: whitesmoke;
  stroke-width: 2;
  paint-order: stroke;
}
.coverage .y-axis path {
  stroke-width: 0;
}
.coverage rect.y-axis-background {
  fill: white;
  opacity: 0.5;
}

/* location track */
.pileup-root > .location {
  flex: 0 0 20px;  /* fixed height */
}
.location .location-hline, .location .location-vline-left, .location .location-vline-right {
  stroke: gray;
  stroke-width: 1.5;
}
.location .location-label {
  color: black;
  font-size: smaller;
  text-anchor: start;
  dominant-baseline: central;
}

/* scale track */
.pileup-root > .scale {
  flex: 0 0 20px;  /* fixed height */
}
.scale .scale-lline, .scale .scale-rline {
  stroke: gray;
  stroke-width: 1.5;
}
.scale .scale-label {
  color: black;
  font-weight: bold;
  font-size: smaller;
  dominant-baseline: central;
  text-anchor: middle;
}