FixIt/assets/css/_shortcodes/_mermaid.scss

.mermaid,
.mermaid-dark,
.mermaid-neutral {
  position: relative;
  overflow: hidden !important;

  &[data-processed] {
    text-align: center;
    margin-block: 0.5rem;
  }

  &:not([data-processed])::before {
    @include loading;
  }

  svg {
    max-width: 100%;
    height: auto; 
  }
}

.mermaid {
  [data-theme='dark'] & {
    height: 0;
    padding: 0;
  }
}

.mermaid-dark {
  height: 0;
  padding: 0 !important;

  [data-theme='dark'] & {
    height: auto;
    padding: 0.5rem !important;
  }
}

// for print view
.mermaid-neutral {
  height: 0;
  padding: 0 !important;
}

@media only print {
  .mermaid,
  .mermaid-dark {
    display: none;
  }
  .mermaid-neutral {
    height: auto;
    padding: 0.5rem !important;
  }
}