@use "sass:math";
@import "~@gisatcz/ptr-core/lib/styles/_variables";

/* General */
.ptr-charts-container {
  display: flex;
  flex-direction: column;
  padding: m(1) math.div(2, 3) math.div(4, 3);
  align-items: center;
  background: var(--base15);
  min-height: 100%;
}

.ptr-chart-container {
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.ptr-chart-container.centered {
  align-items: center;
}

.ptr-chart-container > div:not(.ptr-chart-legend) {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  //height: 100%;
  //min-height: 100%;
  align-items: center;
  justify-content: center;
}

.ptr-chart-container.legend-top > div {
  flex-direction: column-reverse;
}

.ptr-chart-container.legend-right > div {
  flex-direction: row;
}

.ptr-chart-container.legend-left {
  flex-direction: row-reverse;
}

.ptr-chart {
  box-sizing: content-box;
  width: 100%;
}

.ptr-cartesian-chart {
  width: 100%;
}

/* Axis */
.ptr-axis-baseline {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-border {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-gridline {
  stroke-width: 1px;
  stroke-linecap: square;
  stroke: var(--base20);
}

.ptr-axis-label {
  fill: var(--base50);
  font-size: $b1;
  font-style: italic;
}

.ptr-tick-caption {
  fill: var(--base50);
  font-size: $b1;
}

.ptr-tick-caption.highlighted {
  font-weight: bold;
}

.ptr-tick-caption.small {
  font-size: $a0;
}

.ptr-axis-highlighted-area-edge {
  stroke-width: 1px;
  stroke: var(--accent30);
}

.ptr-axis-highlighted-area {
  stroke-width: 0;
  fill: var(--accent15);
}

/* Line chart */
.ptr-line-chart {
  //background: red;
}

.ptr-line-chart-line {
  fill: none;
  stroke-width: 2;
  stroke: var(--base50);
  animation: pathDraw 2s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.ptr-chart-point {
  animation: pointDraw 0.3s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1px;
  stroke: var(--base10);
}

.ptr-chart-point.standalone {
  animation: none;
  fill: var(--accent50);
  fill-opacity: 1;
  stroke: var(--base0);
  stroke-width: 1px;
  stroke-opacity: 1;
}

.ptr-chart-point.standalone.path {
  stroke: var(--accent50);
}

.ptr-line-chart-area {
  fill: rgba(var(--base50rgb), 0.2);
  fill-opacity: 0;
  animation: pathFill 0.3s ease-in-out 1;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.ptr-chart-no-animation .ptr-line-chart-area,
.ptr-chart-no-animation .ptr-column-chart-bar {
  animation: none;
  transition: none;
}

.ptr-line-chart-line-wrapper:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.gray:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted.gray .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted .ptr-line-chart-line {
  stroke-width: 3;
}

.ptr-line-chart-line-wrapper.gray .ptr-line-chart-line {
  stroke-width: 1;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point {
  opacity: 0;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point.no-opacity,
.ptr-line-chart-line-wrapper.gray:hover .ptr-chart-point {
  opacity: 1;
}

@media screen and (max-width: 70rem) {
  .ptr-charts-container {
    padding: math.div(1, 3) math.div(1, 3) m(1);
  }
}

@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pathFill {
  to {
    fill-opacity: 1;
  }
}

@keyframes pointDraw {
  to {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
}