.axisSystem {
  position: absolute;
  pointer-events: none;
  display: grid;
  grid-template-areas:
    '. top-axis .'
    'left-axis grid right-axis'
    '. bottom-axis .';
}

.axisSystem > svg {
  display: block;
  overflow: visible;
}

.axis[data-type='abscissa'] {
  grid-area: bottom-axis;
}

.axis[data-type='ordinate'] {
  grid-area: left-axis;
  transform: translateX(100%);
}

.axis > g > line {
  stroke: var(--h5w-grid--color, gray);
  stroke-opacity: var(--h5w-grid--opacity, 0.33);
}

.tick > line {
  stroke: var(--h5w-ticks--color, gray);
}

.tick > text {
  fill: currentColor;
  color: var(--h5w-tickLabels--color, #333);
  font-family: var(--h5w-tickLabels--fontFamily, inherit);
  font-size: var(--h5w-tickLabels--fontSize, inherit);
}

.label {
  fill: currentColor;
  color: var(--h5w-axisLabels--color, #333);
  font-family: var(--h5w-axisLabels--fontFamily, inherit);
  font-size: var(--h5w-axisLabels--fontSize, inherit);
  font-weight: var(--h5w-axisLabels--fontWeight, 600);
  text-anchor: middle;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: top-axis;
  margin: 0;
  color: var(--h5w-plotTitle--color, inherit);
  font-family: var(--h5w-plotTitle--fontFamily, inherit);
  font-size: var(--h5w-plotTitle--fontSize, 1.125em);
  font-weight: var(--h5w-plotTitle--fontWeight, inherit);
}

.grid {
  grid-area: grid;
}

.grid line {
  stroke: var(--h5w-grid--color, gray);
  stroke-opacity: var(--h5w-grid--opacity, 0.33);
}