"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChildFullWidthDiv = exports.StyledTextField = exports.StyledFormHelperText = exports.StyledInputLabel = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const FormHelperText_1 = tslib_1.__importDefault(require("@material-ui/core/FormHelperText"));
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
exports.StyledInputLabel = (0, styled_components_1.default)(core_1.InputLabel) `
    font-family: Inter !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    margin-bottom: 12px !important;
`;
exports.StyledFormHelperText = (0, styled_components_1.default)(FormHelperText_1.default) `
    font-family: Mulish !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    color: ${({ error }) => (error ? "#F65C66" : "#677C95")} !important;
    margin-top: 6px !important;
`;
exports.StyledTextField = (0, styled_components_1.default)(core_1.TextField) `
    width: ${(props) => props.width} !important;
    box-sizing: border-box !important;
    z-index: 1 !important;

    fieldset {
        border: none !important;
    }

    label {
        padding: 0 5px;
        background-color: ${({ customstyle }) => (customstyle === "outlined" ? UIStyleConstants_1.UIStyleConstants.WHITE_COLOR : "unset")};
        top: ${({ ispicker, error }) => (ispicker === "true" && error ? "-12px" : "0px")};
    }

    input {
        color: #01244e;
        border-radius: 5.65107px;
        padding-left: ${({ customstyle }) => (customstyle !== "standard" ? "20px" : "0px")};
        padding-right: ${({ customstyle }) => (customstyle !== "standard" ? "20px" : "0px")};
        background-color: ${({ customstyle }) => (customstyle === "filled" ? "#E6E9ED" : "unset")};

        &:focus {
            border: ${({ customstyle }) => customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px"}
                solid ${({ error }) => (error ? "#F65C66" : "#1873B9")};
        }

        border: ${({ customstyle }) => (customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px")}
            solid ${({ error }) => (error ? "#F65C66" : "#E6E9ED")};
    }

    .MuiOutlinedInput-adornedStart,
    .MuiFilledInput-adornedStart {
        border: ${({ customstyle }) => (customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px")}
            solid ${({ error }) => (error ? "#F65C66" : "#E6E9ED")};

        input,
        textarea {
            border: none;
            padding-left: 0px;
        }
    }

    input[type="number"]:not([step="1"]) {
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        -moz-appearance: textfield;
    }

    textarea {
        color: #01244e;
        border-radius: 5.65107px;
        padding-top: ${({ variant }) => (variant === "outlined" ? "15px" : "0px")};
        padding-bottom: ${({ variant }) => (variant === "outlined" ? "15px" : "0px")};
        padding-left: ${({ customstyle }) => (customstyle !== "standard" ? "20px" : "0px")};
        padding-right: ${({ customstyle }) => (customstyle !== "standard" ? "20px" : "0px")};
        background-color: ${({ customstyle }) => (customstyle === "filled" ? "#E6E9ED" : "#FCFCFE")};

        &:focus {
            border: ${({ customstyle }) => customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px"}
                solid ${({ error }) => (error ? "#F65C66" : "#1873B9")};
        }

        border: ${({ customstyle }) => (customstyle === "filled" || customstyle === "standard" ? "0px" : "1.35302px")}
            solid ${({ error }) => (error ? "#F65C66" : "#E6E9ED")};
    }

    .MuiOutlinedInput-multiline {
        padding: 0px;
    }

    .MuiFormLabel-root.Mui-focused {
        top: 0px;
        color: ${({ error }) => (error ? "#F65C66" : "#15466B")};
    }

    .MuiFilledInput-underline:after,
    .MuiInput-underline:after {
        border-bottom: 1px solid #15466b;
    }

    .MuiFilledInput-underline:before,
    .MuiInput-underline:before {
        border-bottom: 1px solid #677c95;
        opacity: 0.3;
    }

    .MuiFilledInput-root,
    .MuiFilledInput-root:hover {
        background-color: #e6e9ed;
    }

    .MuiFilledInput-multiline {
        padding-left: 0px;
        padding-right: 0px;
    }

    .MuiOutlinedInput-adornedEnd {
        position: relative;
        padding-right: 0px;

        button {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
        }
    }
`;
exports.ChildFullWidthDiv = styled_components_1.default.div `
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    > * {
        width: 100%;
        margin-bottom: 10px !important;
    }
`;
//# sourceMappingURL=CommonStyled.js.map