:host {
  /**
    * @prop --deckgo-chart-position: The position of the chart host
    * @default relative
    */
  position: var(--deckgo-chart-position, relative);
  /**
    * @prop --deckgo-chart-display: The display property of the chart host
    * @default block
    */
  display: var(--deckgo-chart-display, block);
  /**
    * @prop --deckgo-chart-margin: The margin of the chart host
    * @default 32px
    */
  margin: var(--deckgo-chart-margin, 32px);
}

text {
  /**
    * @prop --deckgo-chart-text-color: The color of the labels
    * @default black
    */
  fill: var(--deckgo-chart-text-color, black);
  /**
    * @prop --deckgo-chart-text-display: The display property of the labels
    */
  display: var(--deckgo-chart-text-display);
  /**
    * @prop --deckgo-chart-text-font-size: The font size of the labels of the chart
    */
  font-size: var(--deckgo-chart-text-font-size);
  /**
    * @prop --deckgo-chart-text-font-family: The font family of the labels of the chart
    * @default inherit
    */
  font-family: var(--deckgo-chart-text-font-family, initial);
}

.axis path,
.axis line {
  fill: none;
  /**
    * @prop --deckgo-chart-axis-color: The color of the axis
    * @default black
    */
  stroke: var(--deckgo-chart-axis-color, black);
  shape-rendering: crispEdges;
}

.axis-grid line {
  /**
    * @prop --deckgo-chart-grid-stroke: The color of the grid
    * @default #989aa2
    */
  stroke: var(--deckgo-chart-grid-stroke, #989aa2);
  /**
    * @prop --deckgo-chart-grid-stroke-opacity: The opacity of the grid
    * @default 0.7
    */
  stroke-opacity: var(--deckgo-chart-grid-stroke-opacity, 0.7);
  shape-rendering: crispEdges;
}

svg {
  /**
    * @prop --deckgo-chart-svg-overflow: The overflow property of the svg generated by the chart
    */
  overflow: var(--deckgo-chart-svg-overflow);

  /**
    * @prop --deckgo-chart-svg-position: The position of the svg generated by the chart
    * @default absolute
    */
  position: var(--deckgo-chart-svg-position, absolute);
  /**
    * @prop --deckgo-chart-svg-top: The top position of the svg generated by the chart
    * @default 50%
    */
  top: var(--deckgo-chart-svg-top, 50%);
  /**
    * @prop --deckgo-chart-svg-left: The left position of the svg generated by the chart
    * @default 50%
    */
  left: var(--deckgo-chart-svg-left, 50%);
  /**
    * @prop --deckgo-chart-svg-translate: The translate property of the svg generated by the chart
    * @default translate(-50%, -50%)
    */
  transform: var(--deckgo-chart-svg-translate, translate(-50%, -50%));
}
