// Copyright (c) 2014, 2026, 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.gauge.scss
// !!!
@import "../../utilities/oj.utilities";

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

    .oj-dialgauge {
      width:200px;
      height:200px;
    }

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

    oj-led-gauge {
      display: block;
    }

    .oj-ledgauge-fit {
      width:40px;
      height:40px;
    }

    .oj-ledgauge-lg {
      width: 32px;
      height: 32px;
    }

    .oj-ledgauge-md {
      width: 28px;
      height: 28px;
    }

    .oj-ledgauge-sm {
      width: 24px;
      height: 24px;
    }

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

    oj-status-meter-gauge {
      display: block;
    }

    .oj-statusmetergauge {
      width:220px;
      height:25px;
    }

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

    oj-rating-gauge {
      display: block;
    }

    .oj-rating-gauge-fit {
      width:120px;
      height:25px;
    }

    .oj-gauge-metric-label {
      font-weight: bold;
    }

    .oj-gauge-label {
    }

    // color for the first threshold on a gauge, typically represents a low value
    .oj-gauge-threshold1 {

        color: $dvtThreshold1Color;
      
    }

    // color for the second threshold on a gauge, typically represents a medium value
    .oj-gauge-threshold2 {

        color: $dvtThreshold2Color;

    }

    // color for the third threshold on a gauge, typically represents a high value
    .oj-gauge-threshold3 {

        color: $dvtThreshold3Color;

    }

    .oj-dialgauge.oj-focus-highlight,
    .oj-ledgauge.oj-focus-highlight,
    .oj-statusmetergauge.oj-focus-highlight,
    .oj-ratinggauge.oj-focus-highlight {

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

    }

    .oj-rating-gauge-shape-lg {
      width: 36px;
      height: 36px;
    }

    .oj-rating-gauge-shape-md {
      width: 20px;
      height: 20px;
    }

    .oj-rating-gauge-shape-sm {
      width: 16px;
      height: 16px;
    }

    .oj-rating-gauge-selected {
      fill: $ratingGaugeColorSelected;
      stroke: $ratingGaugeBorderColorSelected;
    }

    .oj-rating-gauge-unselected {
      fill: $ratingGaugeColorUnselected;
      stroke: $ratingGaugeBorderColorUnselected;
    }

    .oj-rating-gauge-changed {
      fill: $ratingGaugeColorChanged;
      stroke: $ratingGaugeBorderColorChanged;
    }

    .oj-rating-gauge-hover {
      fill: $ratingGaugeColorHover;
      stroke: $ratingGaugeBorderColorHover;
    }

    .oj-rating-gauge-selected-disabled {
      fill: $ratingGaugeColorSelectedDisabled;
      stroke: $ratingGaugeBorderColorSelectedDisabled;
    }
      
    .oj-rating-gauge-unselected-disabled {
      fill: $ratingGaugeColorUnselectedDisabled;
      stroke: $ratingGaugeBorderColorUnselectedDisabled;
    }

    .oj-statusmeter-gauge-plotarea {
      border-color: $statusMeterGaugePlotAreaBorderColor;
      color: $statusMeterGaugePlotAreaColor;
    }

    .oj-statusmetergauge-horizontal-fit {
      width: 220px;
      height: 25px; }
    
    .oj-statusmetergauge-vertical-fit {
      width: 25px;
      height: 220px; }
    
    .oj-statusmetergauge-circular-fit {
      width: 6rem;
      height: 6rem; }
    
    .oj-statusmetergauge-horizontal-sm {
      width: 100%;
      height: 6px; }
    
    .oj-statusmetergauge-horizontal-md {
      width: 100%;
      height: 10px; }
    
    .oj-statusmetergauge-horizontal-lg {
      width: 100%;
      height: 14px; }
    
    .oj-statusmetergauge-vertical-sm {
      height: 100%;
      width: 6px; }
    
    .oj-statusmetergauge-vertical-md {
      height: 100%;
      width: 10px; }
    
    .oj-statusmetergauge-vertical-lg {
      height: 100%;
      width: 14px; }
    
    .oj-statusmetergauge-circular-sm {
      width: 56px;
      height: 56px; }
    
    .oj-statusmetergauge-circular-md {
      width: 96px;
      height: 96px; }
    
    .oj-statusmetergauge-circular-lg {
      width: 196px;
      height: 196px; }
  }
}