.reactive-node {
  --border-color: rgb(var(--canvas-color));
  --border-width: 3px;
  --box-shadow: none;

  /* Focused */
  &.is-focused, &.is-selected {
    --border-color: var(--color-accent);
    --border-width: 5px;
    --box-shadow: var(--shadow-border-accent);
  }

  /* Themed */
  &.is-themed {
    --border-color: rgba(var(--canvas-color), 0.7);
  }

  &.is-themed {
    &.is-focused, &.is-selected {
      --border-color: rgb(var(--canvas-color));
      --box-shadow: var(--shadow-border-themed);
    }
  }
}

.canvas-node {
  //#region Text Alignment
  &[data-text-align='center'] {
    .markdown-preview-view {
      padding: 0 !important;
      overflow-y: initial;

      .markdown-preview-section {
        display: flex;
        flex-direction: column;
        justify-content: center;

        min-height: 0 !important;

        text-align: center;
        vertical-align: middle;
      }
    }
  }

  &[data-text-align='right'] {
    text-align: right;
  }
  //#endregion

  //#region Shape
  @mixin masked($mask) {
    mask-image: $mask;
    -webkit-mask-image: $mask;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
  }

  // Fix blurry text - Thank you @Graywaren (#42)
  &[data-shape] .canvas-node-container .markdown-preview-view.markdown-rendered {
    transform: unset;
  }
  
  &[data-shape='pill'] .canvas-node-container {
    border-radius: 5000px;
  }
  
  &[data-shape='diamond'] {
    @extend .reactive-node;
  
    // https://yoksel.github.io/url-encoder/ - assets/diamond-shape.svg
    $mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141.42135624 141.42135624' preserveAspectRatio='none'%3E%3Cstyle%3E rect %7B transform-origin: center; transform: rotate(45deg) scale(1.05); %7D %3C/style%3E%3Crect rx='8' x='20.71067812' y='20.71067812' width='100' height='100' /%3E%3C/svg%3E");
  
    &.is-focused, &.is-selected {
      border-radius: var(--radius-m);
      outline: 2px solid var(--color-accent);
      outline-offset: 5px;
    }

    .canvas-node-container {
      border: none;
      box-shadow: none !important;
  
      /* Clip while not editing */
      &:not(:has(.embed-iframe)) {
        @include masked($mask);
      }
  
      /* Clip placeholder */
      .canvas-node-placeholder::after {
        @include masked($mask);
      }
    }
  
    /* Border */
    &::before {
      @include masked($mask);
  
      content: '';
      position: absolute;
      top: calc(var(--border-width) * -1);
      left: calc(var(--border-width) * -1);
      width: calc(100% + var(--border-width) * 2);
      height: calc(100% + var(--border-width) * 2);
  
      background-color: var(--border-color);
    }
  }
  
  &[data-shape='parallelogram'] .canvas-node-container {
    transform: skewX(-20deg);
  
    /* Fix blurry text */
    backface-visibility: hidden;
  
    .canvas-node-content .markdown-embed-content {
      transform: skewX(20deg);
    }
  }
  
  &[data-shape='circle'] .canvas-node-container {
    border-radius: 50%;
    
    .markdown-preview-view {
      padding: 0 !important;
      overflow-y: initial;
    }
  }
  
  &[data-shape='predefined-process'] {
    @extend .reactive-node;
  
    $line-padding: 10px;
  
    .canvas-node-container {
      .canvas-node-content {
        padding: 0 $line-padding;
      }
  
      &::before, &::after {
        content: '';
        z-index: 1;
  
        position: absolute;
        top: 0;
  
        width: 0;
        height: 100%;

        border-left: var(--border-width) solid var(--border-color);
      }
  
      &::before {
        left: calc($line-padding - var(--border-width));
      }
  
      &::after {
        right: calc($line-padding - var(--border-width));
      }
    }
  }
  
  &[data-shape='document'] {
    @extend .reactive-node;
  
    // https://yoksel.github.io/url-encoder/ - assets/document-shape.svg
    $mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 45' preserveAspectRatio='none'%3E%3Cpath d='M75 0 75 39.375Q56.25 29.25 37.5 39.375 18.75 49.5 0 39.375L0 0Z' /%3E%3C/svg%3E");
  
    --border-width: 2.5px;
    filter: drop-shadow(0 var(--border-width) 0 var(--border-color))
            drop-shadow(0 calc(var(--border-width) * -1) 0 var(--border-color));
    
    .canvas-node-container {
      @include masked($mask);
      border: var(--border-width) solid var(--border-color);
      border-top: none;
      border-bottom: none;
    }
  
    /* Focused */
    &.is-focused, &.is-selected {
      --border-width: 4px;
    }
  }
  
  &[data-shape='database'] {
    @extend .reactive-node;
    $oval-height: 50px;
  
    .canvas-node-container {
      border: var(--border-width) solid var(--border-color);
      border-bottom: 0;
      border-top: 0;
  
      border-radius: 0;
      box-shadow: none !important;
  
      /* Clip placeholder */
      .canvas-node-placeholder {
        transform: translateY(calc($oval-height / 2));
      }
    }
  
    &::before, &::after {
      content: '';
      position: absolute;
      left: 0;
  
      box-sizing: border-box;
      width: 100%;
      height: $oval-height;
  
      border-radius: 50%;
      border: var(--border-width) solid var(--border-color);
      
      background-color: var(--background-primary);
    }
  
    /* Top of cylinder */
    &::after {
      top: calc(-1 * $oval-height / 2);
    }
  
    /* Bottom of cylinder */
    &::before {
      bottom: calc(-1 * $oval-height / 2);
    }
  
    /* Disable default theme fill */
    &.is-themed .canvas-node-content {
      background-color: transparent;
    }
  
    /* Add theme fill if not editing */
    &.is-themed:not(:has(.embed-iframe)) {
      .canvas-node-container, &::after, &::before {
        box-shadow: inset 0 0 0 1000px rgba(var(--canvas-color), 0.07) !important;
      }
    }
  
    /* Offset text if not editing */
    .canvas-node-content:not(:has(.embed-iframe)) {
      transform: translateY(calc($oval-height / 2.5));
    }
  
    /* Move top of cylinder to background while editing */
    &:has(.embed-iframe)::after {
      z-index: -1;
    }
  }
  //#endregion

  //#region Borders
  &[data-border='dashed'] .canvas-node-container {
    box-shadow: none;
    border-style: dashed;
  }

  &[data-border='dotted'] .canvas-node-container {
    box-shadow: none;
    border-style: dotted;
  }

  &[data-border='invisible'] {
    box-shadow: none;

    &:not(.is-focused):not(.is-selected) .canvas-node-container {
      border-color: transparent !important;
    }

    .canvas-node-label {
      display: none;
    }

    .canvas-node-container {
      background-color: transparent;
      box-shadow: none;
    }
  }
  //#endregion

  //#region Combinations
  &[data-border][data-shape='predefined-process'] {
    --border-width: 2px;
    
    .is-focused, .is-selected {
      --border-width: 2px;
    }
  }

  &[data-border='dashed'][data-shape='predefined-process'] .canvas-node-container {
    &::before, &::after {
      border-left: var(--border-width) dashed var(--border-color);
    }
  }

  &[data-border='dotted'][data-shape='predefined-process'] .canvas-node-container {
    &::before, &::after {
      border-left: var(--border-width) dotted var(--border-color);
    }
  }

  &[data-border][data-shape='document'] .canvas-node-container {
    border-top: none;
    border-bottom: none;
  }
  //#endregion
}