/* Vertically center slides (override Reveal's mechanism, see whiteboard.js) */
.reveal .slides section.center .decker {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.reveal .slides section.center .alignment {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* adjust Reveal slide container when we need a scrollbar */
.reveal .slides.needScrollbar {
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;

  /* enable scrolling */
  pointer-events: auto;

  /* enable touch navigation */
  touch-action: pan-y;
  -webkit-overflow-scrolling: auto;
}

/* the animation for indicating additional pages on the bottom */
@keyframes pulseBorder {
  from {
    border-bottom: 5px dotted var(--background-color);
  }
  to {
    border-bottom: 5px dotted var(--icon-active-color);
  }
}

/* activate pulsing border indiciator */
.reveal .slides.pulseBorder {
  animation-name: pulseBorder;
  animation-iteration-count: 6;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-duration: 0.5s;
  border-bottom: 5px dotted var(--background-color);
}

/* have to show overflow when in Reveal's overview mode */
.reveal.overview .slides {
  overflow: visible;
}

/* animate scroll down */
.reveal .slides.animateScroll {
  scroll-behavior: smooth;
}

/* style for SVG whiteboard pages */
.reveal svg.whiteboard {
  border: none;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 255;
}

/* children of SVG (strokes, grid) should not get pointer events */
.reveal svg.whiteboard * {
  pointer-events: none;
}

/* default style for strokes (up to color and width) */
.reveal svg.whiteboard > path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reveal svg.whiteboard > path.laser {
  stroke-width: 3px !important;
  stroke: red !important;
  filter: drop-shadow(0 0 3px red) !important;
  transition: opacity 0.5s linear 2s;
}

button.whiteboard {
  color: var(--icon-inactive-color);
}
button.whiteboard[data-active="true"] {
  color: var(--icon-active-color);
}

button.whiteboard.checkbox {
  border-radius: 15%;
}
button.whiteboard.radiobutton {
  border-radius: 100%;
}

button.whiteboard.checkbox[data-active="false"],
button.whiteboard.radiobutton[data-active="false"] {
  border: 2px solid var(--icon-inactive-color);
}
button.whiteboard.checkbox[data-active="true"],
button.whiteboard.radiobutton[data-active="true"] {
  border: 2px solid var(--icon-active-color);
}

/* container for whiteboard tools */
#whiteboardButtons {
  padding: 2px;
  margin: 0;
  z-index: 256;
  border-radius: 8px;
  border: 2px solid transparent;
  background: transparent;
  display: flex;
  flex-direction: column;
}

#whiteboardButtons.active.visible {
  background: var(--whiteboard-background-color);
  border: 1px solid var(--whiteboard-border-color);
}

html.print-pdf #whiteboardButtons {
  display: none;
}

/* toggle whiteboard buttons with .whiteboardActive on container */
/* buttons are not shown... */
#whiteboardButtons > button {
  display: none;
  cursor: pointer;
}

#whiteboardButtons.active.visible > button {
  display: inline-block;
}

#whiteboardButtons:not(.active) > #whiteboardButton {
  border-color: transparent;
  display: inline-block;
}

#whiteboardButtons.active.visible > #whiteboardButton {
  display: inline-block;
  border: 2px solid var(--icon-active-color);
  color: var(--icon-active-color);
  opacity: 1;
}

#whiteboardButtons.active.visible > #whiteboardButton:hover {
  color: var(--icon-hover-color);
}

#whiteboardButtons.active.visible > .whiteboard:hover {
  color: var(--icon-hover-color);
}

#whiteboardButtons.active > button.radiobutton[data-active="true"] {
  display: inline-block;
}

/* container for color picker */
#whiteboardColorPicker {
  position: absolute;
  top: 50%;
  right: auto;
  left: 2.5em;
  bottom: auto;
  padding: 5px;
  margin: 0;
  z-index: 40;
  border: 1px solid var(--whiteboard-border-color);
  border-radius: calc(var(--icon-size) * 0.5);
  background: var(--whiteboard-background-color);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  visibility: hidden;
  transform: translateY(-50%);
}

#whiteboardColorPicker.active {
  visibility: visible;
}

#whiteboardColorPicker button.whiteboard {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  color: var(--shade6);
}

#whiteboardColorPicker button.whiteboard:hover {
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 100%;
}

/* MacOS only shows scrollbars when they are used.
   This prevents dragging them with the Wacom pen (w/o using the mouse).
   The following setting show the scrollbar when the whiteboard is active.
   Only works on WebKit browswers (Chrome, Safari), not on Firefox. */
.reveal .slides.whiteboard-active::-webkit-scrollbar {
  width: 9px;
}
.reveal .slides.whiteboard-active::-webkit-scrollbar-track {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
.reveal .slides.whiteboard-active::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
.reveal .slides.whiteboard-active::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* prevent accidential text selection through whiteboard
   (still don't understand when/why/how this happens) */
.reveal .slides.whiteboard-active {
  user-select: none;
}

:root.hide-annotations svg.whiteboard {
  display: none !important; /* Whiteboard SVGs get a manual "display: block;" added to them by the plugin. */
}