//**  The Session Detail styles. **//

@require 'helpers'

.qi-intensity
  // Add margins.
  margin-left 2em

.qi-intensity-chart
  // Allow room for the image selection label below
  // the chart. The time points align with the image
  // select buttons.
  height 22em
  width 100%

// Align with the intensity chart.
.qi-volume-selection
  margin-right: 12px

.qi-vol-selection-title
  // The fixed width is necessary to right-align the text
  // under the intensity chart y axis.
  float left
  width 6.1em
  padding-right .5em
  text-align right
  font-size smaller

qi-vol-btn-group()
  // The right margin compensates for the offset created by
  // nvd3 chart.
  margin-right 1em
  & .tooltip
    // Make the tooltip font slightly smaller than the chart font.
    font-size .6em
  // The tooltip background is a Moab red.
  & .tooltip-inner
    background-color IndianRed
  & .tooltip.top .tooltip-arrow
    border-top-color IndianRed

qi-vol-btn-color(basic, highlight)
  & button
    background-color basic
    &:hover
      background-color highlight

// The scan basic color must match the intensity.coffee SCAN_COLOR value.
.qi-scan-vol-btn-group
  qi-vol-btn-group()
  qi-vol-btn-color(Thistle, Indigo)

// The registration basic color must match the intensity.coffee REG_COLORS
// values.
.qi-reg-vol-btn-group
  qi-vol-btn-group()
  qi-vol-btn-color(PaleGreen, DarkGreen)
  & + .qi-reg-vol-btn-group
    qi-vol-btn-color(LightYellow, SaddleBrown)
    & + .qi-reg-vol-btn-group
      qi-vol-btn-color(LightCyan, SlateBlue)
      & + .qi-reg-vol-btn-group
        qi-vol-btn-color(LemonChiffon, Brown)

.qi-vol-btn
  font-size 9px

.qi-bolus-legend
  text-anchor end

.qi-bolus-flood
  flood-color Gainsboro

.qi-bolus-arrival
  stroke Gainsboro
  stroke-width 1em
  stroke-opacity .8