#idPacklist {

    details {
        min-height: 50px;
    }

    label {
        display: inline-flex;
        align-items: center;
    }

    .screen-small { /* should this only apply for small screens? MediaQuery */
        font-size: small;
        font-weight: normal !important;
        text-align: right;
    }

    [data-id] {
        background-color: beige;
        margin: 3px 0;
        padding: 6px;
        display: flex;

        >* {
            display: inline-block;
            margin: 0 5px;
        }
        >[data-role="label"] {
            flex-grow: 2;
            flex-shrink: 1;
            hyphens: auto;
        }
        >.inputnumber {
            flex-shrink: 0;
        }
    }

    &[data-view="prepare"] {
        [data-id] {
            background-color: lightblue;
            
            &:has([data-role="isInPacklist"]:not(:checked)){
                .inputnumber {
                    visibility: hidden; /* reserves the room already */
                }
            }
        }

        &:has(.hide-unused:checked) {
            [data-id]:has([data-role="isInPacklist"]:not(:checked)) {
                display: none;
            }
        }

        .hide-prepare {
            display: none;
        }
    }

    &[data-view="pack"] {
        [data-id] {
            background-color: pink;
            &:has([data-role="isInPacklist"]:not(:checked)) {
                display: none;
            }
        }

        &:has(.hide-packed:checked) {
            [data-id]:has([data-role="isPacked"]:checked) {
                display: none;
            }
        }

        .hide-pack {
            display: none;
        }
        details:not(:has([data-role="isInPacklist"]:checked)) {
            display: none;
        }
    }
}