@use "../../../Sass/common/_variables";
@use "../../../Sass/common/mixins";

@include mixins.empty-module("inner");
@include mixins.empty-module("chart-panel");

.holder {
  left: 0;
  right: 0;
  background: variables.$transparent-dark;
  backdrop-filter: variables.$blur;
  padding-bottom: 40px; //hack to allow timeline visible
  margin-bottom: 6px;
  border-radius: 8px 8px 0 0;
}

.header {
  height: 41px;
  box-sizing: border-box;
  position: relative;
  background-color: variables.$chart-panel-header;
  font-size: variables.$font-size-mid-small;
  fill: #fff;
  border-radius: 8px 8px 0 0;
}

.chart {
  color: variables.$text-light;

  :global {
    .base-chart .axis path.domain {
      stroke: variables.$chart-axis-color;
    }

    .base-chart .axis .tick line {
      stroke: variables.$chart-grid-color;
    }

    .base-chart .axis .colors line {
      stroke-width: 2;
    }

    .base-chart .plot-area {
      fill: variables.$chart-area-color;
    }

    .units-label-shadow {
      stroke: variables.$chart-darker;
      stroke-width: 2.5px;
      opacity: 0.9;
    }

    .base-chart text {
      fill: variables.$chart-text-color;
      font-family: monospace;
      font-size: 110%;
    }

    .base-chart .line {
      fill: none;
      stroke: variables.$chart-line-color;
      stroke-width: 1;
    }
  }
}

.chart-panel .axis .colors path {
  stroke-width: 2;
}

.section-label,
.btn {
  color: variables.$text-light;
  display: inline-block;
  vertical-align: top;
}

.section-label {
  composes: label from "../../../Sass/common/_labels.scss";
}

.btn--close-chart-panel {
  composes: btn from "../../../Sass/common/_buttons.scss";
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px;

  svg {
    height: 15px;
    width: 15px;
    fill: #fff;
  }

  &:hover,
  &:focus {
    svg {
      fill: variables.$color-primary;
    }
  }
}