/*
 * Stylesheet: Book
 * Applies to editor and front end
 */

.block__book {

  clear: both;

  height: 100%;

  width: 100%;

  --tw-text-opacity: 1;

  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.block__book .image-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 2px;

  --tw-bg-opacity: 1;

  background-color: rgb(246 246 246 / var(--tw-bg-opacity));

  background-color: var(--book-cover-bg-color);
  border: var(--book-cover-bg-outline);
}

.block__book .api-image-wrapper,
.modal .api-image-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}

.block__book .api-image-wrapper.regular-book,
.modal .api-image-wrapper.regular-book {

  aspect-ratio: 81/100;
}

.block__book .api-image-wrapper.regular-book .api-image,
.modal .api-image-wrapper.regular-book .api-image {

  width: 60%;

  --tw-shadow: 10px 13px 25px rgb(0 0 0 / 20%);

  --tw-shadow-colored: 10px 13px 25px var(--tw-shadow-color);

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.block__book .api-image-wrapper .loading-circle {

  position: absolute;

  --tw-scale-x: .8;

  --tw-scale-y: .8;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

  .block__book .api-image-wrapper .loading-circle {

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.block__book .api-image-wrapper .is-loading {

  opacity: 0.75;

  --tw-blur: blur(8px);

  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@keyframes rotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.block__book .view-details {

  position: absolute;

  left: 50%;

  top: 50%;

  --tw-translate-x: -50%;

  --tw-translate-y: -50%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

  white-space: nowrap;

  opacity: 0;

  transition-property: all;

  transition-duration: 300ms;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 1px 3px rgb(0 0 0 / 29%);
}

.block__book .book--inner.with-hover:hover .api-image {

  --tw-scale-x: 1.03;

  --tw-scale-y: 1.03;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

  transition-property: all;

  transition-duration: 300ms;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.block__book .book--inner.with-hover:hover .view-details {

  opacity: 1;

  transition-property: all;

  transition-duration: 300ms;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.block__book .book--inner.with-hover .view-details:focus {

  opacity: 1;
}

.block__book .book--inner.with-hover:hover .book-details .book-details__title {

  text-decoration-line: underline;

  transition-property: all;

  transition-duration: 300ms;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.block__book .book--inner:hover .overlay, .block__book .book--inner:focus-within .overlay {

  --tw-bg-opacity: 1;

  background-color: rgb(0 0 0 / var(--tw-bg-opacity));

  opacity: 0.5;

  transition-property: all;

  transition-duration: 300ms;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Audio book */

.block__book .book--inner .audio-book {

  max-width: 250px;
}

.block__book .book--inner .audio-book .image-wrapper {

  position: relative;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-width: 1px;

  --tw-border-opacity: 1;

  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.block__book .book--inner .audio-book .icon-wrapper {

  display: flex;

  min-height: 65px;

  align-items: center;

  justify-content: space-between;

  padding: 0.625rem;
}

.block__book .book--inner .audio-book .icon-wrapper .icon {

  cursor: pointer;

  padding-left: 0.625rem;

  padding-right: 0.625rem;
}

.block__book .book--inner .audio-book .icon-wrapper .icon:hover svg {

  fill: #767676;
}

.block__book .book--inner .audio-book .icon-wrapper .icon:hover g {

  stroke: #767676;
}

.block__book .book--inner .audio-book .player-progress {

  height: 0px;

  width: 100%;

  transition-property: all;

  transition-duration: 300ms;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.block__book .book--inner .audio-book .player-progress.playing {

  height: 0.25rem;
}

progress[value]::-webkit-progress-bar,
progress[value] {

  --tw-bg-opacity: 1;

  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
}

progress::-moz-progress-bar {

  --tw-bg-opacity: 1;

  background-color: rgb(250 100 0 / var(--tw-bg-opacity));
}

progress::-webkit-progress-bar {

  --tw-bg-opacity: 1;

  background-color: rgb(250 100 0 / var(--tw-bg-opacity));
}

progress::-webkit-progress-value {

  --tw-bg-opacity: 1;

  background-color: rgb(250 100 0 / var(--tw-bg-opacity));
}