@import './tokens.css';

:root {
  --ngd-node-background-color: var(--ngd-node-bg-primary-default);
  --ngd-node-border-color: var(--ngd-node-stroke-primary-default);
  --ngd-node-border-color-hover: var(--ngd-node-stroke-primary-hover);
  --ngd-node-border-radius: 0.75rem;
  --ngd-node-border-size: 0.0625rem;

  --ngd-group-border-color: var(--ngd-ui-stroke-primary-focus);
  --ngd-group-border-color-hover: var(--ngd-pt-stroke-primary-default);
  --ngd-group-border-color-highlight: var(--ngd-colors-acc1-500);
  --ngd-group-box-shadow-color-highlight: var(--ngd-colors-acc1-500-50);
  --ngd-group-background-color-highlight: var(--ngd-colors-gray-400);
  --ngd-group-border-radius: 0.75rem;
  --ngd-group-highlight-size: 1.25rem;

  --ngd-selected-node-box-shadow: 0 0 0 0.25rem var(--ngd-focus-ring-node-active);

  --ngd-rotate-handle-size: 2rem;
  --ngd-rotate-handle-distance: 2rem;
  --ngd-rotate-handle-background-color: var(--ngd-button-gray-bg-default);
  --ngd-rotate-handle-background-color-hover: var(--ngd-button-gray-bg-hover);
  --ngd-rotate-handle-background-color-active: var(--ngd-button-gray-bg-active);
  --ngd-rotate-handle-xy: calc(-0.7071 * var(--ngd-rotate-handle-distance));
  --ngd-rotate-handle-top: var(--ngd-rotate-handle-xy);
  --ngd-rotate-handle-right: var(--ngd-rotate-handle-xy);

  --ngd-resize-line-border-width: 0.0625rem;
  --ngd-resize-line-border-style: solid;
  --ngd-resize-line-border-color: var(--ngd-transform-box);

  --ngd-resize-handle-size: 0.375rem;
  --ngd-resize-handle-background-color: var(--ngd-ui-bg-primary-default);
  --ngd-resize-handle-border-size: 0.0625rem;
  --ngd-resize-handle-border-style: solid;
  --ngd-resize-handle-border-color: var(--ngd-transform-box);
  --ngd-resize-handle-border-radius: 0;

  --ngd-port-size: 0.25rem;
  --ngd-port-background-color: var(--ngd-node-port-fill-default);
  --ngd-port-border-color: var(--ngd-node-port-stroke-default);
  --ngd-port-border-size: 0.125rem;
  --ngd-port-border-radius: 50%;
  --ngd-port-background-color-hover: var(--ngd-node-port-fill-active);
  --ngd-port-border-color-hover: var(--ngd-node-port-stroke-active);
  --ngd-port-border-size-hover: 0.25rem;

  --ngd-default-edge-stroke: var(--ngd-colors-gray-500);
  --ngd-default-edge-stroke-hover: var(--ngd-colors-gray-700);
  --ngd-default-edge-stroke-selected: var(--ngd-colors-acc1-500);

  --ngd-box-selection-border-color: #961ce7;
  --ngd-box-selection-border-size: 1px;
  --ngd-box-selection-background: rgba(43, 91, 213, 0.12);

  --ngd-default-edge-label-background-color: var(--ngd-default-edge-label-bg-primary-default);
  --ngd-default-edge-label-color: var(--ngd-txt-primary-default);
  --ngd-default-edge-label-border-color: var(--ngd-colors-gray-500);

  --ngd-background-dot-color: var(--ngd-colors-gray-500);

  --ngd-background-line-minor-width: 0.5;
  --ngd-background-line-major-width: 1;
  --ngd-background-line-minor-opacity: 0.5;
  --ngd-background-line-major-opacity: 0.6;

  --ngd-minimap-background: var(--ngd-minimap-bg-primary-default);
  --ngd-minimap-border-color: var(--ngd-minimap-stroke-primary-default);
  --ngd-minimap-shadow-color: var(--ngd-shadow);
  --ngd-minimap-border-radius: 1rem;
  --ngd-minimap-padding: 0.5rem;
  --ngd-minimap-margin: 1rem;

  --ngd-minimap-node-color: var(--ngd-colors-gray-400);
  --ngd-minimap-node-opacity: 0.8;

  --ngd-minimap-diagram-bounds-opacity: 0.3;
  --ngd-minimap-diagram-bounds-color: var(--ngd-colors-gray-400);

  --ngd-minimap-viewport-stroke-color: var(--ngd-colors-gray-400);
  --ngd-minimap-viewport-stroke-width: 1;

  --ngd-nav-button-color: var(--ngd-nav-button-primary-default);
  --ngd-nav-button-size: 1.25rem;
  --ngd-nav-button-border-radius: 0.5rem;
  --ngd-nav-button-padding: 0.6875rem;
  --ngd-nav-button-background-color-hover: var(--ngd-nav-button-primary-hover);
  --ngd-nav-button-color-active: var(--ngd-nav-button-primary-pressed);
  --ngd-nav-button-color-disabled: var(--ngd-nav-button-primary-disabled);

  --ngd-zoom-controls-font-size: 0.8125rem;
  --ngd-zoom-controls-font-weight: 500;
  --ngd-zoom-controls-color: var(--ngd-nav-button-primary-default);
}

.ng-diagram-port-hoverable .ng-diagram-port:hover,
.ng-diagram-port-hoverable .ng-diagram-port:hover,
.ng-diagram-port-hoverable .ng-diagram-port.custom-content:hover .content-projection,
.ng-diagram-port-hoverable-over-node:hover:not(:has(.ng-diagram-rotate-handle:hover)):not(:has([data-rotating]))
  .ng-diagram-port.custom-content
  .content-projection,
.ng-diagram-port-hoverable-over-node:hover:not(:has(.ng-diagram-rotate-handle:hover)):not(:has([data-rotating]))
  .ng-diagram-port {
  background-color: var(--ngd-port-background-color-hover);
  border-color: var(--ngd-port-background-color-hover);
  /*
    Temporary 1px offset solution fixing the issue with white space being rendered
    between the outline and the border of the port. `transform: scale()` could be
    used instead, but it's causing visual distortions on the whole page in Safari.
  */
  outline: calc(1px + var(--ngd-port-border-size)) solid var(--ngd-port-background-color-hover);
  outline-offset: -1px;

  box-shadow: 0 0 0 var(--ngd-port-border-size-hover) var(--ngd-port-border-color-hover);
}

.ng-diagram-node-wrapper {
  &:not(.ng-diagram-node-selected) {
    transition: box-shadow 0.1s ease-in-out;
  }

  &.ng-diagram-group-highlight,
  &.ng-diagram-group.ng-diagram-group-highlight {
    border-color: var(--ngd-group-border-color-highlight);
    box-shadow: 0px 0px var(--ngd-group-highlight-size) 0px var(--ngd-group-box-shadow-color-highlight) inset;
  }

  &.ng-diagram-node-selected {
    box-shadow: var(--ngd-selected-node-box-shadow);
  }
}

ng-diagram {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}