@use "vuepress-shared/styles/reset";

:root {
  --mermaid-preview-bg: rgb(255 255 255 / 80%);
}

[data-theme="dark"] {
  --mermaid-preview-bg: rgb(0 0 0 / 80%);
}

.mermaid-preview,
.mermaid-wrapper {
  // mermaid style fix
  .node rect,
  .clusters rect,
  rect.note,
  .actor {
    rx: 8;
    ry: 8;
  }
}

.mermaid-wrapper {
  position: relative;

  overflow-x: auto;

  padding: 0.6em 0.4em;

  text-align: center;

  transition: all 1s;

  @media (max-width: hope-config.$mobile) {
    margin: 0 -1.5rem;
    padding: 0.6em 0;
  }
}

.mermaid-loading {
  color: var(--vp-c-accent-bg);
}

.mermaid-content {
  @media print {
    page-break-inside: avoid;
  }
}

.mermaid-actions {
  text-align: end;

  @media print {
    display: none;
  }
}

.mermaid-preview {
  position: fixed;
  inset: 0;
  z-index: 800;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--mermaid-preview-bg);

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

.preview-button,
.download-button {
  @include reset.button;

  width: 2rem;
  height: 2rem;
  margin: 0.25rem;
  padding: 0.5rem;
  border-radius: 0.5rem;

  background: var(--vp-c-control);
  color: var(--vp-c-text-mute);

  @media (max-width: hope-config.$tablet) {
    width: 1.5rem;
    height: 1.5rem;
  }

  &:hover {
    background: var(--vp-c-control-hover);
  }

  svg {
    width: 100%;
    height: 100%;
  }
}