[data-figure-zoom-trigger] {
  cursor: zoom-in;
  position: relative;
}

[data-figure-zoom-trigger]:focus-visible {
  border-radius: .25rem;
  outline: 3px solid rgba(13, 110, 253, .45);
  outline-offset: 3px;
}

.figure-zoom-indicator {
  align-items: center;
  background: rgba(31, 69, 103, .9);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: .75rem;
  height: 1.8rem;
  justify-content: center;
  position: absolute;
  right: .45rem;
  top: .45rem;
  width: 1.8rem;
  z-index: 2;
}

.figure-zoom-modal .modal-dialog {
  max-width: min(68rem, calc(100vw - 2rem));
}

.figure-zoom-modal__canvas {
  align-items: center;
  background: #fff;
  display: flex;
  justify-content: center;
  min-height: min(42rem, calc(100vh - 9rem));
  overflow: auto;
  padding: 1rem;
}

.figure-zoom-modal__canvas > svg {
  display: block;
  height: auto !important;
  max-height: calc(100vh - 10rem);
  max-width: 100%;
  width: min(100%, 60rem) !important;
}

@media (max-width: 575.98px) {
  .figure-zoom-modal .modal-dialog {
    margin: .5rem;
    max-width: calc(100vw - 1rem);
  }

  .figure-zoom-modal__canvas {
    min-height: calc(100vh - 7.5rem);
    padding: .5rem;
  }

  .figure-zoom-modal__canvas > svg {
    max-height: calc(100vh - 8.5rem);
  }
}