/*********************************************
* Variables *
*********************************************/
:root {
  --note-title-color: rgba(68,138,255,.1);
  --note-border-color: #007bff;
  --grey-border-color: #ccc;
}

/*********************************************
* Exercise *
*********************************************/

/* apply a zoom to the iframe using a class */
iframe.grasple {
  transform: scale(var(--scale-factor));
  transform-origin : 0 0;
  width: calc(1/var(--scale-factor) * 100%);
  height: calc(1/var(--scale-factor) * 100%);
}

div.grasplecontainer {
  --scale-factor: 0.7;
  width : 100%;
  height : 400px;
  overflow: hidden;
}

div.grasple-exercise {
  border-color: var(--note-border-color);
  background-color: var(--note-title-color);
}

div.grasple-exercise p.admonition-title {
  background-color: var(--note-title-color);
}

/* Remove content box */
div.grasple-exercise p.admonition-title::before {
  content: "\f303";
}

details.dropdown summary::marker {
  content: "\f107 "; /* fa-angle-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* 900 = solid style */
  display: inline-block;
  transition: transform 0.3s ease;
}

.dropdown[open] summary::marker {
  content: "\f106"; /* fa-angle-up */
}

/* Hide the image on screen */
@media screen {
  div.side-by-side.docutils.container img {
    display: none;
  }
}

/* Show the image when printing */
@media print {
  div.gasple.admonition .side-by-side.docutils.container img {
    display: initial;
  }
  div.grasple.admonition details.dropdown {
    display: none;
  }
  
  div.grasple.admonition section iframe {
    display: none;
  }
}

/* Show the dropdown by default */
div.grasple-exercise details.dropdown {
  display: block;
}

.side-by-side {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qr-code-container {
  display: none;
  flex-basis: 20%;
  max-width: 20%;
}

.description-container {
  flex-basis: 80%;
  max-width: 80%;
}

/* full screen admonition */
.admonition.fullscreenable.fullscreen {
  position: fixed;
  top: 2.5rem;
  left: 0.5rem;
  width: calc(100vw - 2rem);
  height: calc(100vh - 3rem);
  max-width: 100%;
  z-index: 10000;
  overflow: auto;
  margin: 0;
}
.fullscreenbackground {
  display: none; /* hidden by default */
  position: fixed;
  top: 2.5rem;
  left: 0.5rem;
  width: calc(100vw - 2rem);
  height: calc(100vh - 3rem);
  max-width: 100%;
  z-index: 9998;
  overflow: auto;
  margin: 0;
  background-color: var(--pst-color-background);
}
.fullscreenbackground.active {
  display: block;
}

/* Styling for the full screen button */
.fullscreen-btn {
  color: var(--pst-color-text-base);
  background: none;
  border: none;
  font-size: 1em;
  cursor: pointer;
  padding: 0.2em 0.5em;
  z-index: 10001;
}