html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.lumora-pdf-viewport {
    position: relative;
    container-type: inline-size;
    color-scheme: light dark;
}

.lumora-pdf-page {
    position: absolute;
    inset: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.lumora-pdf-page canvas {
    display: block;
}

.lumora-pdf-page--paginated {
    bottom: 48px;
}

.lumora-pdf-navigation {
    position: absolute;
    inset: auto 0 0;
    box-sizing: border-box;
    height: 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 4px;
    border-top: 1px solid light-dark(#ded5e9, #514263);
    color: light-dark(#443654, #e5d8f5);
    font: 500 14px/1.2 system-ui, sans-serif;
}

.lumora-pdf-navigation[hidden] {
    display: none;
}

.lumora-pdf-counter {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.lumora-pdf-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: light-dark(#4b1d95, #dcbcff);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.lumora-pdf-arrow--previous::before,
.lumora-pdf-arrow--next::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.lumora-pdf-arrow--previous {
    justify-self: start;
}

.lumora-pdf-arrow--previous::before {
    transform: translateX(1px) rotate(-135deg);
}

.lumora-pdf-arrow--next {
    justify-self: end;
}

.lumora-pdf-arrow--next::after {
    transform: translateX(-1px) rotate(45deg);
}

.lumora-pdf-arrow:not(:disabled):hover {
    background: light-dark(#f0e7fd, #392453);
}

.lumora-pdf-arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.lumora-pdf-arrow:disabled {
    opacity: 0.45;
    cursor: default;
}

@container (min-width: 640px) {
    .lumora-pdf-page--paginated {
        inset-inline: 56px;
        bottom: 24px;
    }

    .lumora-pdf-navigation {
        position: static;
        display: block;
        border: 0;
    }

    .lumora-pdf-counter {
        position: absolute;
        inset: auto 56px 0;
        line-height: 24px;
    }

    .lumora-pdf-arrow {
        position: absolute;
        top: min(calc((100% - 24px) / 2), calc(var(--lumora-pdf-page-height, 100%) / 2));
        transform: translateY(-50%);
        width: 44px;
        padding: 0;
        border-color: light-dark(#d8ccea, #514263);
        border-radius: 50%;
    }

    .lumora-pdf-arrow span {
        display: none;
    }

    .lumora-pdf-arrow--previous {
        left: 6px;
    }

    .lumora-pdf-arrow--next {
        right: 6px;
    }
}