// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!
// WARNING: do not directly import this file, instead import the
//          version in your theme's directory,
//          for example alta/widgets/_oj.alta.dvt.chart.scss
// !!!

@import "../../utilities/oj.utilities";

@if $includeChartClasses != false {
  @include module-include-once("common.chart") {
    
    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-chart:not(.oj-complete) {
        visibility: hidden;
      }
    }

    oj-chart {
      display: block;
    }

    .oj-chart {


        @include oj-user-select-property(none);

      width:400px;
      height:300px;
    }

    .oj-chart-data-label {

        font-size: $dvtChartDataLabelFontSize;
        color: #333333;

    }

    .oj-chart-data-cursor-line {

        color: $textColor;
        width: 2px;

    }

    .oj-chart-data-cursor-outer-line {

      stroke: transparent;
      stroke-width: 0px;

    }
    
    .oj-chart-stock-falling {

        background-color: $dvtChartStockFallingBgColor;

    }

    .oj-chart-stock-range {

        background-color: $dvtChartStockRangeBgColor;

    }

    .oj-chart-stock-rising {

        background-color: $dvtChartStockRisingBgColor;

    }
    
    .oj-chart-stack-label{

        font-size: $smallFontSize;

      font-weight: bold;
    }

    .oj-chart-pie-center-label,
    .oj-chart-xaxis-title,
    .oj-chart-yaxis-title,
    .oj-chart-y2axis-title {

          font-size: $fontSize;
          color: $dvtAxisTitleTextColor;

    }

    .oj-chart-xaxis-tick-label,
    .oj-chart-yaxis-tick-label,
    .oj-chart-y2axis-tick-label {

          font-size: $smallFontSize;
          color: $textColor;

    }

    .oj-chart-polar-axis-tick-label-outside {
      fill: rgba(255,255,255,1);
    }
    .oj-chart-polar-axis-tick-label-inside {
      fill:  rgba(255, 255, 255, 0.6);
    }

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-spark-chart:not(.oj-complete) {
        visibility: hidden;
      }
    }

    oj-spark-chart {
      display: block;
    }

    .oj-sparkchart {
      width:100px;
      height:18px;
    }

    .oj-sparkchart.oj-focus-highlight {

          @include oj-browser-focus-outline-approximation($primaryTextColor);
        
    }

    .oj-spark-chart-item {
      color: #267db3;
    }

    .oj-chart-animation-down {
      fill: $dvtChartAnimationFallingIconColor;
    }

    .oj-chart-animation-up {
      fill: $dvtChartAnimationRisingIconColor;
    }

    .oj-chart-animation-marker {
      fill: $dvtChartAnimationMarkerColor;
    }

    .oj-chart .oj-active-drop {
      fill: $accentColorHighlight1;
    }

    .oj-chart-reference-object-area {
      color: #333333;
    }

    .oj-chart-reference-object-line {
      width: 1px;
      color: #333333;
    }

    .oj-chart-reference-object-inner-line {

      stroke: transparent;
      stroke-width: 0px;

    }
  }
}