#entity {
    .section_header_main_footer();

    
    > .header {
        grid-area: header;
        display: grid;
        grid-auto-flow: column;
        column-gap: 1rem;
        --height: 2.25rem;
        min-height: var(--height);
        grid-template-columns: auto 1fr [del] var(--height);
        
        .button {
            .button();
        }
        
        .button.add {
            padding: 0.25rem 1rem;
        }

        .search.widget {
            .search_widget();
            justify-self: start;
        }

        .button.del {
            grid-column-start: del;
            span {
                background-repeat: no-repeat;
                background-position: center;
                background-size: 30px;
                &:is(.dark *) { background-image: var(--icon-trash-dark); }
                &:is(.light *) { background-image: var(--icon-trash-light); }
            }
        }
    }

    > .main {
        grid-area: main;
        overflow-y: scroll;
        @media (width >= 64rem) {
            padding-right: 1rem;
        }

        .entitys {
            display: grid;
            row-gap: 0.25rem;

            .entity {
                .panel();

                input {
                    .input();
                }

                .header {
                    display: grid;
                    grid-auto-flow: column;
                    justify-content: space-between;

                    > * {
                        width: fit-content;
                    }
                }

                .footer {
                    display: grid;
                    grid-auto-flow: column;
                    justify-content: start;
                    column-gap: 0.5rem;

                    .button {
                        .button();
                        padding: 0.25rem 1 rem;
                    }
                }
            }
        }
    }

    > .footer {
        .footer_with_pager();
    }
}