#menu {
    .section_header_main_footer();
    grid-template-areas: "header" "main";
    grid-template-rows: auto 1fr;

    input, textarea {
        .input();
        &[type=text] {
            min-height: 1.875rem;
        }
        &[name=sort] {
            text-align: right;
        }
    }

    .select.widget {
        .select_widget();
        min-height: 1.875rem;
        .option.unpublished {
            color: red;
        }
    }

    .button {
        .button();
        &.prop:is(.menu.open *, .item.open *) {
            .button-active();
        }
        &.del {
            grid-column-start: del;
        }
    }
    
    .buttons {
        display: grid;
        grid-template-columns: auto auto auto auto auto 1fr [del] auto;
        column-gap: 8px;
    }

    .title:not(a) {
        .title();
        @media (min-width: 1024px) {
            justify-self: right;
        }
    }

    a {
        &[href] {
            .link();
        }
        width: fit-content;
        align-self: center;
        min-height: 22px; /* для пустых тайтлов */
        &.title:is(.unpublished *) {
            color: red;
        }
    }

    .header {
        display: grid;
        justify-content: start;

        .button.create {
            padding: 0.5rem 2rem;
        }
    }
    
    .main {
        display: grid;
        row-gap: 2rem;
        padding: 1px; /* Для рамки удаления */

        /* Используется в .menu и .item */
        .header {
            display: grid;
            grid-template-columns:  1fr auto;
            column-gap: 0.5rem;
        }

        .area {
            .panel();
            &.delete {
                outline: 1px dashed red;
            }

            .menu {
                display: grid;
                row-gap: 0.5rem;
                position: relative;
                outline: 1px dashed #15f815;
                outline-offset: 14px;
                .last-saved(); /* Точка последнего сохранения */
                &.last::before {
                    left: -12px;
                    top: -11px;
                }

                /* Подсветка сохраняемой области контейнера меню. */
                &.changed {
                    &:is(.dark *) {
                        outline-color: #da8d18;
                    }
                    &:is(.light *) {
                        outline-color: #da8d18;
                    }
                }

                .properties {
                    @media (width >= 64rem) {
                        grid-template-columns: 6rem minmax(15rem, 100%) 6rem minmax(15rem, 100%);
                        column-gap: 1rem;
                        row-gap: 0.5rem;
                    }
                    @media (width < 64rem) {
                        row-gap: 0.5rem;
                    }

                    display: none;
                    &:is(.menu.open *) {
                        display: grid;
                    }
                }
            }
            
            .items {
                display: grid;
                row-gap: 0.5rem;

                &:is(.padding *) {
                    padding-left: 1rem;
                }

                .padding {
                    display: grid;
                    row-gap: 0.5rem;
                }
                
                .item {
                    .panel();
                    position: relative;
                    &.changed {
                        &:is(.dark *) {
                            outline: 1px dashed #da8d18;
                        }
                        &:is(.light *) {
                            outline: 1px dashed #da8d18;
                        }
                    }
                    &:is(.delete *) {
                        outline: 1px dashed red !important;
                    }
                    .last-saved(); /* Точка последнего сохранения */

                    .properties {
                        display: none;
                        &:is(.open *) {
                            display: grid;
                        }

                        @media (min-width: 1024px) {
                            grid-template-columns: 1fr 1fr;
                            column-gap: 1rem;
                        }
                        @media (max-width: 1023px) {
                            row-gap: 0.5rem;
                        }

                        .left, .right {
                            display: grid;
                            @media (max-width: 1023px) {
                                row-gap: 0.5rem;
                            }
                            @media (min-width: 1024px) {
                                grid-template-columns: auto 1fr;
                                gap: 12px;
                            }

                            .target {
                                display: grid;
                                grid-template-columns: 1fr auto;
                                column-gap: 0.5rem;
                                position: relative;
                            }
                                
                        }
                    }
                }
            }
        }
    }
}

