.markmap-title {
  margin: 1rem auto 0.5rem;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

// override css variables
.markmap {
  --markmap-a-color: var(--vp-c-accent) !important;
  --markmap-a-hover-color: var(--vp-c-accent) !important;
  --markmap-code-bg: var(--vp-c-border) !important;
  --markmap-code-color: var(--vp-c-text) !important;
  --markup-circle-open-bg: var(--vp-c-white) !important;
  --markup-text-color: var(--vp-c-text) !important;
}

.markmap-wrapper {
  position: relative;
  text-align: center;
  transition: all 1s;

  @media (max-width: hope-config.$tablet) {
    margin: 0 -1rem;
  }

  .markmap-svg {
    width: 100%;
    min-height: 360px;
    color: var(--vp-c-text);

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

  .markmap-loading {
    position: absolute;
    inset: 0 0 auto;
    color: var(--vp-c-accent-bg);
  }

  pre {
    padding: 0 !important;
    line-height: inherit !important;

    code {
      padding: 0 !important;
      background-color: var(--vp-c-border) !important;
      color: inherit;
    }
  }

  // FIXME: Probably markmap bug
  .katex-html {
    display: none;
  }
}

.mm-toolbar {
  display: flex;
  align-items: center;

  padding: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--vp-c-border);
  border-radius: 0.25rem;

  background: var(--vp-c-control);

  line-height: 1;
  direction: ltr;

  user-select: none;

  &:hover {
    box-shadow: 0 2px 12px 0 var(--vp-c-shadow);
  }

  .mm-toolbar-brand {
    display: none;
  }

  svg {
    display: block;
  }

  a {
    display: inline-block;
    text-decoration-line: none;
  }

  > span {
    padding-inline: 0.25rem;
  }
}

.mm-toolbar-item {
  &:not(:first-child) {
    margin-left: 0.25rem;
  }

  > * {
    min-width: 20px;
    height: 20px;

    font-size: 0.75rem;
    line-height: 1rem;
    line-height: 20px;
    text-align: center;

    cursor: pointer;
  }

  &.active,
  &:hover {
    border-radius: 0.25rem;
    background-color: var(--vp-c-accent-bg);

    > * {
      color: var(--vp-c-white);
    }
  }
}