@layer ui {

ui {
    position: absolute;
    inset: 0 10px;
    pointer-events: none;
}

body > main {
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
    backface-visibility: hidden;
}

html.modal-preheat body > main {
    will-change: opacity, transform;
}

html.modal-page-open body > main {
    opacity: .18;
    pointer-events: none;
}

html.modal-page-hidden body > main {
    contain-intrinsic-size: auto var(--ui-modal-main-height, 1000px);
}


ui modal.com-focus .wrap {
    & .wrap-scroll {
        pointer-events: auto;
    }
    & .wrap-scroll .wrap-data {
        pointer-events: auto;
    }
}

/* popup */

dialog {
    position: absolute;
    padding: 0;
    margin: 0;
    border-radius: 20px;
    border-radius: var(--bobr-radius);
    z-index: 2002;
    display: flex;
    flex-direction: column;
    inset-inline: auto;
    min-width: 160px;
    max-width: min-content;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 0 40px #00000033;
    background: white;
    border: none;
    pointer-events: auto;
    transition: none;
    transform: scale(.88) translateY(-15px);
    visibility: hidden;
    opacity: 0;

    will-change: transform;
    contain: layout style paint;
    isolation: isolate;

    --ui-dialog-gap: calc(var(--bobr-space-min) / 2);
}

dialog.center {
    inset: 0px;
    position: fixed;
    margin: auto;
}

dialog img.preview {
    position: relative;
    max-height: 140px;
    width: calc(100% - var(--ui-dialog-gap)* 2);
    object-fit: cover;
    border-radius: var(--bobr-radius-min);
}

dialog img.preview.load-error {
    background-image: repeating-linear-gradient(45deg, white 0, white 5px, #f3f3f3 5px, #f3f3f3 15px);
    max-height: 50px;
}

/* dialog.center img.preview {
    width: auto;
} */

dialog .message {
    /* text-align: center; */
    color: black;
    display: flex;
    flex-direction: column;
    gap: var(--ui-dialog-gap);
    line-height: 1;
    padding: var(--ui-dialog-padding-block-start) var(--ui-dialog-padding-inline) var(--ui-dialog-gap);
    --ui-dialog-padding-block-start: calc(var(--ui-dialog-gap) + 2px);
    --ui-dialog-padding-inline: calc(var(--ui-dialog-gap) + 5px);
}

dialog .message .title {
    font-weight: 700;
    font-size: 1.15em;
}

dialog .message .description {
    font-size: .85em;
}

dialog .buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--bobr-space-micro) / 3);
    box-sizing: border-box;
    padding: var(--ui-dialog-gap);
    width: 100%;
    position: relative;
    z-index: 1;
}

dialog:has(.title:empty) {
    min-width: auto;
}

dialog:has(.title:empty):has(.buttons > :is(button, .dialog-button):nth-child(3)) {
    border-radius: var(--bobr-radius);
}

dialog:has(.title:empty) .buttons {
    padding: var(--bobr-space-micro);

    &:has(:is(button, .dialog-button):nth-child(6)) {
        width: auto;
        max-height: 30vh;
        overflow-y: scroll;
        padding: 0 var(--bobr-space-micro) 0 0;
        scroll-snap-type: y mandatory;
        margin: var(--bobr-space-micro);
    }
    & :is(button, .dialog-button) {
        justify-content: flex-start;
        scroll-snap-align: end;
    }
}

dialog .buttons button,
dialog .buttons .dialog-button {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: none;
    height: 41.2px;
    min-height: 41.2px;
    padding-inline: 12px;
    padding-block-end: 1.5px;
    box-sizing: border-box;
    font-weight: 300;
    border-radius: var(--bobr-radius);
    user-select: none;
    cursor: pointer;
    position: relative;
    box-shadow: none;
    line-height: 1;
    min-width: min-content;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bobr-space-micro);
    width: 100%;
    /* transition: transform .2s cubic-bezier(0.25, 0.1, 0.2, 1.49);
    transition-delay: .08s;
    transform: scale(.9); */
    background: var(--ui-dialog-button-bg);
    color: var(--ui-dialog-button-text);
    --ui-dialog-button-bg: var(--bobr-color-blue);
    --ui-dialog-button-text: white;
}

dialog .buttons .dialog-button .text {
    display: inline-block;
    pointer-events: none;
}

dialog .buttons .dialog-button:active {
    transform: translateY(1.5px) scale(0.96);
    transition: transform .05s;
}

dialog .buttons .dialog-button:hover {
    filter: brightness(.95);
}

dialog .buttons button *,
dialog .buttons .dialog-button * {
    pointer-events: none;
}

dialog .buttons button .ico,
dialog .buttons .dialog-button .ico {
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--ui-dialog-button-text);
    mask-image: var(--ui-dialog-button-icon-url);
    mask-size: contain;
    -webkit-mask-image: var(--ui-dialog-button-icon-url);
    -webkit-mask-size: contain;
}

/* dialog .buttons button:nth-child(2) {
    transition-delay: .12s;
}

dialog .buttons button:nth-child(3) {
    transition-delay: .16s;
}

dialog .buttons button:nth-child(4) {
    transition-delay: .20s;
}

dialog .buttons button:nth-child(5) {
    transition-delay: .24s;
}

dialog .buttons button:nth-child(6) {
    transition-delay: .28s;
} */

dialog .message :is(.title, .description):empty,
dialog .message:has(.title:empty):has(.description:empty),
dialog img.preview[src=''],
dialog .buttons:empty {
    display: none;
}

dialog.active {
    transition: none;
}

dialog.active,
dialog.active .buttons :is(button, .dialog-button) {
    visibility: visible;
    transform: none;
    opacity: 1;
}

dialog.active,
dialog.active .buttons,
dialog.active .buttons button,
dialog.active .buttons .dialog-button {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

dialog:has(:not(.title, .description, img)) .buttons {
    text-wrap: nowrap;
}

dialog.auto-wide {
    min-width: auto;
}

/* popup */



/* messager */

messager {
    position: fixed;
    left: var(--bobr-space-min);
    bottom: var(--bobr-space-min);
    z-index: 2003;
    max-width: 360px;
    pointer-events: auto;
    contain: style;
}

messager .wrap {
    display: flex;
    flex-direction: column;
}

messager:not(:hover) .wrap:has(.message:nth-child(10)) .message:not(:first-child, :last-child, .out) {
    margin: -8px 0;
}

messager:not(:hover) .wrap:has(.message:nth-child(10)) .message:not(.out):first-child {
    margin: 3px 0 14px;
}

messager .wrap .message:first-child {
    margin-top: 0;
}

messager .wrap .message:last-child {
    margin-bottom: 0;
}

messager .wrap .message {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bobr-space-micro);
    padding: var(--bobr-space-min);
    font-weight: 300;
    border-radius: var(--bobr-radius);
    background: var(--ui-message-bg);
    color: var(--ui-message-text);
    width: fit-content;
    cursor: pointer;
    --ui-message-bg: black;
    --ui-message-text: white;
    transition: 
        transform .4s cubic-bezier(0, 0.02, 0, 1.22),
        opacity .3s,
        margin .3s,
        box-shadow .3s;
    animation: appearance .4s cubic-bezier(0, 0.02, 0, 1.22);
    overflow: hidden;
    margin: 3px 0;
    box-sizing: border-box;
    z-index: 1;
}

messager .wrap .message.keep:before {
    content: "";
    position: absolute;
    inset: 9px 0 0 9px;
    background-color: var(--ui-message-text);
    width: 5px;
    height: 5px;
    border-radius: 10px;
}

messager .wrap .message.out {
    transform: translateY(10px);
    opacity: 0;
    margin: var(--ui-message-out-margin) 0;
}

@keyframes appearance {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(.9) rotateX(5deg); 
    }
    100% {
        opacity: 1;
        transform: perspective(100px);
    }
}

messager .wrap .message .title {
    display: flex;
    gap: var(--bobr-space-micro);
    align-items: flex-start;
}

messager .wrap .message .title .ico {
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--ui-message-text);
    mask-image: var(--ui-message-icon-url);
    mask-size: contain;
    -webkit-mask-image: var(--ui-message-icon-url);
    -webkit-mask-size: contain;
}

messager .wrap .message .title .ico:not([style]) {
    display: none;
}

messager .wrap .message .title .text {
    font-size: 1.1em;
    width: fit-content;
    line-height: 1;
}

messager .wrap .message .description {
    width: fit-content;
    font-size: .9em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ui-message-description-lines);
    overflow: hidden;
    --ui-message-description-lines: 4;
}

/* messager .wrap .message .description ~ .description {
    margin-top: -5px;
} */

/* @supports not (mask-image: var(--ui-message-icon-url)) {
    messager .wrap .message .title .ico {
        display: none;
    }
} */

@media (max-width: 1200px) and (max-height: 770px) {
    messager .wrap .message {
        padding: calc(var(--bobr-space-min) / 2);
        gap: calc(var(--bobr-space-micro) / 2);
        font-size: 75%;
        border-radius: 12px;
    }
}

/* messager .wrap .message:is(:hover, .hover) .description {
    --ui-message-description-lines: initial;
} */

/* messager .wrap .message.keep {
    order: 1;
} */

/* messager */



/* modal */

modal {
    display: flex;
    position: fixed;
    inset: var(--ui-modal-viewport-gap) auto auto var(--ui-modal-viewport-gap);
    cursor: auto;
	width: fit-content;
	max-width: min(var(--ui-modal-max-size), var(--ui-modal-width-cap));
	min-width: min(320px, var(--ui-modal-width-cap));
    max-height: var(--ui-modal-height-cap);
    margin: auto;

    transform: translate(var(--ui-modal-x), calc(var(--ui-modal-y) + 30px)) scale(.9) rotateX(5deg);
    transition: none;
    opacity: 0;
    visibility: hidden;
    contain: layout paint style;
    
    pointer-events: auto;
    z-index: 2001;

    isolation: isolate;
    
    --ui-modal-max-size: min(calc(var(--layout-max-width) / 1.1), calc(100% - var(--bobr-space-max)));
    --ui-modal-viewport-gap: clamp(12px, 3vmin, 32px);
	--ui-modal-width-cap: calc(var(--ui-modal-client-width, 100vw) - var(--ui-modal-viewport-gap) - var(--ui-modal-viewport-gap));
	--ui-modal-height-cap: calc(var(--ui-modal-client-height, 100vh) - var(--ui-modal-viewport-gap) - var(--ui-modal-viewport-gap));
	--ui-modal-scroll-height: calc(var(--ui-modal-height-cap) - 42px);
	--ui-modal-table-min-height: min(var(--ui-modal-height-cap), clamp(180px, calc(var(--ui-modal-client-height, 100vh) * .36), 320px));
	--ui-modal-table-scroll-min-height: calc(var(--ui-modal-table-min-height) - 52px);
    --ui-modal-x: 0px;
    --ui-modal-y: 0px;

    &[data-left-side="true"] {
        right: auto;
    }

    &[data-left-side="false"]:before {
        left: auto;
        right: var(--ui-modal-arrow-margin);
    }

    &.stick {
        margin: 0;
    }

    &.open {
        transform: translate(var(--ui-modal-x), var(--ui-modal-y)) perspective(600px);
        opacity: 1;
        visibility: visible;
    }

    &.center {
        inset: calc(var(--ui-modal-client-height, 100vh) / 2) auto auto calc(var(--ui-modal-client-width, 100vw) / 2);
        margin: 0;
        --ui-modal-x: -50%;
        --ui-modal-y: -50%;
    }

    &.fullscreen {
        position: fixed;
        inset: 0;
        max-width: 100%;
        max-height: 100vh;
        width: auto;
        transition: none;
        --ui-modal-x: 0px;
        --ui-modal-y: 0px;

        &:not(.scroll-off) > .wrap .wrap-scroll {
            max-height: 100vh;
        }

        & > .wrap {
            width: 100%;
            height: 100%;
            grid-template-rows: auto minmax(0, 1fr);
            resize: none;
            border-radius: 0;
        }
    }

	&[data-mode="iframe"] {
		width: min(var(--ui-modal-max-size), var(--ui-modal-width-cap));
		height: min(620px, var(--ui-modal-height-cap));

		& > .wrap {
			height: 100%;
			grid-template-rows: auto minmax(0, 1fr);
		}

        & html {
            overflow: hidden;
        }

		& > .wrap .wrap-scroll {
			width: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		& iframe[data-ui-modal-frame] {
			display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }

	&[data-provider-modal="true"] {
		--ui-modal-viewport-gap: clamp(10px, 2vmin, 24px);
	}

	&[data-provider-modal="true"][data-mode="iframe"] {
		width: min(820px, var(--ui-modal-width-cap));
		min-width: min(520px, var(--ui-modal-width-cap));
		min-height: var(--ui-modal-table-min-height);
		height: min(520px, var(--ui-modal-height-cap));
	}

	&[data-provider-modal="true"][data-mode="iframe"][data-size="compact"] {
		width: min(620px, var(--ui-modal-width-cap));
		min-width: min(340px, var(--ui-modal-width-cap));
		min-height: min(220px, var(--ui-modal-height-cap));
		height: min(340px, var(--ui-modal-height-cap));
	}

	&[data-provider-modal="true"][data-mode="iframe"][data-size="wide"] {
		width: min(var(--ui-modal-max-size), var(--ui-modal-width-cap));
		min-width: min(960px, var(--ui-modal-width-cap));
		height: min(calc(var(--ui-modal-client-height, 100vh) * .8), var(--ui-modal-height-cap));
	}

	&[data-mode="iframe"][data-size="dash-create"] {
		width: min(850px, var(--ui-modal-width-cap));
		min-width: min(520px, var(--ui-modal-width-cap));
		height: min(620px, var(--ui-modal-height-cap));
	}

	&.scroll-off.with-table {
		min-height: var(--ui-modal-table-min-height);
		max-height: var(--ui-modal-height-cap);

		& > .wrap {
			grid-template-rows: auto minmax(0, 1fr);
		}
	}

    &.fullscreen[data-mode="iframe"] {
        width: auto;
        height: auto;
    }

    &.fullscreen .control {
        border-radius: 0;
        cursor: default;
    }

    &.dragging {
        transition: none;
    }

    &.dragging > .wrap {
        resize: none;
    }

    &.dragging iframe[data-ui-modal-frame] {
        pointer-events: none;
    }

    & > .wrap {
        position: relative;
        display: grid;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        grid-template-rows: auto minmax(0, auto);
        border-radius: var(--bobr-radius-min);
        background: white;
        box-shadow: 0 0 40px #00000033;
        overflow: hidden;
        resize: both;
        contain: paint;
    }

    & .control {
        display: flex;
        gap: var(--bobr-space-micro);
        flex-wrap: nowrap;
        width: 100%;
        cursor: move;
        user-select: none;
        touch-action: none;
        padding: 4px 4px 5px var(--bobr-space-min);
        box-sizing: border-box;
        background: var(--bobr-color-gray-light);
        border-radius: var(--bobr-radius-min) var(--bobr-radius-min) 0 0;
        justify-content: flex-end;
        border-bottom: 1px solid var(--bobr-color-gray-border);
        align-items: center;

        & .title {
            line-height: 1;
            margin-right: auto;
            color: var(--bobr-color-gray);
            font-weight: 100;
            display: block;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: var(--ui-modal-title-lines);
            text-wrap: nowrap;
            /* overflow: hidden; */
            text-overflow: ellipsis;
            pointer-events: none;
            --ui-modal-title-lines: 1;
        }

        & .btn {

            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 6px;
            box-sizing: border-box;
            cursor: pointer;
            user-select: none;
            z-index: 2;
            transition: transform .05s;
    
            &:active {
                transition: transform .05s;
                transform: translateY(1.5px) scale(0.96);
            }
        
            & img {
                width: 100%;
                pointer-events: none;
            }
        }
    }

    &:not(.scroll-off) > .wrap .wrap-scroll {
        display: flex;
        flex-direction: column;
        gap: var(--bobr-space-min);
        flex-wrap: nowrap;
        overflow-y: scroll;
        margin: 6px 6px 6px auto;
        padding: var(--bobr-space-micro) var(--bobr-space-min);
        padding: 0 var(--bobr-space-micro) var(--bobr-space-micro) 0;
        box-sizing: border-box;
        max-height: var(--ui-modal-scroll-height);
        width: calc(100% - var(--bobr-space-micro));
    }

    &:not(.with-popup) .open-in {
        display: none;
    }

    & .wrap-scroll > stack.wrap-data {
        padding-inline: var(--bobr-space-min);
        padding-block: var(--bobr-space-min);

        & > bo {
            padding-block-end: var(--bobr-space-min);
            border-bottom: 1px solid var(--bobr-color-gray-border);
            transition-duration: .3s;
            transition-property: transform, opacity, display;
            transition-behavior: allow-discrete;

            &:not([hidden]) {
                opacity: 1;
                transform: none;
                
                @starting-style {
                    opacity: 0;
                    transform: translateY(-35px);
                }
            }

            &[hidden] {
                display: none;
                opacity: 0;
                transform: translateY(-35px);
            }

            &:nth-last-child(1 of bo:not([hidden])) {
                padding-block-end: 0;
                border-bottom: none;
            }
        }
    }
}

modal.fullscreen {
    & bo-table > .wrap-com > .wrap-main {
        max-width: initial;

        & > .wrap {
            max-height: initial;
        }
    }
}

@media (max-width: 780px) {
    modal,
    modal.center,
    modal.scroll-off.with-table,
    modal[data-mode],
    modal[data-size],
    modal[data-mode][data-size],
    modal[data-provider-modal],
    modal[data-provider-modal][data-mode],
    modal[data-provider-modal][data-mode][data-size] {
        inset: 0 auto auto 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: var(--ui-modal-client-height, 100dvh);
        min-height: 0;
        max-height: none;
        margin: 0;
        --ui-modal-x: 0px;
        --ui-modal-y: 0px;
    }

    modal > .wrap {
        width: 100%;
        height: 100%;
        grid-template-rows: auto minmax(0, 1fr);
        resize: none;
        border-radius: 0;
    }

    modal:not(.scroll-off) > .wrap .wrap-scroll {
        max-height: var(--ui-modal-client-height, 100dvh);
    }

    modal .control {
        cursor: default;
        border-radius: 0;
    }

    modal .control .btn.resize {
        display: none;
    }
}

/* modal */



/* progress */

pro {
    position: fixed;
    width: 30px;
    height: 5px;
    margin: 10px auto auto 15px;
    pointer-events: none;
    user-select: none;
    background-color: var(--bobr-color-gray-light);
    border-radius: var(--bobr-radius-min);
    overflow: hidden;
    z-index: 3000;
    transition: opacity .15s;
    opacity: 0;
    --ui-progress-value: 0;
}

pro.active {
    opacity: 1;
}

pro.success:before {
    background-color: var(--bobr-color-green);
}

pro.fail:before {
    background-color: var(--bobr-color-red);
}

pro:before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-color: var(--bobr-color-blue);
    transition: transform .1s;
    transform-origin: left center;
    transform: scaleX(calc(var(--ui-progress-value) / 100));
}

/* progress */



/* blackout */

blackout {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: black;

    background-color: rgb(0 4 16 / 36%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    &:not(.transparent) {
        transition: opacity .15s, visibility .15s, backdrop-filter .15s;

        &.active {
            /* opacity: .2; */
            opacity: 1;
            backdrop-filter: blur(8px) saturate(.92);
            -webkit-backdrop-filter: blur(8px) saturate(.92);
            transition: opacity .25s, visibility .25s, backdrop-filter .25s;
        }
    }

    &.active {
        visibility: visible;
        pointer-events: all;
    }
}

/* blackout */



/* scroller */

ui scroller {

    --ui-scroller-height: 10px;

    position: fixed;
    inset: auto var(--bobr-space-min) 2px;
    margin: auto;
    max-width: var(--layout-max-width);
    height: calc(var(--ui-scroller-height) + 1px);
    overflow: scroll hidden;
    pointer-events: none;
    z-index: 10;
    /* scroll-behavior: smooth; */
    contain: layout paint style;
    transition: transform .25s;
    transform: translateY(calc(var(--ui-scroller-height) + 5px));

    &.active {
        pointer-events: all;
        transform: none;
    }

    &::-webkit-scrollbar {
        height: var(--ui-scroller-height);
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        height: var(--ui-scroller-height);
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: var(--bobr-radius);
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: black;
    }
}

html.component-fullscreen ui scroller {
    display: none;
}

/* scroller */



/* modal table */

}

@layer state {

html.modal-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

html.modal-dragging body > :not(ui) {
    pointer-events: none;
    user-select: none;
}

html.modal-dragging ui modal.open {
    will-change: transform;
}

ui.dialog-open messager {
    z-index: 1999;
}

ui.dialog-open modal,
ui.dialog-open modal * {
    pointer-events: none;
}

ui.dialog-open modal {
    opacity: 0;
}

ui.dialog-open dialog.active {
    z-index: 3002;
    pointer-events: auto;
}

ui modal.open {
    transform: translate(var(--ui-modal-x), var(--ui-modal-y)) perspective(600px);
    opacity: 1;
    visibility: visible;
}

ui modal.confirming {
    transform: translate(var(--ui-modal-x), calc(var(--ui-modal-y) + 30px)) scale(.96) rotateX(5deg);
    opacity: 0;
    pointer-events: none;
}

ui modal.open.center {
    inset: calc(var(--ui-modal-client-height, 100vh) / 2) auto auto calc(var(--ui-modal-client-width, 100vw) / 2);
    margin: 0;
    --ui-modal-x: -50%;
    --ui-modal-y: -50%;
}

@media (max-width: 780px) {
    ui modal.open.center {
        inset: 0 auto auto 0;
        width: var(--ui-modal-client-width, 100vw);
        --ui-modal-x: 0px;
        --ui-modal-y: 0px;
    }
}

ui modal.fullscreen {
    inset: 0;
    margin: 0;
    width: var(--ui-modal-client-width, 100vw);
    height: var(--ui-modal-client-height, 100vh);
    max-width: 100%;
    max-height: 100vh;
    transform: none;
    --ui-modal-x: 0px;
    --ui-modal-y: 0px;
}

ui modal.fullscreen > .wrap {
    width: 100%;
    height: 100%;
}

html.bobr-test-mode,
html.bobr-test-mode * {
    scroll-behavior: auto;
}

html.bobr-test-mode *,
html.bobr-test-mode *::before,
html.bobr-test-mode *::after {
    animation-duration: 0s;
    animation-delay: 0s;
    transition-duration: 0s;
    transition-delay: 0s;
    transition-property: none;
}

html.bobr-test-mode :is(button, a, [data-ui-action], [role="button"]),
html.bobr-test-mode :is(button, a, [data-ui-action], [role="button"])::before,
html.bobr-test-mode :is(button, a, [data-ui-action], [role="button"])::after {
    transform: none;
}

html.bobr-test-mode body > main,
html.bobr-test-mode ui scroller {
    transform: none;
    will-change: auto;
}

html.bobr-test-mode {
    overflow-anchor: none;
}

}

@layer ui {

modal.scroll-off > .wrap .wrap-scroll {
    margin: var(--bobr-space-micro) var(--bobr-space-micro) calc(var(--bobr-space-micro) + 5px);
    width: calc(100% - (var(--bobr-space-micro) * 2));
}

modal.scroll-off:not([data-mode="iframe"]) > .wrap .wrap-scroll {
    height: max-content;
    max-height: var(--ui-modal-scroll-height);
    overflow-y: auto;
}

modal.scroll-off:not([data-mode="iframe"], .with-table) > .wrap {
    display: flex;
    flex-direction: column;
}

modal.scroll-off:not([data-mode="iframe"], .with-table) > .wrap .wrap-scroll {
    flex: 0 1 auto;
}

modal.scroll-off.with-table > .wrap .wrap-scroll {
    min-height: var(--ui-modal-table-scroll-min-height);
}

modal.scroll-off.with-table > .wrap .wrap-scroll:has(app[name=filter]) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--bobr-space-micro);
}

modal bo-table {

    --table-cell-padding: 4px;
    height: 100%;
    width: 100%;

    & .btn.resize {
        display: none;
    }

    & :is(.wrap-com, .wrap-main) {
        height: 100%;
        width: 100%;
        max-width: none;
    }

    & .wrap-main > .wrap {
        max-height: initial;
        height: 100%;
        overscroll-behavior: contain;
    }

    & table {
        width: 100%;
    }

    & thead tr:not(.groups) th:last-child::before {
        display: none;
    }

    & tbody tr {
        cursor: pointer;

        &.exist {
            pointer-events: none;

            & .is-data {
                opacity: .4;
            }
        }
    }
}

/* modal table */

}