import * as React from 'react';
import { Portal } from '@fluentui/react-portal';
import { makeStyles } from '@fluentui/react-make-styles';
var useStyles = makeStyles({
    container: function (theme) { return ({
        border: "3px solid " + theme.alias.color.red.background3,
        padding: '10px',
    }); },
    portalContent: function (theme) { return ({
        backgroundColor: theme.alias.color.yellow.background3,
        border: '3px dashed',
        marginTop: '10px',
    }); },
});
var Container = function (_a) {
    var children = _a.children;
    var styles = useStyles();
    return (React.createElement("div", { className: styles.container },
        "Portal nested within",
        children));
};
var ExamplePortalContent = function (_a) {
    var children = _a.children;
    var styles = useStyles();
    return React.createElement("div", { className: styles.portalContent }, children);
};
export var DefaultPortal = function () {
    return (React.createElement(Container, null,
        React.createElement(Container, null,
            React.createElement(Portal, null,
                React.createElement(ExamplePortalContent, null, "Portal content")),
            React.createElement(Portal, null,
                React.createElement(ExamplePortalContent, null, "Portal content")))));
};
export var NestedPortals = function () {
    return (React.createElement(Container, null,
        React.createElement(Container, null,
            React.createElement(Portal, null,
                React.createElement(ExamplePortalContent, null, "Outer portal"),
                React.createElement(Portal, null,
                    React.createElement(ExamplePortalContent, null, "Inner portal"))))));
};
//# sourceMappingURL=Portal.stories.js.map