"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.After = exports.Before = exports.Contents = exports.StyledHeader = void 0;
const theme_1 = require("../../../theme");
const EqualActions_1 = require("../../ui/action/EqualActions");
const Contents = (0, theme_1.styled)("div", {
    flex: 1,
    display: "flex",
    alignItems: "center",
});
exports.Contents = Contents;
const Before = (0, theme_1.styled)("div", {
    display: "flex",
});
exports.Before = Before;
const After = (0, theme_1.styled)("div", {
    display: "flex",
});
exports.After = After;
const topBottomBeforeAfter = {
    padding: "7px 0",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
};
const leftRightBeforeAfter = {
    padding: "0 7px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
};
const topBottomShared = {
    padding: "0 16.666px",
    minHeight: (0, theme_1.pxToRem)(45),
    [`& ${Before.toString()}`]: topBottomBeforeAfter,
    [`& ${After.toString()}`]: topBottomBeforeAfter,
    [`& ${EqualActions_1.EqualActions.toString()}`]: {
        margin: `${(0, theme_1.dimensionsPxToRem)(56)} 0`,
    },
};
const leftRightShared = {
    padding: "16.666px 0",
    minWidth: (0, theme_1.pxToRem)(45),
    flexDirection: "column",
    [`& ${Contents.toString()}`]: {
        flexDirection: "column",
        alignItems: "center",
    },
    [`& ${Before.toString()}`]: Object.assign({ flexDirection: "column" }, leftRightBeforeAfter),
    [`& ${After.toString()}`]: Object.assign({ flexDirection: "column" }, leftRightBeforeAfter),
    [`& ${EqualActions_1.EqualActions.toString()}`]: {
        margin: `0 ${(0, theme_1.dimensionsPxToRem)(56)}`,
    },
};
const StyledHeader = (0, theme_1.styled)("div", {
    "--border-color": "$colors$headerBorder",
    "--background-color": "$colors$headerBg",
    "backgroundClip": "padding-box",
    "background": "var(--background-color)",
    "display": "flex",
    "alignItems": "stretch",
    "fontSize": (0, theme_1.pxToRem)(15),
    "fontWeight": "bold",
    "boxSizing": "border-box",
    "color": "$headerText",
    "gap": (0, theme_1.dimensionsPxToRem)(50),
    "variants": {
        variant: {
            toolbar: {
                "--border-color": "$colors$toolbarBorder",
                "--background-color": "$colors$toolbarBg",
            },
            colored: {
                "--border-color": "var(--custom-header-color)",
                "--background-color": "var(--custom-header-color)",
                "color": "var(--custom-text-color)",
            },
        },
        position: {
            top: Object.assign({ borderBottom: "0.37px solid var(--border-color)" }, topBottomShared),
            bottom: Object.assign({ borderTop: "0.37px solid var(--border-color)", order: 2 }, topBottomShared),
            left: Object.assign({ borderRight: "0.37px solid var(--border-color)" }, leftRightShared),
            right: Object.assign({ borderLeft: "0.37px solid var(--border-color)", order: 2 }, leftRightShared),
        },
        center: {
            true: {
                [`& ${Contents.toString()}`]: {
                    justifyContent: "center",
                },
            },
        },
    },
});
exports.StyledHeader = StyledHeader;
//# sourceMappingURL=Header.styled.js.map