#library #note-entries {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

#library .note-entry {
    padding: 10px;
}

#library .note-entry.collapsed {
    border: 2px dashed var(--gray);
}

#library .note-entry:not(.collapsed) {
    border: 2px solid black;
}

#library .note-entry>* {
    margin: 5px 0;
}

#library .note-entry .title-row {
    display: flex;
    justify-content: space-between;
}

#library .note-entry .title {
    font-weight: bold;
    color: var(--blue);
    margin: 0;
    display: inline-block; /* remove underline */
}

#library .note-entry .expander {
    color: var(--blue);
    background-color: transparent;
    border: none;
}

#library .note-entry.collapsed .expander .prompt-open {
    display: initial;
}

#library .note-entry.collapsed .expander .prompt-close {
    display: none;
}

#library .note-entry:not(.collapsed) .expander .prompt-open {
    display: none;
}

#library .note-entry:not(.collapsed) .expander .prompt-close {
    display: initial;
}

#library .note-entry.collapsed .topics {
    display: none;
}

#library .note-entry:not(.collapsed) .topics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#library .note-entry .topics .topic {
    border: 2px solid black;
    padding: 0 5px;
}

#library .note-entry .description {
    margin: 20px 0;
    word-break: break-word;
    text-wrap: wrap;
}

#library .note-entry.collapsed .description {
    max-height: 1lh;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#library .note-entry:not(.collapsed) .details {
    width: fit-content;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: auto auto;
    column-gap: 5px;
    align-items: center;
}

#library .note-entry:not(.collapsed) .details .short-detail {
    display: none;
}

#library .note-entry:not(.collapsed) .details .long-detail {
    display: contents;
}

#library .note-entry.collapsed .details {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#library .note-entry.collapsed .details, #library .note-entry.collapsed .details>* {
    word-break: break-all;
}

#library .note-entry.collapsed .details .short-detail {
    display: flex;
    align-items: center;
    gap: 5px;
}

#library .note-entry.collapsed .details .long-detail {
    display: none;
}

#library .note-entry .actions {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

#library .note-entry .rating-buttons {
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#library .note-entry .rating-buttons label {
    width: 1lh;
    height: 1lh;
    border: 2px solid black;
    display: grid;
    place-content: center;
}

#library .note-entry .rating-buttons label:hover {
    cursor: pointer;
}

/* hide the radio thing that usually comes with <input type="radio"> */
#library .note-entry .rating-buttons label input[type="radio"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: white;
    /* Not removed via appearance */
    margin: 0;
}

/* style the <input>'s label differently if it is selected */
#library .note-entry .rating-buttons label:has(input[type="radio"]:checked) {
    background-color: var(--blue);
    color: white;
}

#library .note-entry .action-buttons {
    margin: 5px 0;
    display: flex;
    gap: 5px;
}

/*
    if view not collapsed, then make div.action-buttons a
    flex container to hold all the buttons
*/
#library .note-entry:not(.collapsed) .action-buttons {
    width: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
}

#library .note-entry .action-buttons button {
    display: grid;
    align-items: center;
    gap: 5px;
    border: 2px solid black;
    background-color: transparent;
}

/* allocate space for text if view not collapsed */
#library .note-entry:not(.collapsed) .action-buttons button {
    padding: 0 5px;
    grid-template-areas: "icon text";
}

/* remove unused space for text if view collapsed */
#library .note-entry.collapsed .action-buttons button {
    width: 1lh;
    height: 1lh;
    place-content: center;
    grid-template-areas: "icon";
}

/* hide button label if view collapsed */
#library .note-entry.collapsed .action-buttons button span {
    display: none;
}

#library .note-entry .action-buttons button svg {
    grid-area: icon;
}

#library .note-entry .action-buttons button span {
    grid-area: text;
}

#library .note-entry .action-buttons button.add-to-reading-list {
    color: var(--blue);
    border: 2px solid var(--blue);
}

#library .note-entry .action-buttons button.report {
    color: var(--red);
    border: 2px solid var(--red);
}

/*
    this div is hooked to an IntersectionObserver in library.js
    to load new pages once it comes into view. this div is always
    placed at or near the bottom of the page.
*/
#library #note-loader {
    width: 100%;
    padding: 10px;
    text-align: center;
}

#library #note-loader::after {
    content: "Loading...";
}

#library #note-loader.finished::after {
    content: "No more notes to show";
}