/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.108.1
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import { tasty } from '../../../tasty/index.js';
import { LayoutContent } from './LayoutContent.js';
const FooterElement = tasty(LayoutContent, {
    as: 'footer',
    qa: 'LayoutFooter',
    role: 'contentinfo',
    styles: {
        container: 'none',
        // Footer inherits auto-border from LayoutContent
        // (no border when last-child, which is typical for footers)
        height: 'min 5x',
        flexShrink: 0,
        flexGrow: 0,
        whiteSpace: 'nowrap',
        border: {
            '': 0,
            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
        },
        Inner: {
            display: 'flex',
            flow: {
                '': 'row nowrap',
                inverted: 'row-reverse nowrap',
            },
            placeContent: 'center space-between',
            placeItems: 'center stretch',
            gap: '1x',
        },
    },
});
function LayoutFooter(props, ref) {
    const { children, invertOrder, scrollbar = 'tiny', mods, ...otherProps } = props;
    const finalMods = useMemo(() => ({
        inverted: invertOrder,
        ...mods,
    }), [invertOrder, mods]);
    return (_jsx(FooterElement, { ...otherProps, ref: ref, mods: finalMods, scrollbar: scrollbar, children: children }));
}
const _LayoutFooter = forwardRef(LayoutFooter);
_LayoutFooter.displayName = 'Layout.Footer';
export { _LayoutFooter as LayoutFooter };

        