.fullscreen-container {
  display: none;
  background: var(--bulma-background);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  overflow: scroll;
}

.fullscreen-container.visible {
  display: block;
  .fullscreen-container__open {
    display: none;
  }
  .fullscreen-container__close {
    display: inline-block;
  }
}

.fullscreen-container.visible:hover {
  .fullscreen-container__toolbar {
    visibility: visible;
    opacity: 1;
    z-index: 101;
  }
}

.fullscreen-container__toolbar {
  display: inline-block;
  position: absolute;
  right: 1em;
  top: 1em;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s linear;
  .button {
    margin-left: calc(var(--bulma-button-padding-horizontal) / 2);
    box-shadow: var(--bulma-shadow);
  }
}

.fullscreen-container__open,
.fullscreen-container__close {
  display: none;
}