.container {
  position: absolute;
  z-index: 2;
}

#left {
  top: 50vh;
  top: 50dvh;
  transform: translateY(-50%);
  left: 0;
}

#left button {
  margin-left: var(--arrow-offset, 0);
}

#right {
  top: 50vh;
  top: 50dvh;
  transform: translateY(-50%);
  right: 0;
}

#right button {
  margin-right: var(--arrow-offset, 0);
}

.container button {
  width: var(--arrow-size, 40px);
  /* height: var(--arrow-size, 40px); */
  height: 40vh;
  height: 40dvh;
  border-radius: var(--layout-radius);
  pointer-events: auto;
  box-sizing: border-box;
  padding: 5px;

  background-color: var(--theme-background);
  border: 1px solid var(--theme-text);
}

.container .viewportLarge {
  background-color: transparent;
  border: none;
}

.container button:disabled {
  pointer-events: none;
}

.container .visuallyHidden {
  opacity: 0;
}

.container button[data-focused] {
  outline: 2px solid var(--theme-focus);
  opacity: 1;
}

.container button[data-disabled] {
  opacity: 0;
}

/* Exclude taps as they will eventually apply hover state */
@media (hover: hover) and (pointer: fine) {
  .container button:not(:disabled):hover {
    opacity: 1;
    transition: all 200ms;
  }
}

.container button svg {
  fill: var(--theme-text);
  stroke: var(--theme-text);
  width: 100%;
  height: 100%;
}