.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 16px);
    align-items: var(--stack-align, stretch);
    justify-content: var(--stack-justify, flex-start);
}

@media (min-width: 768px) {
    .ui-stack {
        gap: var(--stack-gap-md, var(--stack-gap, 16px));
    }
}

@media (min-width: 1024px) {
    .ui-stack {
        gap: var(--stack-gap-lg, var(--stack-gap-md, var(--stack-gap, 16px)));
    }
}


.ui-stack[style*="--stack-padding"] {
    padding-top: var(--stack-padding-block, 0);
    padding-bottom: var(--stack-padding-block-end, var(--stack-padding-block, 0));
    padding-left: var(--stack-padding, 0);
    padding-right: var(--stack-padding, 0);
    box-sizing: border-box;
}


.ui-stack[style*="--stack-min-height"] {
    min-height: var(--stack-min-height);
}

.ui-stack[style*="--stack-max-height"] {
    max-height: var(--stack-max-height);
}


.ui-stack--fill {
    flex: 1 1 0;
    min-height: 0;
}


.ui-stack--fill-block {
    width: 100%;
    height: 100%;
}


.ui-stack--no-shrink {
    flex-shrink: 0;
}


.ui-stack--scroll-vertical {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ui-stack--scroll-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
}

.ui-stack--scroll-both {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}