.query-search__container{
    container: query-search / inline-size;
}

.query-search{
    position: relative;

    > form{
        inline-size: 100%;
        padding-inline: 24px 12px;
        padding-block: 12px;
        background: var(--_color-gray-2);
        border: 2px solid var(--_color-gray-3);
        border-radius: 8px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 16px;

        > span{
            line-height: 1.5;
            flex: 1;

            > small{
                font-family: var(--_font-family-medium);
            }

            > input{
                font-family: var(--_font-family-bold);
                inline-size: 100%;
            }
        }

        /* > button[type="submit"]{
            > span{
                display: none;
            }
        } */

        > .query-search__form__actions{
            display: flex;
            flex-flow: row wrap;
            gap: 8px;
        }

        &:is(
            :has(> span > input:focus):has(~ .query-search__results > details[open]),
            [focus]
        ){
            background: var(--_color-white);
            border-radius: 8px 8px 0 0;

            ~ .query-search__results{
                opacity: 1;
                visibility: visible;
            }
        }
    }

    > .query-search__results{
        position: absolute;
        top: 100%;
        left: 0;
        inline-size: 100%;
        border: 2px solid var(--_color-gray-3);
        border-top: none;
        border-radius: 0 0 8px 8px;
        background: var(--_color-white);
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease;

        > header{
            inline-size: 100%;
            padding-inline: 24px 12px;
            padding-block: 16px;
            background: var(--_color-white);
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            gap: 12px;
            display: none;

            > button{
                font-family: var(--_font-family-semibold);
                font-size: var(--_font-size-sm);
                color: var(--_color-gray-1);

                &[active]{
                    color: var(--_color-black);
                }
            }

            > hr{
                border: 1px solid var(--_color-gray-1);
                block-size: 1px;
                border-radius: 50%;
            }
        }

        > hr{
            inline-size: 100%;
            border: 1px solid var(--_color-gray-2);
        }

        > details.query-search__results__content{
            &[open]{
                padding-inline: 24px;
                padding-block: 8px;
    
                > .query-search__results__content__content{
                    display: flex;
                    flex-flow: column nowrap;
                    gap: 12px;

                    > header{
                        padding-block: 8px 0;
                    }

                    > :is(a, button){
                        font-size: var(--_font-size-p);
                        font-family: var(--_font-family-semibold);
                        color: var(--_color-gray-1);
                        inline-size: 100%;
                        /* padding-block: 12px; */
                        justify-content: space-between;

                        &:last-of-type{
                            padding-block: 0 12px;
                        }
                    }
                }
            }

            > summary{
                display: none;
            }
        }
    }
    
}

/* @container query-search (min-width: 450px){
    .query-search{
        > form{
            border: none;
        }
    }
} */