$scrollbarHeight: 34px;

img {
  user-select: none;
}

.image-container {
  text-align: center;
  align-items: center;

  &.full-width {
    height: calc(var(--vh)*100);
    display: grid;
  }

  &.full-height {
    height: calc(100vh); // We need to  - $scrollbarHeight when there is a horizontal scroll on macos
    display: flex;
    align-content: center;
  }

  &.original {
    height: 100vh;
    display: grid;
  }

  .full-height {
    width: auto;
    margin: auto;
    max-height: calc(var(--vh)*100);
    overflow: hidden; // This technically will crop and make it just fit
    vertical-align: top;
      &.wide {
        height: 100vh;
    }
  }

  .original {
    align-self: center;
    width: auto;
    margin: 0 auto;
    vertical-align: top;
  }

  .full-width {
    width: 100%;
    margin: 0 auto;
    vertical-align: top;
    max-width: fit-content;
  }

  .fit-to-screen.full-width {
    width: 100%;
    max-height: calc(var(--vh)*100);
  }
}


.bookmark-effect {
    animation: bookmark 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.highlight {
  background-color: var(--manga-reader-next-highlight-bg-color) !important;
  animation: fadein .5s both;
  backdrop-filter: blur(10px);
}
.highlight-2 {
  background-color: var(--manga-reader-prev-highlight-bg-color) !important;
  animation: fadein .5s both;
  backdrop-filter: blur(10px);
}


::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  box-shadow:
      0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
      0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
      0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
      0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%);
}

@supports (-moz-appearance:none) {
  ::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before {
    box-shadow:
      0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%),
      0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%),
      0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%),
      0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%),
      0px 0px 1px 0.5px rgb(0 0 0 / 43%);
  }
}