// 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/

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

@if $includeProgressClasses != false  {
  @include module-include-once("common.progress") {
    /* progress */
    /* --------------------------------------------------------------- */

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

    oj-progress {
      display:block;
    }

    .oj-progress-bar {


        height: $progressBarHeight;
        border: 1px $progressBarBorderStyle $progressBarBorderColor;
        @include oj-border-radius($progressBarBorderRadius);

      position: relative;
      box-sizing: border-box;
      overflow: hidden;
    }

    .oj-progress-bar::before {
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: -1;


        background-color: $progressBarBgColor;
        opacity: $progressBarBgOpacity;

    }

    .oj-progress-bar-value {
      margin: 0;
      box-sizing: border-box;
      height: 100%;


        background: $progressValueBgColor;

    }
    //.oj-progressbar-start-label, oj-progressbar-end-label are old syntax
    .oj-progressbar-start-label,
    .oj-progressbar-end-label,
    .oj-progress-bar-start-label,
    .oj-progress-bar-end-label {
      display: inline-block;
      margin-top: 8px;
    }

    .oj-progressbar-end-label,
    .oj-progress-bar-end-label {
      @include oj-ltr() {
        float: right;
      }
      @include oj-rtl() {
        float: left;
      }
    }
    //oj-progressbar-embedded is old syntax
    .oj-progressbar-embedded,
    .oj-progress-bar-embedded {
      height: 3px;
      width: 100%;
      border-style: none;
      background-color: transparent;
    }
    .oj-progress-bar-overlay {
      height: 100%;
      background: url($progressBarIndeterminateOverlayImage);

        opacity: $progressBarIndeterminateOverlayOpacity;

      // TODO
      @include oj-rtl() {
        transform:scaleX(-1);
      }
    }

    // Add border for high contrast mode where the background color can't be seen
    .oj-hicontrast .oj-progress-bar-value {


        border: 1px dashed $progressBarBorderColor;

    }


    /* progress-circle */
    /* --------------------------------------------------------------- */

    .oj-progress-circle {
      position: relative;
      display: inline-block;


        width: $progressCircleSize;
        height: $progressCircleSize;

      max-width: 100%;
      max-height: 100%;
    }

    .oj-progress-circle-base {
      fill: transparent;
      stroke-width: 10%;


        stroke: $progressCircleBgColor;

    }

    .oj-progress-circle-base:not(.oj-progress-circle-value) {


        stroke-opacity: $progressCircleBgOpacity;

    }

    .oj-progress-circle-value {


        stroke: $progressValueBgColor;
      
    }

    .oj-progress-circle-transform {
      transform: rotate(-90deg);
    }
  }
}