div.decker-anchor {
  z-index: 100;
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  touch-action: none;
}

div.top-left-anchor {
  flex-direction: row;
  top: 0px;
  left: 0px;
  align-items: unset;
}

div.top-right-anchor {
  flex-direction: row;
  top: 0px;
  right: 0px;
}

div.bottom-left-anchor {
  flex-direction: row;
  bottom: 0px;
  left: 0px;
}

div.bottom-center-anchor {
  flex-direction: row;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

div.bottom-right-anchor {
  flex-direction: column;
  bottom: calc(2ex + 0px); /* Above the Navigation, needs tweaking */
  right: 0px;
}

.decker-anchor > button {
  color: var(--icon-inactive-color);
}

/* @media screen and (max-width: 756px) {
    .decker-anchor button {
        font-size: calc(var(--icon-size) * 2);
    }
} */

.decker-anchor > button:hover {
  color: var(--icon-hover-color);
}

.decker-anchor > button:active {
  color: var(--icon-active-color);
}

.slide-in-left {
  z-index: 110;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 100%;
  transition: transform 0.5s;
}

.slide-in-left[inert] {
  transform: translate(-100%);
}

.slide-in-right {
  z-index: 110;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 100%;
  transition: transform 0.5s;
}

.slide-in-right[inert] {
  transform: translate(100%);
}

@media print {
  div.decker-anchor {
    display: none;
  }
}
