/* purgecss start ignore */

/* root div for graph */
#graph {
  justify-content: left;
}

/* svg and html styling! */
.pie-seg-up {
  fill: $up-color;
  color: $up-color;
}

/* svg and html styling! */
.pie-seg-down {
  fill: $down-color;
  color: $down-color;
}

/* svg and html styling! */
.pie-seg-muted {
  fill: $muted-color;
  color: $muted-color;
}

/* svg and html styling! */
.pie-seg-unknown {
  fill: $unknown-color;
  color: $unknown-color;
}

/* svg and html styling! */
.pie-seg-nodata {
  fill: $nodata-color;
  color: $nodata-color;
  /* stroke only, unfilled
   fill: #ffffff00;
   stroke-width: 1px;
  stroke: #8c8c8c; */
}

/* svg styling! */
/* purgecss ignore */
.pie-text-group {
  fill: #fff;
  font-size: 11px;
  text-anchor: middle;
  alignment-baseline: central;
}

/* svg styling! */
/* purgecss ignore */
.pie-text-probe {
  fill: #fff;
  font-size: 10px;
  text-anchor: middle;
  alignment-baseline: central;
}

.group-label {
  font-size: 12px;
  color: #0062cc;
  cursor: pointer;
  border-bottom: 1px dotted;
  /*text-anchor: middle;*/
  /*alignment-baseline: central;*/
}

.group-icon {
  color: #0062cc;
  cursor: pointer;
}

.probe-label {
  font-size: 12px;
  color: #007bff;
  cursor: default;
  padding-left: 20px; /* open/close icon width plus indent */
}

.top-ticks {
  cursor: default;
  min-height: 30px;
  max-height: 30px;
  display: table-row;
  color: black;
  text-shadow: none;
  opacity: 0.3;
}
/* a space to shift ticks to the left so they appears between pies */
.top-tick-left {
  height: 32px;
  display: table-cell;
  width: 13em;
  min-width: 13em;
}
.top-tick-left-spacer {
  display: block;
  width: 180px;
}

.top-tick {
  height: 32px;
  min-height: 32px;
  /*width: 66px; /* cell-data 60 + 3 padding*/
  min-width: 67px; /* pie=60 + pie padding=2*3  + 1 px dotted border */
  padding: 3px;
  font-size: 12px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  /*border: 1px solid red;*/
}
.top-tick span {
  width: 60px;
  display: block;
}

.graph-table {
  display: table;
  table-layout: fixed;
  // for border-radius in cells;
  background-size: calc(100% - 24px);
  background-position-x: 12px;
  // remove rightmost dashed border
  background-clip: content-box;
}

.graph-row-hidden {
  display: none;
}
.graph-row-visible {
  display: table-row;
}
.graph-row {
  /* stripes to emulate dashed border between columns */
  background: repeating-linear-gradient(transparent, transparent 2px, #d5d5d5 2px, #d5d5d5 7px) no-repeat;
}

.graph-cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: white;
}

.graph-cell.graph-labels {
  width: 15em;
  min-width: 15em;
  text-shadow: none;
  overflow: hidden;
  position: relative;
}

/* info icon in a top left corner */
.group-probe-info {
  font-size: 14px;
  display: inline-block;
  margin-left: 3px;
  color: #bbb;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.group-probe-info:hover {
  color: #000;
}

.graph-cell.cell-data {
  padding: 3px;
  overflow: hidden;

  /*border-right: 1px solid transparent;*/
  border-left: 1px solid transparent;

  /*border-left: 1px dotted #d5d5d5;*/
  /*border-right: 1px dotted #d5d5d5;*/
  /*margin-bottom: 1px;*/
}

.cell-data-empty {
  width: 60px;
  height: 60px;
  content: " ";
}

.graph-row .graph-cell.graph-labels {
  padding-left: 10px;
}

div.graph-row > div.graph-cell:last-child {
  padding-right: 10px;
  width: 100%;
}

// .graph-row.row-probe .graph-cell {
//   background: #f5f5f5;
// }

// inset shadow to highlight probe rows
$shadow-color: #c0c0c0;
$shadow-len: 10px;
$shadow-blur: 10px;
$shadow-spread: 10px;

// border-radius ruins dashed lines.
$probe-cell-border-radius: 0;

div.group-container,
div.probes-container {
  margin: 0;
  padding: 0;
}

div.group-container > div.probes-container > div:only-child > div.graph-cell {
  box-shadow: inset 0 ($shadow-len) ($shadow-blur) (-$shadow-spread) $shadow-color,
    inset 0 (-$shadow-len) ($shadow-blur) (-$shadow-spread) $shadow-color;
}

div.group-container > div.probes-container > div:first-child:not(:only-child) > div.graph-cell {
  box-shadow: inset 0 ($shadow-len) ($shadow-blur) (-$shadow-spread) $shadow-color;
}

div.group-container:not(:last-child) > div.probes-container > div:last-child:not(:only-child) > div.graph-cell {
  box-shadow: inset 0 (-$shadow-len) ($shadow-blur) (-$shadow-spread) $shadow-color;
}

// graph-cell under 'Total' labels
.graph-row .graph-cell:last-child {
  // width of top-tick and graph-cell is 67px, so 67 / 2 to align a graph-cell to a 'Total' label
  padding-left: 34px;
}

/* purgecss end ignore */
