"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RuleChangeToggleButtonGroup = exports.BracketedDiv = exports.ExpressionLineDiv = exports.ExpressionPiece = exports.ExpressionDiv = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const material_1 = require("@mui/material");
const ExpressionReactContext_1 = require("../Structure/ExpressionReactContext");
exports.ExpressionDiv = styled_components_1.default.div `
    display: flex;
    align-items: center;
    border: 2px solid lightgrey;
    border-radius: 8px;
    padding-top: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
    padding-left: 7px;
`;
const StyledExpressionPiece = (0, styled_components_1.default)("div") `
    display: flex;
    align-items: center;
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
			padding: 4px;
			font-size: 14px;
			font-weight: 600;
			
			line-height: 20px;
			color: #677C95;
		
			${props.hasChild ? `flex: 1;` : ``};
		`
    : `
                padding: 0 2px;
                white-space: pre;
                
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 15px;
                letter-spacing: 0px;
                text-align: left;
                color: ${props.compactColor?.expression || "rgba(39, 41, 50, 1)"};
            `}

    &:first-child {
        padding-left: 0;
    }
`;
const ExpressionPiece = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledExpressionPiece, { ...props, renderType: context.renderType, compactColor: context.color });
};
exports.ExpressionPiece = ExpressionPiece;
const StyledExpressionLineDiv = styled_components_1.default.div `
    display: flex;
    align-items: center;
    clear: left;
    width: 100%;
    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
                margin-bottom: 3px;
                font-size: 14px;
                font-weight: 600;
                
                line-height: 20px;
                color: ${props.color || "#677C95"};
                flex-wrap: nowrap;
            `
    : `
                &,
                .MuiTypography-body1 {
                    
                    font-size: 12px !important;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 15px;
                    letter-spacing: 0px;
                    text-align: left;
                    color: ${props.compactColor?.expression || "rgba(39, 41, 50, 1)"};

                    white-space: pre;

                    .InlineEdit {
                        border-bottom: none !important;
                        padding: 0px;
                    }
                }
		
		`}
`;
const ExpressionLineDiv = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledExpressionLineDiv, { ...props, renderType: context.renderType, compactColor: context.color });
};
exports.ExpressionLineDiv = ExpressionLineDiv;
const StyledBracketedDiv = (0, styled_components_1.default)("div") `
    display: flex;
    align-items: center;
    position: relative;

    ${(props) => props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL
    ? `
			margin-left: 6px;
			padding: 2px 4px;
			margin-right: 10px;
			font-size: 14px;
			font-weight: 600;
			
			line-height: 20px;
			color: #677C95;
			${props.hasChild ? `flex: 1;` : ``}
            &::before {
                content: "";
                width: 4px;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                border: 1px solid #93a9bf;
                border-right: none;
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
        
            &::after {
                content: "";
                width: 4px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                border: 1px solid #93a9bf;
                border-left: none;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
		`
    : `
			margin-left: 4px;
		    
		    font-style: normal;
		    font-weight: 500;
		    font-size: 12px;
		    line-height: 15px;
		    color: #272932;
			padding: 0px 2px;
		`}
`;
const BracketedDiv = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    return (0, jsx_runtime_1.jsx)(StyledBracketedDiv, { ...props, renderType: context.renderType });
};
exports.BracketedDiv = BracketedDiv;
exports.RuleChangeToggleButtonGroup = (0, styled_components_1.default)(material_1.ToggleButtonGroup) `
    && {
        .MuiToggleButton-root {
            border: 1px solid #93a9bf;
            box-sizing: border-box;
            width: 28px;
            height: 28px;
            border-radius: 4px;

            &:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &.Mui-selected {
                background: #93a9bf;
            }

            &:hover {
                background: #4b6080;
            }
        }
    }
`;
//# sourceMappingURL=ExpressionStyles.js.map