#template {
    display: grid;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 0 1rem 1rem 1rem;

    input, textarea {
        .input();
    }
    textarea {
        resize: none;
    }

    .button {
        .button();
    }

    .select.widget {
        .select_widget();
    }

    .panel {
        .panel();
    }

    .title {
        .title();
    }

    .settings {
        display: grid;
        gap: 1rem;
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        &:is(#template.editor *) {
            display: none;
        }

        @media (width < 64rem) {
            grid-template-areas:
                "install"
                "template"
                "files"
                "manual"
                "headers";
            padding: 1rem 0.4rem;
            display: grid;
        }

        @media (width >= 64rem) {
            grid-template-areas:
                "install  headers manual"
                "template headers manual"
                "files    files   files";
            grid-template-columns: 17rem 1fr 1fr;
            align-content: start;
        }

        .button {
            &:not(.select *) {
                min-height: 2.25rem;
                max-width: max-content;
                padding: 0 1rem;
                justify-self: center;
            }
        }

        .install {
            grid-area: install;
        }

        .template {
            grid-area: template;
            align-content: start;

            label {
                display: grid;
                grid-template-columns: auto 1fr;
                column-gap: 0.5rem;

                span {
                    cursor: pointer;
                    &:is(.dark *) {
                        color: #d09074;
                    }
                    &:is(.light *) {
                        color: #764646;
                    }
                }
            }
        
            form {
                display: grid;
                row-gap: 1rem;
            }
        }

        .headers {
            grid-area: headers;
            grid-template-rows: auto 1fr auto;
        }

        .manual {
            grid-area: manual;
        }

        .files {
            grid-area: files;

            .file {
                font-family: var(--monospace);
                font-size: var(--monospace-size);
                cursor: pointer;
                width: max-content;
                &:is(.dark *) {
                    color: #a38174;
                }
                &:is(.light *) {
                    color: #563d40;
                }
                &:hover {
                    &:is(.dark *) {
                        color: #c49b8c;
                    }
                    &:is(.light *) {
                        color: #9b4d4d;
                    }
                }

                &.loading {
                    .loading();
                }
            }
        }
    }

    .editor {
        display: grid;
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        z-index: 9;
        min-height: 0;

        &.hidden {
            display: none;
        }

        .window {
            .panel();
            padding: 8px;
            row-gap: 8px;
            column-gap: 4px;
            position: relative; /* Для точки изменений */
            display: grid;
            grid-template-rows: auto 1fr;
            grid-template-columns: 1fr max-content;
            grid-template-areas: 
                "header   header"
                "textarea snip";
            min-height: 0;

            &[data-changed="true"] {
                .changed();
            }

            .header {
                grid-area: header;
                display: grid;
                grid-template-columns: auto auto auto 1fr;
                column-gap: 8px;

                .button {
                    height: 28px;
                }
            }

            .textarea {
                grid-area: textarea;
                .input();
            }

            .snippets {
                grid-area: snip;
                display: grid;
                width: max-content;
                overflow-y: auto;
                scrollbar-width: none;

                .buttons {
                    display: grid;
                    position: relative;
                    padding: 1px;
                    row-gap: 4px;
                    align-content: start;

                    .button {
                        padding: 7px 15px;
                    }

                    a {
                        .link();
                        justify-self: center;
                    }
                }
            }
        }
    }
}