/**
* Base functionality
*/
.base, .request, .project, .filter, .application, .modifier, .join, .split, .decision, .event {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: white; }

.gap > * {
  margin: 14px; }

.basic-node, .request, .project, .filter, .application, .modifier {
  min-height: 30px;
  width: 100px;
  border-radius: 7px; }

.request {
  background-color: var(--node-request); }

.project {
  color: white;
  background-color: var(--node-project); }

.filter {
  background-color: var(--node-filter); }

.application {
  background-color: var(--node-application); }

.modifier {
  background-color: var(--node-modifier); }

/**
* Plus shape
*/
.join {
  background-color: var(--node-join);
  height: 100px;
  width: 100px;
  clip-path: polygon(0 25%, 25% 25%, 25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%); }

/**
* X shape
*/
.split {
  width: 100px;
  height: 100px;
  clip-path: polygon(25% 0, 0 25%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 75% 100%, 100% 75%, 75% 50%, 100% 25%, 75% 0, 49% 25%);
  background-color: var(--node-split); }

/**
* Diamond shape
*
* There are multiple ways to generate a diamond 
* shape, using a mask allows the input and output 
* markers to be vertical without some crazy 
* repositioning - however, using the mask hides
* part of the inputs/outputs, because those items
* sit inside of the shape and not outside of it
*/
.decision {
  background-color: var(--node-decision);
  height: 100px;
  width: 100px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/**
* Circle shape
*/
.event {
  border-radius: 50%;
  background-color: var(--node-event);
  width: 60px;
  height: 60px; }