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

  &[data-processed] {
    text-align: center;
    background-color: transparent;
  }

  &: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;

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

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

@include media('print') {
  .mermaid,
  .mermaid-dark {
    display: none !important;
  }
  .mermaid-neutral {
    height: auto;
    padding: 0.5rem 0.75rem;
  }
}
