// stylelint-disable selector-no-qualifying-type
.ml-time-series-explorer {
  color: $euiColorDarkShade;

  .forecast-controls {
    float: right;
  }

  .ml-timeseries-chart {
    svg {
      font-size: $euiFontSizeXS;
      font-family: $euiFontFamily;
    }

    .axis path,
    .axis line {
      fill: none;
      stroke: $euiBorderColor;
      shape-rendering: crispEdges;
      pointer-events: none;
    }

    .axis text {
      fill: $euiTextColor;
    }

    .axis .tick line {
      stroke: $euiColorLightShade;
    }

    .chart-border {
      stroke: $euiBorderColor;
      fill: none;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }

    .chart-border-highlight {
      stroke: $euiColorDarkShade;
      stroke-width: 2;
    }

    .chart-border-highlight:hover {
      opacity: 1;
    }

    .area {
      stroke-width: 1;
    }

    .area.bounds {
      fill: transparentize($euiColorPrimary, .8);
      pointer-events: none;
    }

    .values-line {
      fill: none;
      stroke: $euiColorPrimary;
      stroke-width: 2;
      pointer-events: none;
    }

    .values-line.forecast {
      stroke: $euiColorVis5;
      pointer-events: none;
    }

    .hidden {
      visibility: hidden;
    }

    .area.forecast {
      fill: transparentize($euiColorVis5, .7);
      pointer-events: none;
    }

    .metric-value {
      opacity: 1;
      fill: transparent;
      stroke: $euiColorPrimary;
      stroke-width: 0;
    }

    .anomaly-marker {
      stroke-width: 1px;
      stroke: $euiColorMediumShade;
    }

    .anomaly-marker.critical {
      fill: $mlColorCritical;
    }

    .anomaly-marker.major {
      fill: $mlColorMajor;
    }

    .anomaly-marker.minor {
      fill: $mlColorMinor;
    }

    .anomaly-marker.warning {
      fill: $mlColorWarning;
    }

    .anomaly-marker.low {
      fill: $mlColorLowWarning;
    }

    .metric-value:hover,
    .anomaly-marker:hover,
    .anomaly-marker.highlighted {
      stroke-width: 6px;
      stroke-opacity: .65;
      stroke: $euiColorPrimary;
    }

    rect.scheduled-event-marker {
      stroke-width: 1px;
      stroke: $euiColorDarkShade;
      fill: $euiColorLightShade;
    }

    .forecast {
      .metric-value,
      .metric-value:hover {
        stroke: $euiColorVis5;
      }
    }

    .focus-chart {
      .x-axis-background {
        line {
          fill: none;
          shape-rendering: crispEdges;
          stroke: $euiColorLightestShade;
        }

        rect {
          fill: $euiColorLightestShade;
        }
      }

      .focus-zoom {
        fill: $euiColorDarkShade;

        a {
          text {
            fill: $euiColorPrimary;
            cursor: pointer;
          }
        }

        a:hover,
        a:active,
        a:focus {
          text-decoration: underline;
        }
      }
    }

    .context-chart {
      .x.axis path {
        display: none;
      }

      .axis text {
        font-size: 10px;
        fill: $euiTextColor;
      }

      .values-line {
        stroke-width: 1;
      }

      .mask {
        polygon {
          fill-opacity: .1;
        }

        .area.bounds {
          fill: $euiColorLightShade;
        }

        .values-line {
          stroke-width: 1;
          stroke: $euiColorMediumShade;
        }
      }
    }

    .swimlane .axis text {
      display: none;
    }

    .swimlane rect.swimlane-cell-hidden {
      display: none;
    }

    .brush .extent {
      fill-opacity: 0;
      shape-rendering: crispEdges;
      stroke: $euiColorDarkShade;
      stroke-width: 2;
      cursor: move;
    }

    .brush .extent:hover {
      opacity: 1;
    }

    .top-border {
      fill: $euiColorEmptyShade;
    }

    foreignObject.brush-handle {
      pointer-events: none;
      padding-top: 1px;
    }

    div.brush-handle-inner {
      border: 1px solid $euiColorDarkShade;
      background-color: $euiColorLightShade;
      height: 70px;
      width: 10px;
      text-align: center;
      cursor: ew-resize;
      margin-top: 9px;
      font-size: $euiFontSizeS;
      fill: $euiColorDarkShade;
    }

    div.brush-handle-inner-left {
      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
    }

    div.brush-handle-inner-right {
      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
    }

    rect.brush-handle {
      stroke-width: 1;
      stroke: $euiColorDarkShade;
      fill: $euiColorLightShade;
      pointer-events: none;
    }

    rect.brush-handle:hover {
      opacity: 1;
    }
  }
}

/* Hides the progress bar's background so it doesn't look like it increases the thickness
   of the horizontal bar below the tab menu elements in its inactive state. */
.mlTimeSeriesExplorerProgress {
  background-color: $euiColorEmptyShade;

  &::-moz-progress-bar,
  &::-webkit-progress-bar {
    background-color: $euiColorEmptyShade;
  }
}