import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { ToggleButtonGroup } from "@material-ui/lab";
import { ExpressionContext, ExpressionRenderType } from "./ExpressionContext";
export const ExpressionDiv = styled.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 = styled("div") `
    display: flex;
    align-items: center;
    ${(props) => {
    var _a;
    return props.renderType === ExpressionRenderType.FULL
        ? `
			padding: 4px;
			font-size: 14px;
			font-weight: 600;
			font-family: Mulish;
			line-height: 20px;
			color: #677C95;
		
			${props.hasChild ? `flex: 1;` : ``};
		`
        : `
                padding: 0 2px;
                white-space: pre;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
                letter-spacing: 0px;
                text-align: left;
                color: ${((_a = props.compactColor) === null || _a === void 0 ? void 0 : _a.expression) || "rgba(39, 41, 50, 1)"};
            `;
}}

    &:first-child {
        padding-left: 0;
    }
`;
export const ExpressionPiece = (props) => {
    const context = React.useContext(ExpressionContext);
    return _jsx(StyledExpressionPiece, Object.assign({}, props, { renderType: context.renderType, compactColor: context.color }), void 0);
};
const StyledExpressionLineDiv = styled.div `
    display: flex;
    align-items: center;
    clear: left;
    width: 100%;
    ${(props) => {
    var _a;
    return props.renderType === ExpressionRenderType.FULL
        ? `
                margin-bottom: 3px;
                font-size: 14px;
                font-weight: 600;
                font-family: Mulish;
                line-height: 20px;
                color: ${props.color || "#677C95"};
                flex-wrap: nowrap;
            `
        : `
                &,
                .MuiTypography-body1 {
                    font-family: Inter;
                    font-size: 12px !important;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 20px;
                    letter-spacing: 0px;
                    text-align: left;
                    color: ${((_a = props.compactColor) === null || _a === void 0 ? void 0 : _a.expression) || "rgba(39, 41, 50, 1)"};

                    white-space: pre;

                    .InlineEdit {
                        border-bottom: none !important;
                        padding: 0px;
                    }
                }
		
		`;
}}
`;
export const ExpressionLineDiv = (props) => {
    const context = React.useContext(ExpressionContext);
    return _jsx(StyledExpressionLineDiv, Object.assign({}, props, { renderType: context.renderType, compactColor: context.color }), void 0);
};
const StyledBracketedDiv = styled("div") `
    display: flex;
    align-items: center;
    position: relative;

    ${(props) => props.renderType === ExpressionRenderType.FULL
    ? `
			margin-left: 6px;
			padding: 2px 4px;
			margin-right: 10px;
			font-size: 14px;
			font-weight: 600;
			font-family: Mulish;
			line-height: 20px;
			color: #677C95;
			${props.hasChild ? `flex: 1;` : ``}
		`
    : `
			margin-left: 4px;
		    font-family: Inter;
		    font-style: normal;
		    font-weight: 500;
		    font-size: 12px;
		    line-height: 20px;
		    color: #272932;
			padding: 0px 2px;
		`}

    &::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;
    }
`;
export const BracketedDiv = (props) => {
    const context = React.useContext(ExpressionContext);
    return _jsx(StyledBracketedDiv, Object.assign({}, props, { renderType: context.renderType }), void 0);
};
export const RuleChangeToggleButtonGroup = styled(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