.books {
    inline-size: 100%;
}

.book {
    --cover-height: auto;
    --space: clamp(2ch, 10%, 6ch);

    container-type: unset;
    column-gap: calc(var(--space) / 2);
    display: grid;
    grid-template-columns: minmax(25%, 20dvw) 1fr;
    inline-size: 100%;
    padding-inline: var(--space);

    @media (max-width: 70ch) {
        grid-template-columns: 1fr;
        padding-inline: var(--inline-space);
    }
}

.book__cover {
    background-color: var(--color-bg);
    border-radius: 0.3em;
    box-shadow: 0 0 0 1px var(--color-subtle-dark);
    margin: auto;
    transition: background 300ms ease;

    background: url("../covers/default.jpg") no-repeat center;
    background-size: cover;
    
    @media (min-width: 70ch) {
        max-block-size: var(--cover-height, 75vh);
    }
}

.btn--circle:has(#book_theme_white:checked) {
    img.checked {
        filter: invert(0);
    }

    @media (prefers-color-scheme: dark) {
        img.checked {
            filter: invert(0);
        }
    }
}

.book__cover-wrapper {
    text-shadow:
        -1px -1px 0 #000,
        0px -1px 0 #000,
        1px -1px 0 #000,
        -1px 0px 0 #000,
        1px 0px 0 #000,
        -1px 1px 0 #000,
        0px 1px 0 #000,
        1px 1px 0 #000;
    color: var(--color-subtle-light);
    display: inline-grid;
    margin: auto;
    place-items: start;

    >* {
        grid-area: 1 / 1;
    }

    @media (max-width: 70ch) {
        .book & {
            font-size: 3em;
        }
    }

    @media (min-width: 150ch) {
        .book & {
            font-size: 1.5em;
        }
    }

    .theme--white & .book__title {
        color: var(--color-always-black);
    }
}


.book__sidebar {
    inset-block-start: var(--block-space);
    position: sticky;
    z-index: 1;
}

.book__title {
    font-weight: 750;
}

.book__toolbar {
    inset-block-start: 0;
    z-index: 2;
}

.book-toolbar {
    display: flex;
    gap: 10px;
    margin: 10px;
}

.book-toolbar input {
    display: none;
}