@use 'sass:color';

//layout variables
$diagram-border-stroke-width: 2;
$diagram-lane-border-stroke-width: 2;
$diagram-highlighter-border-stroke-width: 2;
$diagram-symbolpalette-shape-radius: 4px;/* stylelint-disable-line length-zero-no-unit */
$diagram-tooltip: none;

//normal
$diagram-endpoint-handle-color: $primary-text-color;
$diagram-endpoint-handle-connected-border: $white;

$diagram-resize-handle-disable-color: $spreadsheet-gridline;
$diagram-border-stroke-disabled: $spreadsheet-gridline;
$diagram-resize-handle-disable-stroke: $primary-text-color;
$diagram-rotate-handle-color: $primary;
$diagram-bezier-handle-color: $white;

$diagram-symbolpalette-hover: $diagram-palette-hover-background;
$diagram-symbolpalette-selected: $spreadsheet-gridline;

$diagram-ruler-color: $content-text-color-alt3;
$diagram-ruler-font-size: $text-xxs;
$diagram-ruler-marker-background-color: $content-bg-color-alt1;
$diagram-ruler-label-fill: $content-text-color-alt3;
$diagram-ruler-tick-stroke: $border-dark;
$diagram-overview-resizer-color:$primary;

$palette-background-color: $diagram-palette-background;

$diagram-editbox-fontcolor: $black;

//end normal
//primary
$diagram-endpoint-handle-connected-color: $primary;

$diagram-resize-handle-color: $primary;
$diagram-resize-handle-stroke: $primary;

$diagram-border-stroke: $primary;
$diagram-bezier-line-color: $primary;
$diagram-background-color: $white;
$diagram-highlighter-stroke: $primary;
$diagram-selected-region-stroke: $primary;
$diagram-pivot-line-stroke: $primary;
$diagram-ruler-marker-stroke: $primary;

$diagram-helper-stroke: $primary;

$diagram-text-edit-selection-background: $primary;
$diagram-editbox-background: $white;

$diagram-border-strokes: $primary;
$diagram-lane-border-strokes: $primary;
$diagram-text-edit-selection-color: $primary-text-color;

$diagram-multiselect-stroke: $diagram-resize-handle-stroke;

//end primary

.e-icons {
  font-family: 'e-icons';
  font-style: normal;
  font-variant: normal;
  //font-weight: $font-weight;
  line-height: 1;
  text-transform: none;
}

@include export-module('diagram-bootstrap-icons') {

  .e-symbolpalette {
    .e-clear-searchtext::before{ content: '\e7e7'; }
  }
}

@include export-module('diagram-theme') {

  .e-diagram {
    display: block;
    background-color: $diagram-background-color;
  }

  .e-symbolpalette {
    display: block;
  }

  .e-overview {
    display: block;
  }
  .overview-resizer{
    fill: $diagram-overview-resizer-color;
  }

  .e-content-placeholder.e-diagram.e-placeholder-diagram {
    background-size: 100% 100%;
    max-height: 500px;
    max-width: 500px;
  }

  .e-content-placeholder.e-symbolpalette.e-placeholder-symbolpalette {
    background-size: 100% 100%;
    max-height: 200px;
    max-width: 200px;
  }

  .e-diagram-endpoint-handle {
    fill: $diagram-endpoint-handle-color;
    stroke: $diagram-resize-handle-stroke;
  }

  .e-diagram-endpoint-handle.e-connected {
    fill: $diagram-endpoint-handle-connected-color;
    stroke: $diagram-endpoint-handle-connected-border;
  }

  .e-diagram-endpoint-handle.e-disabled,
  .e-diagram-bezier-control-handle.e-disabled,
  .e-diagram-resize-handle.e-disabled {
    fill: $diagram-resize-handle-disable-color;
    opacity: 1;
    stroke: $diagram-resize-handle-disable-stroke;
  }

  /* stylelint-disable */
  .e-diagram-bezier-handle.e-source.e-disabled {
    opacity: 1 !important;
  }

  .e-diagram-bezier-handle.e-target.e-disabled {
    opacity: 1 !important;
  }
  .e-diagram-bezier-control-handle{
    fill: $diagram-bezier-handle-color;
    stroke: $diagram-resize-handle-stroke;
    rx: 0px;
    ry: 0px;
  }
  .e-diagram-ortho-segment-handle,
  .e-diagram-straight-segment-handle,
  .e-diagram-bezier-segment-handle {
    fill: $diagram-bezier-handle-color;
    stroke: $diagram-resize-handle-stroke;
  }

  .e-symbolpalette .e-acrdn-content {
    background-color: $palette-background-color !important;
  }

  /* stylelint-enable */

  .e-diagram-bezier-control-line {
    stroke: $diagram-bezier-line-color;
  }

  .e-diagram-resize-handle {
    fill: $diagram-resize-handle-color;
    stroke: $diagram-endpoint-handle-color;
    rx: 0;
    ry: 0;
  }

  .e-diagram-helper {
    stroke: $diagram-helper-stroke;
  }

  .e-diagram-rotate-handle {
    fill: $diagram-rotate-handle-color;
    stroke: $diagram-resize-handle-stroke;
  }

  .e-diagram-selector {
    stroke: $diagram-border-stroke;
  }

  .e-diagram-selector.e-disabled {
    opacity: 1;
    stroke: $diagram-border-stroke-disabled;
  }

  .e-diagram-selector.e-thick-border {
    stroke: $diagram-border-strokes;
    stroke-width: $diagram-border-stroke-width;
  }

  .e-diagram-selector.e-thick-border.e-diagram-lane {
    stroke: $diagram-lane-border-strokes;
    stroke-width: $diagram-lane-border-stroke-width;
  }

  .e-diagram-highlighter {
    stroke: $diagram-highlighter-stroke;
    stroke-width: $diagram-highlighter-border-stroke-width;
  }

  .e-diagram-selected-region {
    stroke: $diagram-selected-region-stroke;
  }

  .e-diagram-pivot-line {
    stroke: $diagram-pivot-line-stroke;
  }

  .e-symbolpalette .e-symbol-hover:hover {
    background: $diagram-symbolpalette-hover;
    border-radius: $diagram-symbolpalette-shape-radius;
  }

  .e-symbolpalette .e-symbol-selected {
    background: $diagram-symbolpalette-selected;
    border-radius: $diagram-symbolpalette-shape-radius;
  }

  .e-diagram-tooltip {
    pointer-events: $diagram-tooltip;
  }

  .e-diagram .e-ruler {
    background: $diagram-ruler-marker-background-color;
    color: $diagram-ruler-color;
    font-size: $diagram-ruler-font-size;
  }

  .e-diagram .e-ruler-overlap {
    background: $diagram-ruler-marker-background-color;
  }

  .e-diagram .e-d-ruler-marker {
    stroke: $diagram-ruler-marker-stroke;
  }

  .e-diagram .e-diagram-text-edit {
    background: $diagram-editbox-background;
    border-color: $diagram-bezier-line-color;
    border-style: dashed;
    border-width: 1px;
    box-sizing: content-box;
    color: $diagram-editbox-fontcolor;
    min-width: 50px;
  }

  .e-diagram-text-edit::selection {
    background: $diagram-text-edit-selection-background;
    color: $diagram-text-edit-selection-color;
  }

  .e-ruler-tick-label {
    fill: $diagram-ruler-label-fill;
  }

  .e-ruler-tick {
    stroke: $diagram-ruler-tick-stroke;
  }

  .e-menu-item e-blankicon {
    padding-left: 28px;
  }

  .e-diagram-selection-indicator {
    stroke: $diagram-multiselect-stroke;
  }

  .e-diagram-selection-line {
    stroke: $diagram-multiselect-stroke;
  }

  /* stylelint-disable */
  .e-diagram-rotate {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVQ4jZ1SwQ2DMBAzlfLJI2KEjJAVukG7ARsxQkfoKHQDugHdgOoqh14oCaGWIpSTudzZRg2MdYOxrq0il2Csm411o7Eu5GinTN0D6AGMAGZVux9p1LGBrHIF0LD+4l3ql70thDABSFZYaeTJ6UqNWhL3ELhyyhUR98TcwI06Lk1aNonO1NocqGWy/6zOcGCq6OjiSCw22/wUfEzL8ND2P9duFXBmHMDvWVN7CliFkkGe69VM5RmVLDqG7ZMPOroWP5BTle5WjR6dkQayutyLqU6gsiU/ypHMiI41yf+CE01qov+R0egXAN5x6jng51I3yAAAAABJRU5ErkJggg==), auto !important;
  }

  .e-symbolpalette-hidden {
    display: none !important;
  }

  .e-symbolpalette-search-hidden {
    display: none !important;
  }

  .e-diagramTooltip-content {
    width: auto !important;
    height: auto !important;
  }
  .e-diagram-blazor{
    position: relative; 
    overflow: hidden; 
    fill: transparent;
  }
  .e-diagram-blazor-vertical-linemarker{
    overflow:hidden; 
    position: absolute;
  }
  .e-diagram-blazor-vertical-rulerlinesvg{
    position:inherit;
  }
  .e-diagram-blazor-horiontal-linemarker{
    overflow:hidden; 
    position: absolute;
  }
  .e-diagram-blazor-horizontal-rulerlinesvg{
    position:inherit;
  }
  .e-diagram-blazor-diagramcontent{
    position: absolute;
    overflow: auto; 
    background: transparent;
  }
  .e-diagram-blazor-diagram-adornerlayer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-userhandle-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-symbolpalette-blazor{
    overflow: auto;
  }
  .e-symbolpalette-blazor-draggable{
    visibility:hidden;
    display:none
  }
  .e-symbolpalette-blazor-preview{
    visibility:hidden;
    display:none
  }
  .e-symbolpalette-blazor-preview-div{
    overflow: hidden;
    float: left
  }
  .e-symbolpalette-blazor-preview-content{
    position: absolute;
  }
  .e-symbolpalette-blazor-input{
    width: 100%;
  }
  .e-diagram-blazor-searchbox-icon{
    margin-top:10px;
    margin-right:7px
  }
  .e-symbolpalette-blazor-remove-palette{
    overflow: auto;
  }
  .e-symbolpalette-blazor-symbol-draggable{
    overflow: hidden;
    float: left
  }
  .e-symbolpalette-blazor-symbol-draggable-svg{
    margin-left: 10px; 
    margin-top: 10px
  }
  .e-symbolpalette-blazor-symbol-draggable-content{
    position: absolute;
  }
  .e-diagram-blazor-tspan{
    user-select: none;
  }
  .e-diagram-blazor-ruler{
    overflow:hidden; 
    position: absolute;
    font-size: 11px;
  }
  .e-diagram-blazor-ruler-space{
    float: left;
  }
  .e-diagram-blazor-ruler-svg{
    position:inherit;
  }
  .e-diagram-blazor-background{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-grid-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-diagram-layer{
    position: absolute; 
    top: 0px;
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-svg-layer{
    pointer-events: all;
  }
  .e-diagram-blazor-html-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-html-layer-div{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    pointer-events: all;
  }
  .e-diagram-blazor-ports-expand-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-ports-gparent{
    pointer-events: all;
  }
  .e-diagram-blazor-expander{
    pointer-events: all;
  }
  .e-diagram-blazor-foreign-object{
    user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none;
  }
  .e-diagram-blazor-html-template{
    position: absolute;
  }
  .e-diagram-blazor-expand-collapse-template{
    position: absolute;
    opacity: 1;
  }
  .e-diagram-blazor-annotation-template{
    position: absolute;
  }
  .e-diagram-blazor-userhandle-div{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    pointer-events: all; 
    transform: translate(0px, 0px) scale(1);
  }
  .e-diagram-blazor-userhandle-template{
    position: absolute; 
    transform: rotate(0deg); 
    visibility: visible; 
    opacity: 1;
  }
  .e-diagram-blazor-fixed-userhandle-template{
    position: absolute; 
    transform: rotate(0deg);
    opacity:1;
  }
  .e-diagram-blazor-fixed-userhandle{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    pointer-events: all; 
    transform: translate(0px, 0px) scale(1);
  }
  .e-diagram-blazor-ruler-overlap{
    position: absolute; 
    left: 0; 
    top: 0;
  }
  .e-blazordiagram-tooltip {
    pointer-events: none;
  }
  .e-blazordiagram-tooltip .e-tooltip-close{
    pointer-events: auto;
  }
  .e-diagram-blazor-template-div{
    height: 100%; 
    width: 100%;
  }
  .e-diagram-blazor-overview{
    background: transparent; 
    user-select: none; 
    overflow: hidden; 
    height: 100%; 
    width: 100%;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
  }
  .e-diagram-blazor-drawing{
    position: relative;
    touch-action: none;
  }
  .e-diagram-blazor-overview-diagramlayer{
    position: absolute; 
    left: 0px; 
    top: 0px;
  }
  .e-diagram-blazor-overview-diagramlayer-canvas{
    position: absolute; 
    left: 0px; 
    top: 0px;
  }
  .e-diagram-blazor-overview-html-layer{
    pointer-events: none; 
    position: absolute; 
    top: 0px; 
    left: 0px;
  }
  .e-diagram-blazor-overview-html-layer-div{
    position: absolute; 
    top: 0px; 
    left: 0px;
  }
  .e-diagram-blazor-overviewsvg{
    position: absolute; 
    left: 0px; 
    top: 0px;
  }
  .e-diagram-blazor-goverviewlayer{
    pointer-events: none;
  }
  .e-diagram-blazor-overviewbackrect{
    pointer-events: none;
  }
  .e-diagram-blazor-overviewrect{
    cursor: all-scroll;
  }
  .e-diagram-blazor-all{
    pointer-events: all;
  }
  .e-diagram-blazor-none{
    pointer-events: none;
  }
}
 /* stylelint-enable */