/* Media elements */
div.media {
  display: flex;
  justify-content: center;
}

/* TODO: Check the old class vocabulary for alignment. */
div.media[data-align="left"] {
  justify-content: flex-start;
}

div.media[data-align="right"] {
  justify-content: flex-end;
}

/* Figures can not be used in inline context, using spans instead. */
span.figure,
figure {
  width: 100%;
}

/* Figcaptions can not be used in inline context, using spans instead. */
span.figcaption,
figcaption {
  font-size: 80%;
  font-style: italic;
  text-align: center;

  background-color: var(--c4);
}

/* Inline media blocks are rendered as spans, but use a block context inside. */
span.media {
  display: inline-block;
  vertical-align: bottom;
}

/* Figure spans behave like a block. */
span.figure {
  display: block;
}

/* Figcaption spans behave like a block. */
span.figcaption {
  display: block;
}

/* Get rid of the annoying bottom gap. */
img,
iframe,
video,
object,
canvas,
svg,
pre {
  vertical-align: bottom;
}

/* Default sizes for inline media elements without intrinsic aspect ratio. */
span.figure > :is(span.pre, object, iframe) {
  width: 200px;
  height: 100px;
}

/* Default sizes for block media elements without intrinsic aspect ratio. */
figure > :is(object, iframe) {
  width: 100%;
  height: 400px;
  max-width: 100%;
}

/* Default width. Always try to fill the frame. */
figure > :is(pre, img, video, div.sourceCode) {
  width: 100%;
  margin: 0;
  max-width: 100%;
  object-fit: contain;
}

/* Default width for embedded SVG. */
.svg.embedded svg {
  width: 100%;
  height: auto;
}

/* Line blocks */
figure.lineblock > div.lineblock {
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5em;
  justify-items: center;
}

/* Fullscreen iframes */

div.fs-container {
  margin: auto;
  border: 0px;
  padding: 0px;
  position: relative;
}

div.fs-container:fullscreen {
  overflow-x: hidden;
  overflow-y: auto;
  background-color: white;
  padding: 20px;
}

/* needed for mobile Safari */
*:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

div.fs-container > iframe {
  box-sizing: border-box;
}

div.fs-container:fullscreen > iframe {
  border: none;
}

button.fs-button {
  z-index: 100;
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
  outline: none;
  font-size: 20px;
  width: 30px;
  height: 30px;
  padding: 2px;
  border: none;
  border-radius: 4px;
  opacity: 0.5;
  color: var(--icon-inactive-color);
  background-color: rgba(255, 255, 255, 0.5);
}

div.fs-container:hover > button.fs-button {
  opacity: 0.75;
}

div.fs-container > button.fs-button:hover {
  opacity: 1;
  color: var(--icon-active-color);
  background-color: rgba(255, 255, 255, 0.8);
}

/* this prevents responsive charts from continuously resizing */
div.chart-container > canvas {
  width: 100% !important;
  height: 100% !important;
}
div.chart-container {
  overflow: hidden;
}
