// 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 base theme's directory,
//          for example alta/widgets/_oj.alta.train.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@import "../../utilities/oj.utilities";

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

    /* train */
    /* --------------------------------------------------------------- */

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

    .oj-train{
      white-space: nowrap;
      text-align: center;
    }

    .oj-train-wrapper {
      font-size: 0;
      display: inline-block;
      position:relative;
      vertical-align:top;
    }

    /* Class that can be added to stretch train to container size */
    .oj-train-stretch .oj-train-wrapper {
      width: 100%;
    }


      /* Wrapper class that contains step connector and fill */
      .oj-train-connector-wrapper {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        padding: 0 calc(#{$trainStepWidth} / 2);
      }

      /* Classes that define the bar connecting the steps */
      .oj-train-connector,
      .oj-train-connector-fill {
        position: relative;
        height: calc(#{$trainConnectorHeight} * #{$trainConnectorHasFill});
        width: 100%;

        // top spacing to center the connector
        top: calc((#{$trainButtonContinuousConnectorDiameter} - #{$trainConnectorHeight}) / 2);
        box-sizing: border-box;
      }
      .oj-train-connector {
        background-color: $trainConnectorBgColor;
      }

      /* Shades in the connector to the position of the selected step */
      .oj-train-connector-fill {
        background-color: $trainContinuousConnectorBgColorSelected;
        // move the fill on top of the normal connector
        margin-top: calc(0px - #{$trainConnectorHeight});
      }



    /* Connector circle behind the individual step buttons which matches the connector */
    .oj-train-button-connector {
      position: relative;
      display:inline-block;
      box-sizing: border-box;

        width: $trainButtonContinuousConnectorDiameter;
        height: $trainButtonContinuousConnectorDiameter;
        background-color: $trainConnectorBgColor;
        @include oj-border-radius(50%);

    }

    // adjust top position of the last button connector
    .oj-train-step-list-item:last-child > .oj-train-button-connector {
      top: $trainConnectorHeight;
    }

    .oj-train-button-connector.oj-train-fill {

        background-color: $trainContinuousConnectorBgColorSelected;
        @include oj-background-image(none);

    }


    // TODO

      .oj-train-step-individual-connector {
        position: relative;
        visibility: visible;
        height: calc(#{$trainConnectorHeight} * (1 - #{$trainConnectorHasFill}));

        // The width is calculated by taking the distance between the midpoints of the step buttons
        // and subtracting a 10px margin for each side in addition to subtracting
        // the radius of the buton from each side
        width: calc(100% - #{$trainButtonDiameter} - #{oj-add-unit-to-zero($trainIndividualConnectorPadding)} * 2);
        top: calc((#{$trainButtonContinuousConnectorDiameter} + #{$trainConnectorHeight}) / 2);
        background-color: $trainConnectorBgColor;
        // the offset used for the individual connector line
        // 50% is the midpoint of the space available for the step
        // + half of the Button Diameter (24px/2) + 10px margin
        @include oj-ltr() {
          left: calc(50% + #{$trainButtonDiameter} / 2 + 10px);
        }
        @include oj-rtl() {
          right: calc(50% + #{$trainButtonDiameter} / 2 + 10px);
        }
      }

      .oj-train-step-individual-connector.oj-train-connector-before-selected-step {
        background-color: $trainIndividualConnectorBgColorSelected;
        width: calc(100% - #{$trainButtonDiameter} - #{oj-add-unit-to-zero($trainIndividualConnectorPaddingSelected)} * 2);
        @include oj-ltr() {
          left: calc(50% + #{$trainButtonContinuousConnectorDiameter} / 2 + #{oj-add-unit-to-zero($trainIndividualConnectorPaddingSelected)});
        }
        @include oj-rtl() {
          right: calc(50% + #{$trainButtonContinuousConnectorDiameter} / 2 + #{oj-add-unit-to-zero($trainIndividualConnectorPaddingSelected)});
        }
      }


    /* Inividual step buttons that are used for train navigation */
    .oj-train-button {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-style: solid;

        border-width: $trainButtonBorderWidth;
        width: $trainButtonDiameter;
        height: $trainButtonDiameter;
        margin:calc((#{$trainButtonContinuousConnectorDiameter} - #{$trainButtonDiameter}) / 2);
        @include oj-border-radius(50%);

    }

    .oj-train-button.oj-default {

        border-color: $trainBorderColor;
        background-color: $trainBgColor;

    }


    .oj-train-button.oj-visited {

        border-color: $trainBorderColorVisited;
        background-color: $trainBgColorVisited;

    }

    .oj-train-button.oj-hover {

        border-color: $trainBorderColorHover;
        background-color: $trainBgColorHover;

    }

    .oj-train-button.oj-selected {

        border-color: $trainBorderColorSelected;
        background-color: $trainBgColorSelected;

      cursor: default;
    }

    .oj-train-button.oj-disabled {

        border-color: $trainBorderColorDisabled;
        background-color: $trainBgColorDisabled;

      cursor: default;
    }

    .oj-train-button.oj-active,
    .oj-train-button.oj-hover.oj-active
    {

        background-color: $trainBgColorActive;
        border-color: $trainBorderColorActive;

    }

    // TODO

      // To prevent bleeding of button color onto icon due to anti-aliasing
      @if $trainButtonDiameter ==  $trainIconDiameter{
        .oj-train-step-list-item.oj-confirmation .oj-train-button,
        .oj-train-step-list-item.oj-info .oj-train-button,
        .oj-train-step-list-item.oj-invalid .oj-train-button,
        .oj-train-step-list-item.oj-warning .oj-train-button {
          background-color: transparent;
          border-color: transparent;
        }
      }


    .oj-train-button-text {

        font-size: calc(#{$trainButtonFontSize} * #{$trainButtonTextIsNumeric});
        font-weight: normal;
        color: $trainButtonTextColor;
        display: $trainButtonTextDisplay;

    }

    .oj-train-button.oj-active .oj-train-button-text,
    .oj-train-button.oj-hover.oj-active .oj-train-button-text,
    .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-button-text{

        color: $trainButtonTextColorActive;

    }

    .oj-train-button.oj-disabled .oj-train-button-text{

        color: $trainButtonTextColorDisabled;

    }

    .oj-train-button.oj-hover .oj-train-button-text,
    .oj-train-button.oj-visited.oj-hover .oj-train-button-text {

        color: $trainButtonTextColorHover;

    }

    .oj-train-button.oj-visited .oj-train-button-text{

        display: $trainButtonTextVisitedDisplay;
        color: $trainButtonTextColorVisited;

    }

    .oj-train-button.oj-selected .oj-train-button-text{

        color: $trainButtonTextColorSelected;

    }



    .oj-train-step-list {
      margin: 0;
      padding: 0;
    }

    /* Class for each li that stores the label and button information for each step in the train */
    .oj-train-step-list-item {
      font-size: 1rem;

        width: $trainStepWidth;
        white-space: $trainLabelTextWrap;

      text-align: center;
      display: inline-block;
      vertical-align: top;
      line-height: normal;
    }

    .oj-train-label-wrapper {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 5px;
      margin-left: 5px;

        margin-top: $trainLabelPaddingTop;

    }

    // adjust top position of the last step label
    .oj-train-step-list-item:last-child > .oj-train-label-wrapper {
        top: $trainConnectorHeight;
    }

    .oj-train-label {
      text-decoration: none;

        color: $trainLabelColor;

      text-align: center;
    }

    .oj-train-label.oj-visited {

        color: $trainLabelColorVisited;
      }


    .oj-train-label.oj-disabled {
      text-decoration: none;
      font-weight:normal;

        color: $trainLabelColorDisabled;
        opacity: $trainOpacityDisabled;

    }

    .oj-train-label.oj-active,
    .oj-train-label.oj-hover.oj-active
    {

        text-decoration: $trainLabelTextDecorationActive;
        font-weight: $trainLabelFontWeightActive;

      cursor: pointer;
    }

    .oj-train-label.oj-hover {
      cursor: pointer;
    }

    .oj-train-label.oj-selected {
      text-decoration: none;
      cursor: default;

        font-weight: $trainLabelFontWeightSelected;

    }

    .oj-train-label:not(.oj-focus-highlight):focus {
      outline: none;
    }

    .oj-train-icon {
      position: absolute;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 0;
      top: 0;

        width: $trainIconDiameter;
        height: $trainIconDiameter;
        color: $trainButtonMessagingIconColor;
        @include oj-border-radius(50%);
        font-size: $trainIconFontSize;

      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
    }

    .oj-train-icon.oj-confirmation {
      @extend .oj-fwk-icon-checkmark;

        background-color: $trainConfirmationBgColor;

    }
    .oj-train-button.oj-disabled .oj-train-icon {

        background-color: $trainBgColorDisabled;
        border-color: $trainBorderColorDisabled;
        border-width: $trainButtonBorderWidth;
        color: $trainButtonTextColorDisabled;

    }

    .oj-train-button.oj-hover .oj-train-icon,
    .oj-train-button.oj-visited.oj-hover .oj-train-icon,
    .oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-confirmation,
    .oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-error,
    .oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-info,
    .oj-train-button.oj-visited.oj-hover .oj-train-icon.oj-warning {
      background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
    }
    .oj-train-button.oj-visited .oj-train-icon.oj-confirmation,
    .oj-train-button.oj-selected .oj-train-icon.oj-confirmation{

        background-color: $trainConfirmationBgColor;
        border-color: $trainBorderColorVisited;

    }

    .oj-train-button.oj-active .oj-train-icon.oj-confirmation,
    .oj-train-button.oj-hover.oj-active .oj-train-icon.oj-confirmation,
    .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-confirmation {
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    }

    .oj-train-icon.oj-error {
      @extend .oj-fwk-icon-warning;

        background-color: $trainErrorBgColor;

    }

    .oj-train-button.oj-visited .oj-train-icon.oj-error,
    .oj-train-button.oj-selected .oj-train-icon.oj-error {

        background-color: $trainErrorBgColor;

    }

    .oj-train-button.oj-active .oj-train-icon.oj-error,
    .oj-train-button.oj-hover.oj-active .oj-train-icon.oj-error,
    .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-error {
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    }

    .oj-train-icon.oj-info {
      @extend .oj-fwk-icon-info;

        background-color: $trainInfoBgColor;

    }

    .oj-train-button.oj-visited .oj-train-icon.oj-info,
    .oj-train-button.oj-selected .oj-train-icon.oj-info {

        background-color: $trainInfoBgColor;

    }

    .oj-train-button.oj-active .oj-train-icon.oj-info,
    .oj-train-button.oj-hover.oj-active .oj-train-icon.oj-info,
    .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-info {
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    }

    .oj-train-icon.oj-warning {
      @extend .oj-fwk-icon-warning;

        background-color: $trainWarningBgColor;

    }

    .oj-train-button.oj-visited .oj-train-icon.oj-warning,
    .oj-train-button.oj-selected .oj-train-icon.oj-warning {

        background-color: $trainWarningBgColor;

    }

    .oj-train-button.oj-active .oj-train-icon.oj-warning,
    .oj-train-button.oj-hover.oj-active .oj-train-icon.oj-warning,
    .oj-train-button.oj-hover.oj-visited.oj-active .oj-train-icon.oj-warning {
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    }

    .oj-train-icon.oj-hover {
      cursor: pointer;
    }

    // A selected step will have a more prominent border
    .oj-hicontrast .oj-train-button.oj-selected{

        border-width: calc(#{$trainButtonDiameter} / 2);

    }

    // A disabled step will have a less prominent border
    .oj-hicontrast .oj-train-button.oj-disabled {
      border-style: dotted;
    }

    .oj-hicontrast .oj-train-button.oj-visited {
      border-width: 2px;
    }

    // For high contrast mode add a transparent border around the train elements.
    .oj-hicontrast .oj-train-connector {
      border: 1px solid;
    }

    .oj-hicontrast .oj-train-connector-fill {

        border: calc(#{$trainConnectorHeight} / 2) solid;
      
    }
  }
}