.autocomplete {
    &[hidden] {
        display: none;
    }
    --layer1: var(--background);
    transform: translateZ(0);
    z-index: 0;
    anchor-scope: --acAnchor;
    background: initial;
    &:has(.autocomplete-list.show) {
        z-index: 1;
    }
    &:not(fieldset) {
        anchor-name: --acAnchor;
        position: relative;
        display: grid;
    }
    .autocomplete-container {
        anchor-name: --acAnchor;
        position: relative;
        display: grid;
    }
    &.long>.autocomplete-container {
        grid-template-rows: 2rem 10rem;
    }
    .autocomplete-list {
        --row-highlight: color-mix(in srgb, var(--layer1-accent), var(--highlighter));
        position: absolute;
        display: none;
        list-style: none;
        background-color: var(--layer1);
        color: var(--text);
        border: 1px solid var(--primary);
        min-height: 1rem;
        max-height:100vmax;
        margin:0;
        padding:0;
        /* @supports ((anchor-name) and (position-anchor: *) and (anchor())) { */
        /* popover functionality, for browsers that support anchor-name and anchor() */
        &:popover-open, &.show:not([popover]){
            display:block;
        }
        &[popover], &:popover-open {
            position-anchor: --acAnchor;
            left:anchor(end, 100%);
            top: anchor(top);
            right: anchor(200%);
            max-height: -webkit-fill-available;
        }
        /* } */


        /* default inset values, for browsers that don't yet support anchor-name and anchor()
        TODO! once firefox supports the stated, we can remove this. See autocomplete.js/multi-autocomplete.js for where the support is checked.*/
        top: 0;
        left: 100%;
        right: -15rem;

        .autocomplete-item {
            cursor: pointer;
            padding: .5rem;
            font-weight: bold;
            &:hover {
                outline: solid var(--border-highlight);
                background-color: var(--row-highlight);
            }
        }
    }
    &.long {
        /* grid-template-rows: 1fr 3fr; */
        .list-autocomplete-display {
            max-height: 20rem;
            overflow-y: auto;
        }
    }
    
}
.autocomplete:not(.long) {

    div:has(.list-autocomplete-display) {
        display: grid;
        grid-template-columns: max-content;
        
        &:focus-within {
            outline: 1px solid var(--orange-highlight);
            border-radius: 2px;
        }
        input {
            width: auto !important;
            grid-column: auto / 3;
            grid-column-end: -1;
            grid-column-start: 2;
            box-shadow: inset 0 .16rem .1rem -.12rem black, inset 0 -.16rem .1rem -.12rem black, inset -.16rem 0 .1rem -.12rem black;
            &:focus-visible {
                outline: none;
                border-radius: 0;
            }
        }
        .list-autocomplete-display {
            display: flex;
            list-style: none;
            background-color: var(--layer0);
            box-shadow: inset 0 .16rem .1rem -.12rem black, inset 0 -.16rem .1rem -.12rem black, inset .16rem 0 .1rem -.12rem black;
            min-height:2rem;
            min-width: .1rem;
            grid-column: 1 / auto;
            li {
                display:flex;
                width: fit-content;
                margin: auto;
                border: 1px solid black;
                border-radius: 1rem;
                margin-left: .3rem;
                padding-left: 1.1rem;
                background-color: rgba(255,255,255,0.8);
                &:hover {
                    background-color: var(--secondary-accent);
                    button{
                        visibility: visible;
                    }
                }
            }
            
        }
    }
}

.list-autocomplete-display {
    li {
        border: 1px solid var(--class-border-color);
        border-radius: 1rem;
        margin-left: .3rem;
        margin-right: .3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        content-visibility: auto;
        background-color: rgba(255,255,255,0.2);
        input:not(.hidden-value) {
            all: initial;
            width: 2rem;
        }
        &:hover {
            background-color: var(--class-hightlight-color);
            button{
                visibility: visible;
            }
        }
        button {
            position: absolute;
            top: 0;
            &.fw-hidden-cancel {
                right: 0;
            }
            &.fw-hidden-addition {
                left: 0;
            }
        }
    }

}



@media screen and (width <= 1024px) {
    
    .autocomplete {
        .autocomplete-list {
            font-size: 1em;
            left: 0;
            /* right: 65%; */
            min-width: 50%;
            max-width: 100%;
            &[popover], &:popover-open {
                position-anchor: --acAnchor;
                left:anchor(start, 0%);
                top: anchor(bottom);
                /* right: anchor(100%); */
                max-height: -webkit-fill-available;
                
            }
            top: 100%;
            .autocomplete-item {
                font-size: 1em;
            }

        }
    }
}