// 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.base.scss
// !!!

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

@if $includeDvtBaseClasses != false {
  @include module-include-once("common.dvtbase") {

    // Common data visualization styles
    .oj-dvtbase {
      display:block;
      position:relative;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);

          animation-duration: $dvtAnimationDuration;

    }

    .oj-dvtbase svg {
      overflow: hidden;
    }

    .oj-dvtbase:focus {
      outline:none;
    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category1 {

          color: $dvtCategory1Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category2 {

          color: $dvtCategory2Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category3 {

          color: $dvtCategory3Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category4 {

          color: $dvtCategory4Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category5 {

          color: $dvtCategory5Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category6 {

          color: $dvtCategory6Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category7 {

          color: $dvtCategory7Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category8 {

          color: $dvtCategory8Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category9 {

          color: $dvtCategory9Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category10 {

          color: $dvtCategory10Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category11 {

          color: $dvtCategory11Color;

    }

    // attribute group color used by oj.ColorAttributeGroupHandler
    .oj-dvt-category12 {

          color: $dvtCategory12Color;

    }

    // tooltip styles shared by data visualizations
    .oj-dvt-tooltip {
      border-style: solid;
      border-width: 1px;
      padding: 2px;

        background-color: $dvtTooltipBgColor;
        color: $textColor;
        border-color: $dvtBorderColor;
        font-size: $fontSize;

    }

    // datatip styles shared by data visualizations
    .oj-dvt-datatip {
      padding: 2px;
      border-style: solid;
      border-width: 2px;

        background-color: $dvtTooltipBgColor;
        color: $textColor;
        @include oj-border-radius($smallBorderRadius);
        @include oj-box-shadow($smallBoxShadow);
        font-size: $smallFontSize;

    }

    .oj-dvt-datatip-table {
      border-collapse: separate;
      border-spacing: 2px;
      overflow: hidden;
      display: block;
    }

    .oj-dvt-datatip-label {
      font-size: $smallFontSize;
      color: $formControlLabelColor;
      padding: 0px 2px;
      white-space: nowrap;

      @include oj-ltr() {
        text-align: right;
      }
      @include oj-rtl() {
        text-align: left;
      }
    }

    .oj-dvt-datatip-value {
      font-size: $smallFontSize;
      color: $neutralColor15;
      padding: 0px 2px;

      @include oj-ltr() {
        text-align: left;
      }
      @include oj-rtl() {
        text-align: right;
      }
    }

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

    oj-legend {
      display: block;
    }

    .oj-legend {

          font-size: $smallFontSize;
          color: $textColor;
          @include oj-user-select-property(none);

        
    }

    .oj-legend-title {

        font-size: $smallFontSize;

    }

    .oj-legend-section-title {

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

    }

    .oj-legend-title {

        color: $tertiaryTextColor;

    }

    .oj-legend-section-title {

        color: $tertiaryTextColor;
      
    }

    .oj-dvt-no-data-message {
      color: $dvtNoDataMessageColor;
      font-size: $dvtNoDataMessageFontSize;
    }

    .oj-dvt-icon {
      stroke: none;
    }

    .oj-dvt-button-borderless .oj-dvt-button-background {
      stroke: none;
      fill: transparent;
    }

    .oj-dvt-button-borderless {
      stroke: none;
      fill: none;
    }

    .oj-dvt-button-borderless .oj-dvt-icon {
      fill: $iconColorDefault;
    }

    .oj-dvt-button-borderless.oj-hover .oj-dvt-icon {
      fill: $iconColorHover;
    }

    .oj-dvt-button-borderless.oj-active .oj-dvt-icon {
      fill: $iconColorActive;
    }

    .oj-dvt-button-borderless.oj-disabled .oj-dvt-icon {
      fill: $iconColorDisabled;
      opacity: $opacityDisabled;
    }

    .oj-dvt-button-outlined .oj-dvt-button-background {
      stroke: none;
      fill: $dvtComponentBgColor;
    }

    .oj-dvt-button-outlined {
      stroke: $buttonOutlinedChromeBorderColor;
      fill: none;
    }

    .oj-dvt-button-outlined.oj-hover {
      stroke: $buttonOutlinedChromeBorderColorHover;
      fill: $buttonOutlinedChromeBgColorHover;
    }

    .oj-dvt-button-outlined.oj-active {
      stroke: $buttonOutlinedChromeBorderColorActive;
      fill: $buttonOutlinedChromeBgColorActive;
    }

    .oj-dvt-button-outlined.oj-disabled {
      stroke: $buttonOutlinedChromeBorderColorDisabled;
    }

    .oj-dvt-button-outlined.oj-selected {
      stroke: $buttonOutlinedChromeBorderColorSelected;
      fill: $buttonOutlinedChromeBgColorSelected;
    }

    .oj-dvt-button-outlined.oj-selected.oj-hover {
      stroke: $buttonOutlinedChromeBorderColorSelectedHover;
      fill: $buttonOutlinedChromeBgColorSelectedHover;
    }

    .oj-dvt-button-outlined .oj-dvt-icon {
      fill: $buttonOutlinedChromeIconColor;
    }

    .oj-dvt-button-outlined.oj-hover .oj-dvt-icon {
      fill: $buttonOutlinedChromeIconColorHover;
    }

    .oj-dvt-button-outlined.oj-active .oj-dvt-icon {
      fill: $buttonOutlinedChromeIconColorActive;
    }

    .oj-dvt-button-outlined.oj-disabled .oj-dvt-icon {
      fill: $buttonOutlinedChromeIconColorDisabled;
    }

    .oj-dvt-button-outlined.oj-selected .oj-dvt-icon {
      fill: $buttonOutlinedChromeIconColorSelected;
    }

    .oj-dvt-button-outlined.oj-selected.oj-hover .oj-dvt-icon {
      fill: $buttonOutlinedChromeIconColorSelectedHover;
    }

    .oj-dvt-marquee {
      fill: $dvtMarqueeColor;
      stroke: $dvtMarqueeBorderColor;
    }

    .oj-dvt-marquee-inner-area {
      fill: transparent;
    }
  }
}