@layer layout {

body {
    display: flex;
    flex-direction: column;
    gap: var(--bobr-space);
    padding: var(--bobr-space-min);
    max-width: var(--layout-max-width);
    margin: auto auto 25vh;
}

body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: #e2e2e2;
    border-radius: var(--bobr-radius);
}

body ::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: var(--bobr-radius);
    border: none;
}

body ::-webkit-scrollbar-thumb:hover {
    background: black;
}

:where(main, grid, flex, stack, bo) {
    min-width: 0;
    box-sizing: border-box;
    align-items: flex-start;
}

main {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--bobr-space);
}

grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--bobr-space);
}

flex {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 100%;
    gap: var(--bobr-space-micro);
}

stack {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--bobr-space);
}

bo {
    display: flex;
    flex-flow: row wrap;
    gap: var(--bobr-space-min);
}

:is(flex, bo)[nowrap] {
    flex-wrap: nowrap;
}

bo[grow] {
    flex: 1 1 auto;
}

:is(main, grid, flex, stack, bo)[full] {
    width: 100%;
    flex: 1 1 100%;
    grid-column: 1 / -1;
    justify-content: space-between;
}

:is(main, grid, flex, stack, bo) > bo-header {
    width: 100%;
    flex: 1 1 100%;
}

:is(main, grid, flex, stack, bo)[gap="none"] { gap: 0; }
:is(main, grid, flex, stack, bo)[gap="micro"] { gap: var(--bobr-space-micro); }
:is(main, grid, flex, stack, bo)[gap="min"] { gap: var(--bobr-space-min); }
:is(main, grid, flex, stack, bo)[gap="data"] { gap: var(--bobr-space-data); }
:is(main, grid, flex, stack, bo)[gap="middle"] { gap: var(--bobr-space-middle); }
:is(main, grid, flex, stack, bo)[gap="normal"] { gap: var(--bobr-space); }

:is(main, grid, flex, stack, bo)[align="start"] { align-items: flex-start; }
:is(main, grid, flex, stack, bo)[align="center"] { align-items: center; }
:is(main, grid, flex, stack, bo)[align="end"] { align-items: flex-end; }
:is(main, grid, flex, stack, bo)[align="stretch"] { align-items: stretch; }

:is(main, grid, flex, stack, bo)[justify="start"] { justify-content: flex-start; }
:is(main, grid, flex, stack, bo)[justify="center"] { justify-content: center; }
:is(main, grid, flex, stack, bo)[justify="end"] { justify-content: flex-end; }
:is(main, grid, flex, stack, bo)[justify="between"] { justify-content: space-between; }
:is(main, grid, flex, stack, bo)[justify="around"] { justify-content: space-around; }
:is(main, grid, flex, stack, bo)[justify="evenly"] { justify-content: space-evenly; }

grid[columns="1"] { grid-template-columns: minmax(0, 1fr); }
grid[columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
grid[columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
grid[columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
grid[columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
grid[columns="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
grid[columns="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
grid[columns="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
grid[columns="9"] { grid-template-columns: repeat(9, minmax(0, 1fr)); }
grid[columns="10"] { grid-template-columns: repeat(10, minmax(0, 1fr)); }
grid[columns="11"] { grid-template-columns: repeat(11, minmax(0, 1fr)); }
grid[columns="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }

bo:has(> bo-header :is(h2, h3, h4)) {
    gap: var(--bobr-space-min);
}

bo[bookmark] {
    position: relative;
    order: -1;
}

bo[bookmark]::after {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 18px;
    height: 18px;
    background-color: var(--bobr-color-pink);
    mask: url(/_engine/asset/vector/ico/bookmark.svg) center / contain;
}

:is(main, grid, flex, stack, bo)[readonly] {
    border: 1px dashed #6a6a6a;
    background-color: white;
    margin: calc(var(--layout-readonly-offset) * -1);
    padding: var(--layout-readonly-offset);
    opacity: .5;
    transition: opacity .15s, border-color .15s;
    --layout-readonly-offset: calc(var(--bobr-space-min) / 2);
}

:is(main, grid, flex, stack, bo)[readonly]:hover {
    opacity: 1;
    border-color: var(--bobr-color-gray-middle);
}

:is(main, grid, flex, stack, bo)[readonly] :is(bo-input, bo-button, bo-files, bo-raw, bo-text, bo-div, bo-li, bo-links, bo-slider, bo-tree, bo-setbox, bo-sbox, bo-table, bo-toggle, bo-date, bo-range, bo-checkbox, bo-radio, bo-bbox) {
    pointer-events: none;
}

bo[collapsed] > :not(bo-header) {
    display: none;
}

bo[collapsed] > bo-header :is(h1, h2, h3, h4)::after {
    content: "...";
}

bo.hidden,
bo[hidden],
bo:not(:has(:is(bo-input, bo-button, bo-files, bo-raw, bo-text, bo-div, bo-li, bo-links, bo-slider, bo-tree, bo-setbox, bo-sbox, bo-table, bo-toggle, bo-date, bo-range, bo-checkbox, bo-radio, bo-bbox, mod, app, main, grid, flex, stack, bo):not(.hidden, [hidden]))) {
    display: none;
}

bo-tree .wrap-tree li.hidden {
    display: none;
}

bo-raw {
    position: relative;
    display: block;
    z-index: 1;
}

.backlight {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: auto;
    background: #000;
    visibility: hidden;
    opacity: 0;
    z-index: 667;
    transition: opacity .05s, visibility .05s;
}

@media (max-width: 1024px) {
    grid[columns] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1080px) {
    bo[collapsed] {
        margin: calc(var(--bobr-space) * -.5) auto auto;
    }
}

}