@import "../../style/normalize.pcss";
@import "../../style/mixin/button.pcss";
@import "../../style/button.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/media.pcss";
@import "../../style/mixin/hover.pcss";
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/link.pcss";


:host {
    width: 100%;
}

[data-monster-role=container] {
    container-name:  filter;
    container-type: inline-size;
}

[data-monster-role=control] {

    & .hidden {
        display: none;
    }

    & [data-monster-role=query] {
        width: 100%;
        height: 100%;
    }

    & [data-monster-role=layout] {

        & [data-monster-role="remove-badges"] {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        }

        align-items: flex-end;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        flex-direction: column;

        & [data-monster-role=filter] {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            width: 100%;
            column-gap: 1rem;
            row-gap: 0.5rem;
            justify-content: flex-start;


            & ::slotted(label) {
                display: flex;
                gap: 0.1rem;


                flex-direction: column;
                border-bottom: thin dotted var(--monster-theme-control-border-color);
                padding: 2px;
                align-items: stretch;

                min-width: 15em;
                min-height: 4.1rem;

            }

        }

        & [name=hidden] {
            display: none;
        }

        & [data-monster-role=select-and-search] {
            place-content: center flex-end;
            align-items: stretch;
            display: flex;
            flex-flow: row-reverse nowrap;
            row-gap: 1.5rem;
            column-gap: 0.5rem;
            margin-top: 1rem;

            & monster-button {
                display: flex;
            }

            & .stretched-control {


                & ::part(control) {
                    height: 100%;
                }

                & ::part(button-button) {
                    height: 100%;
                }

                & ::part(button-control) {
                    height: 100%;
                }

            }

            & monster-select {
                min-width: 150px;
            }

            & [data-monster-visible=false] {
                display: none;
            }
        }

    }
    
}


@container filter (width < 500px) {
    & [data-monster-role=control] {
        & [data-monster-role=layout] {

            flex-flow: column nowrap;
            row-gap: 0.5rem;
            column-gap: 0;

            display: contents;

            & [data-monster-role=filter] {
                display: contents;

                & ::slotted(label) {
                    min-width: fit-content;
                }

            }

            & [data-monster-role=select-and-search] {
                
                display: flex;
                flex-direction: column;
                row-gap: 0.5rem;
                column-gap: 0;
                
                & monster-message-state-button {
                    width: 100%;
                }

                & monster-select {
                    width: 100%;
                    min-width: fit-content;
                }

            }
        }
    }
}