.siv-modal-open {
  overflow: hidden;
}

.siv-modal {
  background-color: rgba(0, 0, 0, 0.432);
  position: fixed;
  inset: 0;
  z-index: 100;
}

.siv-modal-inner {
  width: 100%;
  height: 100%;
  display: relative;
}

.siv-image-container {
  position: absolute;
  inset: 0;
  transition: transform;
  transition-duration: 200ms;
  user-select: none;
  display: flex;
}

.siv-image {
  width: 100%;
  flex-shrink: 0;
  background-color: green;
  z-index: 10;
  transition: opacity;
  transition-duration: 200ms;
  transform-origin: 0 0;
  position: absolute;
}

.siv-loading-indicator {
  border-top: solid 2px white;
  border-right: solid 2px white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-sizing: border-box;
  animation-name: siv-loading-indicator-spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes siv-loading-indicator-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.siv-close-button,
.siv-left-button,
.siv-right-button {
  position: absolute;
  width: 3em;
  height: 3em;
  margin: 8px;
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(10, 10, 10, 0.4);
  z-index: 10;
}

.siv-left-button,
.siv-right-button {
  top: 50%;
  transform: translate(0%, -50%);
}

.siv-left-button:disabled,
.siv-right-button:disabled {
  display: none;
}

.siv-left-button {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="white" d="M228 128a12 12 0 0 1-12 12H69l51.52 51.51a12 12 0 0 1-17 17l-72-72a12 12 0 0 1 0-17l72-72a12 12 0 0 1 17 17L69 116h147a12 12 0 0 1 12 12" /></svg>');
  left: 0;
}

.siv-right-button {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="white" d="m224.49 136.49l-72 72a12 12 0 0 1-17-17L187 140H40a12 12 0 0 1 0-24h147l-51.49-51.52a12 12 0 0 1 17-17l72 72a12 12 0 0 1-.02 17.01" /></svg>');
  right: 0;
}

.siv-close-button {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z" /></svg>');
  top: 0;
  right: 0;
}