/********************************************************************************
 * This file includes code from the shiroa (https://github.com/Myriad-Dreamin/shiroa),
 * which is licensed under the Apache License, Version 2.0.
 *
 * Original code by:
 * Myriad-Dreamin  (https://github.com/Myriad-Dreamin)
 *
 * Copyright (c) 2023 shiroa Developers
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 ********************************************************************************/

#typst-app {
  display: flex;
  justify-content: center;
}

#typst-app.with-title {
  margin: 5px;
}

.typst-dom-page {
  width: calc(var(--data-page-width, 100%) * var(--typst-dom-scale));
  height: calc(var(--data-page-height) * var(--typst-dom-scale));
  --data-text-width: calc(1px * var(--typst-dom-scale));
  --data-text-height: calc(1px * var(--typst-dom-scale));
  margin: auto;
}

.typst-back-canvas {
  position: absolute;
  z-index: -1;
  width: calc(var(--data-page-width, 100%) * var(--typst-dom-scale));
  height: calc(var(--data-page-height) * var(--typst-dom-scale));
  pointer-events: none;
}

.typst-svg-page {
  position: absolute;
  z-index: 0;
  width: calc(var(--data-page-width, 100%) * var(--typst-dom-scale));
  height: calc(var(--data-page-height) * var(--typst-dom-scale));
  max-height: none;
  fill: none;
}

.typst-content-link {
    border-bottom: none;
}

.typst-content-link:hover {
    background-color: inherit;
    color: inherit;
}

.typst-html-semantics {
  position: absolute;
  z-index: 2;
  width: calc(var(--data-page-width, 100%) * var(--typst-dom-scale));
  height: calc(var(--data-page-height) * var(--typst-dom-scale));
  color: transparent;
  font-family: monospace;
  white-space: pre;
}

.typst-html-semantics span {
  transform-origin: left;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
}

.typst-content-hint {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.typst-html-semantics a {
  position: absolute;
  display: inline-block;
}

/* set transparent itself */
.typst-content-group {
  pointer-events: visible;
}

.typst-html-semantics span::-moz-selection {
  color: transparent;
  background: #7db9dea0;
}

.typst-html-semantics span::selection {
  color: transparent;
  background: #7db9dea0;
}

.typst-html-semantics *::-moz-selection {
  color: transparent;
  background: transparent;
}

.typst-html-semantics *::selection {
  color: transparent;
  background: transparent;
}

.typst-content-fallback {
  color: transparent;
  background: transparent;
}

.pseudo-link,
.typst-text {
  pointer-events: none;
}
.outline_glyph path,
  path.outline_glyph {
    fill: var(--glyph_fill);
    stroke: var(--glyph_stroke);
  }
  
  .outline_glyph path,
  path.outline_glyph {
    transition: 0.2s fill stroke;
  }
  .hover .typst-text {
    --glyph_fill: #66bab7;
    --glyph_stroke: #66bab7;
  }
  
  .typst-jump-ripple,
  .typst-debug-react-ripple {
    width: 0;
    height: 0;
    background-color: transparent;
    position: absolute;
    border-radius: 50%;
  }
  .typst-jump-ripple {
    border: 1px solid #66bab7;
  }
  .typst-debug-react-ripple {
    border: 1px solid #cb1b45;
  }
  @keyframes typst-jump-ripple-effect {
    to {
      width: 10vw;
      height: 10vw;
      opacity: 0.01;
      margin: -5vw;
    }
  }
  @keyframes typst-debug-react-ripple-effect {
    to {
      width: 3vw;
      height: 3vw;
      opacity: 0.01;
      margin: -1.5vw;
    }
  }
  
  .focus .typst-text {
    --glyph_fill: var(--sidebar-active);
  }