.page-pin() {
    grid-area: pin;
    width: 15px;
    height: 15px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 84%;
    &:is(.light *) {
        --off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16.46'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%23ffffff;stroke:%23ff8562;stroke-miterlimit:10;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='a' points='1 0 1 14.72 7 11.22 13 14.72 13 0 1 0'/%3E%3Cpolyline class='b' points='1 0 1 14.72 7 11.22 13 14.72 13 0'/%3E%3C/svg%3E");
        --on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16.46'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23ff8562;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='a' points='14 16.46 7 12.38 0 16.46 0 0 14 0 14 16.46'/%3E%3C/svg%3E");
    }
    &:is(.dark *) {
        --off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16.46'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%232e2b2b;stroke:%23b26044;stroke-miterlimit:10;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='a' points='1 0 1 14.72 7 11.22 13 14.72 13 0 1 0'/%3E%3Cpolyline class='b' points='1 0 1 14.72 7 11.22 13 14.72 13 0'/%3E%3C/svg%3E");
        --on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16.46'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23b26044;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='a' points='14 16.46 7 12.38 0 16.46 0 0 14 0 14 16.46'/%3E%3C/svg%3E");
    }
    background-image: var(--off);
    &:is(.page[data-pin="1"] *) {
        background-image: var(--on);
    }
    &:is(.modern *) {
        margin: -12px auto 0 auto;
    }
    &:is(.classic *) {
        margin: -11px auto 0 auto;
    }
    display: none;
    @media (max-width: 1024px) {
        display: block;
    }
    &:is(.page[data-pin="1"] *),
    &:is(.page:hover *) {
        display: block;
    }
}

.page-eye() {
    grid-area: eye;
    width: 18px;
    height: 18px;
    justify-self: center;
    cursor: pointer;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    align-self: end;
    &:is(.page[data-published="1"] *) {
        &:is(.dark *) { background-image: var(--eye-on-dark); }
        &:is(.light *) { background-image: var(--eye-on-light); }
        @media (width >= 64rem) {
            display: none;
            &:is(.page.open *) {
                display: block;
            }
            &:is(.page:hover *) {
                display: block;
            }
        }
    }
    &:is(.page[data-published="0"] *) {
        &:is(.dark *) { background-image: var(--eye-off-dark); }
        &:is(.light *) { background-image: var(--eye-off-light); }
    }
    display: block;
}

.page-properties() {
    grid-area: prop;
    display: none;
    &:is(.properties *) {
        display: grid;
    }
    row-gap: 12px;
    @media (width >= 64rem) {
        grid-template-columns: 1fr 1fr;
        column-gap: 11px;
    }
    .select.widget {
        .select_widget();
    }
    .left, .right {
        display: grid;
        @media (width >= 64rem) {
            grid-template-columns: 6em minmax(240px, 100%);
            gap: 12px 11px;
            align-content: start;
        }
        @media (width < 64rem) {
            row-gap: 0.75rem;
        }
    }
    .title {
        .title();
        @media (width >= 64rem) {
            text-align: right;
        }
    }
    textarea {
        resize: vertical;
    }
    input[type=date], input[type=time] {
        max-width: fit-content;
    }
    .url.widget {
        display: grid;
        grid-template-columns: 1fr 44px;
        &:is(.classic *) {
            gap: 5px;
        }
        input {
            font-family: var(--monospace);
            font-size: var(--monospace-size);
            &:is(.modern *) {
                grid-column: 1/-1;
                grid-row: 1/-1;
                padding-right: 48px;
            }
            &:is(.classic *) {
                padding-right: 10px;
            }
        }
        .button.translit {
            padding: 0;
            &:is(.modern *) {
                grid-column: 2/3;
                grid-row: 1/-1;
                border-left: 0;
            }
            span {
                background-repeat: no-repeat;
                background-position: center;
                background-size: 54%;
                &:is(.dark *)  { background-image: var(--translit-dark) }
                &:is(.light *) { background-image: var(--translit-light) }
            }
        }
    }
}



#pages {
    .section_header_main_footer();

    input, textarea {
        .input();
    }

    .button {
        .button();
    }

    .pprop {
        .page-properties();
    }

    > .header {
        grid-area: header;
        display: grid;
        column-gap: 1rem;
        --height: 2.25rem;

        @media (width < 64rem) {
            grid-template-columns: var(--height) 1fr [trash] var(--height);
        }
        @media (width >= 64rem) {
            grid-template-columns: auto auto 1fr [trash] var(--height);
        }

        .button.add {
            @media(width >= 64rem) {
                span {
                    padding: 0 1rem;
                }
                .mobile { display: none; }
            }
            @media(width < 64rem) {
                aspect-ratio: 1 / 1;
                .desktop { display: none; }
            }
            .mobile {
                .x1, .x2 {
                    border-radius: 2px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: rotate(0deg) translate(-50%, -50%);
                    background-color: #9b8b84;
                }
                .x1 {
                    width: 0.125rem;
                    height: 1rem;
                }
                .x2 {
                    width: 1rem;
                    height: 0.125rem;
                }
            }
        }

        .search.widget {
            .search_widget();
        }

        .button.trash {
            grid-column-start: trash;
        }
    }

    .main {

        .pages {
            display: grid;
            row-gap: 0.25rem;
            padding-top: 1px; /* Для закладки */

            .page {
                .panel();
                padding: 0.5rem;
                column-gap: 0.5rem;
                row-gap: 0.5rem;
                position: relative;
                .last-saved(); /* Точка последнего сохранения */

                @media (width < 64rem) {
                    grid-template-areas:
                        "title pin del"
                        "butt  eye del";
                    grid-template-columns: 1fr auto 22px;
                }
                @media (width >= 64rem) {
                    grid-template-areas:
                        "title pin date del"
                        "butt  eye date del";
                    grid-template-columns: 1fr 32px 128px 24px;
                }

                &.properties {
                    @media (width < 64rem) {
                        grid-template-areas:
                            "title pin  del "
                            "butt  eye  del "
                            "prop  prop prop";
                    }
                    @media (width >= 64rem) {
                        grid-template-areas:
                            "title pin  date del "
                            "butt  eye  date del "
                            "prop  prop prop prop";
                    }
                    &:is(.dark *) { border-color: #b26044; }
                    &:is(.light *) { border-color: #ff8562; }
                }

                &.home {
                    &:is(.dark *) { border-color: #b26044; }
                    &:is(.light *) { border-color: #ff8562; }
                }
                
                &[data-published="0"] {
                    &:is(.dark *) { border-color: #a71a1a; }
                    &:is(.light *) { border-color: #ff0000; }
                }

                a.title {
                    .link();
                    grid-area: title;
                    width: fit-content;
                    font-weight: 600;
                }
                
                .pin {
                    .page-pin();
                }

                .eye {
                    .page-eye();
                }

                /* Дата на плашке */
                .date {
                    @media (width < 64rem) {
                        display: none;
                    }
                    @media (width >= 64rem) {
                        .inset();
                        grid-area: date;
                        font-size: 13px;
                        text-align: center;
                        &:is(.dark *) { color: #9b8b84; }
                        &:is(.light *) { color: #8c756f; }
                        /* Отложенная публикация */
                        &.future {
                            &:is(.dark *) { color: #ffe4c4; }
                            &:is(.light *) { color: #cf390c; }
                        }
                    }
                }

                input[type="checkbox"] {
                    grid-area: del;
                    @media (width < 64rem) {
                        align-self: start;
                    }
                    @media (width >= 64rem) {
                        align-self: center;
                    }
                }
                
                .buttons {
                    grid-area: butt;
                    display: grid;
                    width: 0;
                    overflow: hidden;
                    column-gap: 10px;
                    grid-auto-flow: column;
                    justify-content: start;
                    @media (width < 64rem) {
                        width: auto;
                    }
                    @media (width >= 64rem) {
                        &:is(.page:hover *, .page.properties *) {
                            width: auto;
                        }
                    }

                    /* Анимация загрузки текста с сервера на кнопке Редактировать */
                    .edit.loading {
                        .loading();
                    }

                    .save {
                        @media (width < 24rem) { display: none; }
                    }

                    .prop {
                        @media (width < 24rem) { display: none; }
                        &:is(.page.properties *) {
                            .button-active();
                        }
                    }
                }

            }
        }
    }

    .footer {
        .footer_with_pager();
    }

    .editor {
        
        display: grid;
        position: relative;
        grid-row: 1/-1;
        grid-column: 1/-1;
        z-index: 9;

        &.hidden {
            display: none;
        }

        .panel {
            .panel();
            padding: 0.5rem;
            row-gap: 0.5rem;
            column-gap: 0.25rem;

            position: relative; /* Для точки изменений */
            min-height: 0; /* Поджимать окно */
            display: grid;
            grid-template-rows: auto auto 1fr;
            grid-template-areas: 
                "header   header"
                "buttons  buttons"
                "textarea tags";

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

            &:is(.mediateka *), &:is(.properties *) {
                grid-template-rows: auto auto auto 1fr;
                grid-template-areas: 
                    "header   header"
                    "buttons  buttons"
                    "prop     prop"
                    "textarea tags";
            }

            grid-template-columns: 1fr 0;
            &:is(.tags *) {
                grid-template-columns: 1fr max-content;
            }
            
            > .tags {
                /* Можно вот такое добавить чтобы в .classic было в чем скроллить (визуально)
                &:is(.classic *) {
                    .inset();
                    align-content: unset;
                    padding: 5px;
                } */

                grid-area: tags;
                width: max-content;
                overflow-y: auto;
                position: relative;
                scrollbar-width: none;
                display: none;
                &:is(.editor.tags *) {
                    display: grid;
                }

                .buttons {
                    display: grid;
                    position: relative;
                    padding: 1px; /* для outline */
                    row-gap: 4px;
                    align-content: start;

                    .button {
                        padding: 7px 15px;
                        .tag {
                            &:is(.dark *) { color: #d5bfae; }
                            &:is(.light *) { color: #604c44; }
                        }

                        span {
                            justify-content: space-between;
                            column-gap: 4px;
                        }
                    }
                }
            }

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

                a.title {
                    .link();
                    width: fit-content;
                    font-weight: 600;
                    font-size: 1.2rem;
                }
            }

            > .buttons {
                display: grid;
                grid-area: buttons;
                grid-auto-flow: column;
                column-gap: 6px;
                justify-content: start;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 1px; /* не обрезать outline */
                scrollbar-width: none;

                .button {
                    padding: 0.25rem 1rem;
                }

                .button.prop {
                    &:is(.editor.properties *) {
                        .button-active();
                    }
                }

                .button.media {
                    &:is(.editor.mediateka *) {
                        .button-active();
                    }
                }
                
                .button.tags {
                    &:is(.editor.tags *) {
                        .button-active();
                    }
                }

                a {
                    .link();
                    align-content: center;
                    padding: 0 8px;
                }
            }

            .mediateka {
                display: grid;
                grid-area: prop;
                position: relative;
                max-width: 100%;
                display: none;
                &:is(.editor.mediateka *) {
                    display: grid;
                }

                .progress {
                    width: 0%;
                    height: 3px;
                    background-color: tomato;
                }

                .pan {
                    display: grid;
                    row-gap: 0.5rem;
                    
                    .hscroll {
                        overflow-x: auto;
                        overflow-y: hidden;

                        .files {
                            display: grid;
                            column-gap: 5px;
                            grid-auto-columns: 130px;
                            grid-auto-flow: column;

                            .file {
                                &:is(.dark *) { background-color: #111111; }
                                &:is(.light *) { background-color: #f8f2f2; }
                                border-width: 2px;
                                border-style: solid;
                                &:is(.dark *) { border-color: #333; }
                                &:is(.light *) { border-color: #fbf0ed; }
                                overflow: hidden;
                                position: relative;
                                
                                &.active {
                                    &:is(.dark *) { border-color: #a79080; }
                                    &:is(.light *) { border-color: #a79080; }
                                }

                                input[type="checkbox"] {
                                    &:is(:checked), &:is(.file:hover *) {
                                        display: block;
                                    }
                                }
                                
                                &:is(.modern *) {
                                    border-radius: 8px;
                                }
                                
                                img {
                                    object-fit: contain;
                                    width: 100%;
                                    height: 100%;
                                    display: block;
                                }

                                .name {
                                    width: 100%;
                                    font-size: 11px;
                                    position: absolute;
                                    padding: 0 2px;
                                    &:is(.dark *) { color: #ccc; }
                                    &:is(.light *) { color: #ccc; }
                                    word-break: break-all;
                                    background-color: #000b;
                                }

                                input[type="checkbox"] {
                                    position: absolute;
                                    right: 3px;
                                    top: 5px;
                                    z-index: 1;
                                    width: 16px;
                                    height: 16px;
                                    display: none;
                                    border-color: #ff4e00;
                                    
                                    &:is(.file:hover *) {
                                        display: block;
                                    }
                                    &:checked {
                                        display: block;
                                    }
                                }

                                .ext {
                                    position: absolute;
                                    z-index: 12;
                                    bottom: 3px;
                                    left: 3px;
                                    font-size: 12px; 
                                    padding: 1px 5px 1px 3px;
                                    &:is(.modern *) { border-radius: 3px; }
                                    cursor: default;
                                    &:is(.dark *) {
                                        background-color: #383433;
                                        color: #ffe3cf;
                                    }
                                    &:is(.light *) {
                                        background-color: #fffbfb;
                                        color: #8f572f;
                                    }
                                }
                            }

                        }
                    }

                    .buttons {
                        display: grid;
                        @media (width >= 64rem) {
                            min-height: 2.25rem;
                            grid-template-columns: auto 1fr auto;
                            column-gap:15px;
                            grid-template-areas: "upload link del";
                        }
                        @media (width < 64rem) {
                            grid-template-rows: auto;
                            grid-template-columns: 1fr 1fr;
                            gap: 14px;
                            grid-template-areas:
                                "upload del"
                                "link   link";
                        }

                        .button.upload {
                            grid-area: upload;
                        }

                        .link {
                            grid-area: link;
                            display: grid;
                            grid-template-columns: 1fr auto;
                            column-gap: 8px;
                            
                            a {
                                .link();
                                border-bottom: 1px dashed;
                            }

                            .tag {
                                .input();
                                align-content: center;
                                padding: 0 5px;
                                word-break: break-all;
                                &:is(.dark *) { color: #a79080; }
                                &:is(.light *) { color: #604c44; }
                            }
                        }

                        .button.del {
                            grid-area: del;
                            &.disabled {
                                &:is(.dark *) { color: #636363; }
                                &:is(.light *) { color: #636363; }
                            }
                        }
                    }
                }
            }

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


#pages-utils {
    display: grid;
    row-gap: 16px;
    overflow-y: auto;
    max-height: 100%;

    @media (width < 64rem) {
        padding: 16px 6px;
    }
    @media (width >= 64rem) {
        padding: 16px;
    }

    input {
        .input();
    }

    .button {
        .button();
        padding: 8px 16px;
        width: max-content;
    }

    .title {
        .title();
    }

    .main {
        .panel();

        .fields {
            display: grid;

            @media (width < 64rem) {
                gap: 8px;
            }
            @media (width >= 64rem) {
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }

            .field {
                display: grid;
                row-gap: 4px;
            }
        }
    }
}


#lbox {
    position: fixed;
    z-index: 999;
    cursor: pointer;
    background-color: #000000dd;
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-areas: "lbox";

    img, video, audio {
        width: 100%;
        height: 100%;
        object-fit: contain;
        grid-area: lbox;
        align-self: center;
        justify-self: center;
        overflow: hidden;
    }

    audio {
        width: calc(100% - 32px);;
        height: 54px;
    }
}
