"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.errorCSS = exports.focusCSS = exports.label = exports.inputContainer = exports.wrapper = exports.input = void 0;
const theme_1 = require("../../../theme");
const input = {
    "height": (0, theme_1.dimensionsPxToRem)(103),
    "fontSize": (0, theme_1.fontPxToRem)(25),
    "color": "$text",
    "border": "none",
    "display": "block",
    "width": "100%",
    "background": "none",
    "fontFamily": "inherit",
    "padding": "1.2em 0",
    "flex": 1,
    "&::placeholder": {
        color: "$sub",
    },
    "&:read-only, &:disabled, &[data-error=true]": {
        color: "inherit",
    },
};
exports.input = input;
const focusCSS = {
    borderColor: "$focusColor",
};
exports.focusCSS = focusCSS;
const errorCSS = {
    borderColor: "$pinky2",
    color: "$red1",
};
exports.errorCSS = errorCSS;
const wrapper = {
    background: "$background",
    display: "inline-flex",
    width: "100%",
    borderRadius: "2px",
    padding: `0 ${(0, theme_1.dimensionsPxToRem)(36)}`,
    border: `${(0, theme_1.borderPxToRem)(1)} solid $border`,
    alignItems: "center",
    position: "relative",
    variants: {
        disabled: {
            true: {
                background: "$inputDisabledBg",
                color: "$inputDisabledText",
            },
        },
        readOnly: {
            true: {
                color: "$inputDisabledText",
            },
        },
        focused: {
            true: focusCSS,
        },
        error: {
            true: {
                "&": errorCSS,
            },
        },
    },
};
exports.wrapper = wrapper;
const inputContainer = {
    position: "relative",
    display: "flex",
    flex: 1,
    alignSelf: "stretch",
    alignItems: "center",
    backgroundColor: "inherit",
};
exports.inputContainer = inputContainer;
const label = {
    position: "absolute",
    left: 0,
    color: "$sub",
    pointerEvents: "none",
    backgroundColor: "inherit",
    padding: `0 ${(0, theme_1.dimensionsPxToRem)(12)}`,
    marginLeft: `-${(0, theme_1.dimensionsPxToRem)(12)}`,
    maxWidth: "100%",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    transition: "top 150ms ease, font-size 150ms ease, color 150ms ease",
    top: "50%",
    transform: "translateY(-50%)",
    fontSize: (0, theme_1.fontPxToRem)(25),
    lineHeight: 1,
    variants: {
        floating: {
            true: {
                top: 0,
                fontSize: (0, theme_1.fontPxToRem)(17),
                color: "$text",
            },
        },
        error: {
            true: {},
        },
    },
    compoundVariants: [
        {
            floating: true,
            error: true,
            css: { color: "$red1" },
        },
    ],
};
exports.label = label;
//# sourceMappingURL=Input.css.js.map