/*
 * The candles `ChartsHelper#candlestick_tag` draws (CandlestickPaths): a
 * screener snapshot's year of days, the shares traded under them. The caller
 * sizes the box.
 *
 * The paths are drawn in a fixed box and stretched to fit; a wick keeps its
 * width however far it is stretched. A day that closed at or above its open
 * is green, one below it red, and its volume is the same colour, paler, so
 * the price reads first.
 */
@layer components {
  .candlestick {
    display: block;
    overflow: visible;
  }

  .candlestick--rise {
    color: var(--color-gain);
  }

  .candlestick--fall {
    color: var(--color-loss);
  }

  .candlestick__wick {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .candlestick__body {
    fill: currentcolor;
  }

  .candlestick__volume {
    fill: currentcolor;
    opacity: 0.35;
  }
}