@use "core/functions" as *;
@use "core/mixins" as *;

@mixin mermaid-base {
  position: relative;
  box-sizing: border-box;
  margin: 0 !important;
  overflow: hidden !important;

  &[data-processed] {
    background-color: transparent;

    svg {
      display: block;
      margin-inline: auto;
    }
  }

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

@mixin mermaid-hidden-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}

@mixin mermaid-visible-layer {
  position: relative;
  inset: auto;
  visibility: visible;
  pointer-events: auto;
}

:is(.mermaid, .mermaid-dark) {
  // loading indicator
  &:not([data-processed])::before {
    @include loading;
  }
}

:is(.mermaid, .mermaid-dark, .mermaid-neutral) {
  @include mermaid-base;
}

.diagram-tabs {
  :is(.mermaid, .mermaid-dark)[data-processed] svg {
    will-change: transform;
  }

  .tabs-actions .fullscreen-btn {
    position: relative;
    margin-inline-start: 4px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 1px;
      translate: -2px -50%;
      height: fi-var(code-block-font-size);
      background-color: fi-var(global-border-color-weight);
    }
  }

  .diagram-container {
    margin-block: 0 !important;
  }

  &.is-fullscreen {
    .diagram-container {
      height: 100%;
    }

    :is(.mermaid, .mermaid-dark)[data-processed] {
      height: 100%;
    }
  }
}

:is(.mermaid-dark, .mermaid-neutral) {
  @include mermaid-hidden-layer;
}

.mermaid {
  @include dark-mode {
    @include mermaid-hidden-layer;
  }
}

.mermaid-dark {
  @include dark-mode {
    @include mermaid-visible-layer;
  }
}

@include media('print') {
  .diagram-tabs {
    border: none !important;
    background-color: transparent !important;

    .tabs-header {
      display: none !important;
    }
  }
  .mermaid,
  .mermaid-dark {
    display: none;
  }
  .mermaid-neutral {
    @include mermaid-visible-layer;
  }
}
