"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const polished_1 = require("polished");
const Flex_1 = require("../../components/Flex");
const getInputStyles = ({ theme, readOnly, focused, disabled, invalid, }) => {
    if (disabled) {
        return {
            borderColor: theme.colors.disabled,
        };
    }
    if (readOnly) {
        return {
            borderColor: theme.colors.disabled,
            backgroundColor: theme.colors.disabled,
            color: theme.colors.baseText,
        };
    }
    if (invalid) {
        if (focused) {
            return {
                borderColor: theme.colors.red,
            };
        }
        return {
            borderColor: theme.colors.red,
            backgroundColor: polished_1.lighten(0.42, theme.colors.red[0]),
        };
    }
    if (focused) {
        return {
            borderColor: theme.colors.brandMain,
        };
    }
    return {};
};
exports.Wrapper = styled_components_1.default.label(props => (Object.assign({
    display: 'flex',
    alignItems: 'center',
    border: `1px solid ${props.theme.colors.placeholder}`,
    borderRadius: props.theme.radii[1],
    color: props.theme.colors.highlightText,
    height: '2.5rem',
    backgroundColor: 'white',
}, getInputStyles(props))));
exports.BaseInputStyle = ({ theme, unit, icon }) => (Object.assign({ display: 'block', width: '100%', flexGrow: 1, boxSizing: 'border-box', height: '100%', padding: '0 1rem', marginLeft: '2px', marginRight: '2px', backgroundColor: 'white', outline: 'none', color: 'inherit', fontSize: theme.fontSizes[1], fontFamily: theme.fontFamilies.baseText, border: 'none', borderBottom: '1px solid transparent' }, (unit && { paddingRight: '50px' }), (icon && { paddingLeft: '40px' }), { transition: `all ${theme.transitions.hover.ms}ms`, 
    /* Remove ugly handles on Chrome/Mozilla for number inputs (until mouse hover) */
    /* Only on desktop */
    [`@media screen and (min-width: ${theme.breakpoints.sm})`]: {
        '-moz-appearance': 'textfield',
        '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
            '-webkit-appearance': 'none',
        },
    }, '::placeholder': {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: theme.colors.placeholder,
        opacity: 1 /* Firefox */,
        fontFamily: 'Inter',
        fontStyle: 'normal',
        fontWeight: theme.fontWeights.normal,
        fontSize: '14px',
        lineHeight: '23px',
    }, ':-ms-input-placeholder': {
        /* Internet Explorer 10-11 */
        color: theme.colors.placeholder,
        fontFamily: 'Inter',
        fontStyle: 'normal',
        fontWeight: theme.fontWeights.normal,
        fontSize: '14px',
        lineHeight: '23px',
    }, '::-ms-input-placeholder': {
        /* Microsoft Edge */
        color: theme.colors.placeholder,
        fontFamily: 'Inter',
        fontStyle: 'normal',
        fontWeight: theme.fontWeights.normal,
        fontSize: '14px',
        lineHeight: '23px',
    } }));
exports.Input = styled_components_1.default.input(exports.BaseInputStyle);
exports.Unit = styled_components_1.default(Flex_1.Flex)(({ theme }) => ({
    alignItems: 'center',
    color: theme.colors.placeholder,
    fontSize: theme.fontSizes.baseText,
    fontFamily: theme.fontFamilies.baseText,
    flexShrink: 0,
    marginRight: '1rem',
}));
exports.Icon = styled_components_1.default(Flex_1.Flex)(({ theme }) => ({
    alignItems: 'center',
    color: theme.colors.placeholder,
    fontSize: theme.fontSizes.baseText,
    fontFamily: theme.fontFamilies.baseText,
    flexShrink: 0,
    marginLeft: '1rem',
}));
//# sourceMappingURL=styles.js.map