// 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.diagram.scss
// !!!
@import "../../utilities/oj.utilities";

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

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

    oj-diagram {
      display: block;
    }

    // top level diagram styles
    .oj-diagram {


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

      width:100%;
      height:400px;
    }

    // diagram node
    .oj-diagram-node {
    }

    // applied to the diagram node on hover
    // border-top-color - used to create outer border
    // border-bottom-color - used to create inner border
    .oj-diagram-node.oj-hover {
      
            border-top-color:$dvtDiagramNodeBorderColorHover;
            border-bottom-color: $dvtBorder2Color;

    }

    // applied to the selected diagram node
    .oj-diagram-node.oj-selected {

            border-color: $dvtBorderColor;

    }

    // applied to the diagram node label
    .oj-diagram-node-label {

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

    }

    // diagram link
    .oj-diagram-link {

            color: $dvtDiagramLinkColor;
            padding: $dvtDiagramLinkPadding;

    }

    // applied to the diagram link on hover
    // border-top-color - used to create outer border
    // border-bottom-color - used to create inner border
    .oj-diagram-link.oj-hover {

            border-top-color:$dvtDiagramLinkBorderColorHover;
            border-bottom-color: $dvtBorder2Color;

    }

    // applied to the selected diagram link
    .oj-diagram-link.oj-selected {

            border-color: $dvtBorderColor;

    }

    // applied to the diagram link label
    .oj-diagram-link-label {

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

    }
    .oj-diagram-node.oj-draggable {
    }
    .oj-diagram .oj-active-drop {

            fill: $dropTarget1Color;

      fill-opacity: .75;
    }
    .oj-diagram .oj-invalid-drop {
      cursor: no-drop;
    }
    .oj-diagram-node.oj-active-drop {

            fill: $dropTarget1Color;

      fill-opacity: .75;
    }
    .oj-diagram-node.oj-invalid-drop {
      cursor: no-drop;
    }
    .oj-diagram-link.oj-active-drop {

            stroke: $dropTarget1Color;

      stroke-opacity: .75;
    }
    .oj-diagram-link.oj-invalid-drop {
      cursor: no-drop;
    }
    
    .oj-diagram-overview {

        background-color:$dvtDiagramOverviewBgColor;
        padding:$dvtDiagramOverviewPadding;

    }
    
    .oj-diagram-overview-content {
      padding: $dvtDiagramOverviewContentPadding;
    }

    .oj-diagram-overview-viewport {

        background-color:$dvtDiagramOverviewWindowBgColor;
        border-color:$dvtDiagramOverviewWindowBorderColor;

    }
    .oj-diagram-overview-node {

        fill:$dvtDiagramOverviewNodeBgColor;

    }
    .oj-diagram-overview-container-node {

        fill:$dvtDiagramOverviewNodeBgColor;
      
      fill-opacity:.25;
    }
  }
}