.bookshelf-dropdown {
    position: relative;

    width: 100%;
}

.bookshelf-dropdown__trigger {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    width: 100%;

    padding:
        .875rem
        1rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-surface);

    color: var(--color-text);

    font: inherit;

    font-weight: 600;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.bookshelf-dropdown__trigger:hover {
    border-color: var(--color-accent);
}

.bookshelf-dropdown__trigger:focus-visible {
    outline: none;

    border-color: var(--color-accent);

    box-shadow:
        0 0 0 3px
        rgba(
            59,
            130,
            246,
            .15
        );
}

.bookshelf-dropdown__label {
    display: flex;

    align-items: center;

    gap: .5rem;

    min-width: 0;
}

.bookshelf-dropdown__chevron {
    flex-shrink: 0;

    font-size: .8rem;

    transition:
        transform .2s ease;
}

.bookshelf-dropdown.is-open
.bookshelf-dropdown__chevron {
    transform:
        rotate(180deg);
}

.bookshelf-dropdown__menu {
    position: absolute;

    top: calc(
        100% + .5rem
    );

    left: 0;
    right: 0;

    z-index: 50;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-surface);

    box-shadow:
        var(--shadow-soft);

    overflow: hidden;
}

.bookshelf-dropdown__list {
    margin: 0;
    padding: .5rem 0;

    list-style: none;
}

.bookshelf-dropdown__option,
.bookshelf-dropdown__remove,
.bookshelf-dropdown__link {
    display: flex;

    align-items: center;

    gap: .75rem;

    width: 100%;

    padding:
        .75rem
        1rem;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    text-align: left;

    text-decoration: none;

    cursor: pointer;
}

.bookshelf-dropdown__option:hover,
.bookshelf-dropdown__remove:hover,
.bookshelf-dropdown__link:hover {
    background:
        rgba(
            0,
            0,
            0,
            .04
        );
}

.bookshelf-dropdown__check {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 1rem;

    flex-shrink: 0;

    font-weight: 700;

    color: var(--color-accent);
}

.bookshelf-dropdown__divider {
    height: 1px;

    margin:
        .5rem 0;

    background:
        var(--color-border);
}

.bookshelf-dropdown__remove {
    color:
        var(--color-danger, #b42318);
}

@media (
    max-width: 640px
) {

    .bookshelf-dropdown__trigger {

        padding:
            .8rem
            .9rem;
    }

    .bookshelf-dropdown__option,
    .bookshelf-dropdown__remove,
    .bookshelf-dropdown__link {

        padding:
            .875rem
            1rem;
    }
}