@use 'ej2-base/styles/common/mixin' as *;
@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 */