.body {
  -epub-writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  direction: ltr;
  /* direction: rtl; */
  writing-mode: horizontal-tb;
  position: relative;
  margin: 0;

  max-width: 100vw;
  max-height: 100vh;
  overflow: clip;
  display: flex;

  --z-cover: 9;
ipub-cover > dialog[open] {
  --ipub-accent-color: #fff;
  z-index: var(--z-cover);
  background-color: transparent;
  border: none;

  display: inline-block;
  position: absolute;
  backdrop-filter: blur(1rem);
  background-image: linear-gradient(
    rgba(from var(--ipub-accent-color) r g b / 0) 0%,
    rgba(from var(--ipub-accent-color) r g b / 0.5)
      calc(100% + calc(var(--ipub-fade, 50%) * -1))
  );
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ipub-body {
  max-width: 100%;
  max-height: 100%;

  position: relative;

  display: flex;
  flex-direction: column;

  overflow: scroll;
  &:has(ipub-cover > dialog[open]) {
    overflow: hidden;
  }

  --ipub-padding: 0%;
  --ipub-gap: 0%;
  --ipub-padding-x: var(--ipub-padding, 0%);
  --ipub-padding-y: var(--ipub-padding, 0%);
  --ipub-padding-t: var(--ipub-padding-y, 0%);
  --ipub-padding-r: var(--ipub-padding-x, 0%);
  --ipub-padding-b: var(--ipub-padding-y, 0%);
  --ipub-padding-l: var(--ipub-padding-x, 0%);

  & > article,
  & > main,
  & > section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    & > *:first-child:not(ipub-background),
    & > ipub-background:first-child + *:first-of-type {
      margin-top: var(--ipub-padding-t);
    }

    & > *:not(ipub-background) {
      margin-top: calc(var(--ipub-gap) / 2);
      margin-right: var(--ipub-padding-r);
      margin-left: var(--ipub-padding-l);
      margin-bottom: calc(var(--ipub-gap) / 2);
    }

    & > *:last-child:not(ipub-background),
    & > ipub-background:last-child + *:last-of-type {
      margin-bottom: var(--ipub-padding-b);
    }
  }
}

ipub-background {
  --ipub-width: 100vw;
  --ipub-height: 100vh;

  &[sticky] {
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    position: sticky;
    align-self: start;
  }

  &[fade] img {
    /* For testing */
    /* background-image: linear-gradient( */
    /*   rgba(266, 0, 0, 1) 0%, */
    /*   rgba(0, 266, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1)), */
    /*   rgba(266, 0, 266, 1) 100% */
    /* ) !important; */
    --mask: linear-gradient(
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1))
    ) !important;
    /* background-image: var(--mask); */
    mask-image: var(--mask);
    -webkit-mask-image: var(--mask);
  }

  & > picture {
    display: block;
    width: var(--ipub-width);
    height: var(--ipub-height);
    & > img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  /* Support standalone img element */
  & > img {
    display: block;
    object-fit: cover;
    width: var(--ipub-width);
    height: var(--ipub-height);
  }
}

ipub-image {
  position: relative;
  display: block;
  flex-direction: column;

  width: var(--ipub-width, unset);
  height: var(--ipub-height, unset);

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

ipub-interaction {
  position: absolute;

  --ipub-x: 0px;
  --ipub-y: 0px;
  --ipub-size: 10%;
  --ipub-width: var(--ipub-size, unset);
  --ipub-height: unset;
  --ipub-ratio: 1/1;

  left: var(--ipub-x);
  top: var(--ipub-y);

  width: var(--ipub-width);
  height: var(--ipub-height);
  aspect-ratio: var(--ipub-ratio, unset);
  transform: translate(var(--ipub-offset-x, -50%), var(--ipub-offset-y, -50%));

  & > * {
    display: block;
    width: 100%;
    height: 100%;

    border-radius: var(--ipub-radius, unset);

    /* 
    * The opacity would be, by default, zero. Here it is 0.3 for easier debugging and
    * showing of the example ebook 
    */
    background-color: red;
    opacity: 0.3;
  }
  &[circle] {
    --ipub-radius: 100%;
  }
}