import styled, { css } from 'styled-components';
import { applyEllipsis, applyDisabled } from '../../mixins';
import { secondary, tertiary, body1, caption } from '../../tokens';
import { fieldStatuses } from './Field.statuses';
/**
 * Common dynamic placeholder.
 */ export var FieldPlaceholder = styled.label.withConfig({
    displayName: "Field__FieldPlaceholder",
    componentId: "sc-cb2977c5-0"
})([
    "position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;color:",
    ";pointer-events:none;transition:",
    ";transform-origin:top left;",
    ""
], tertiary, function(param) {
    var theme = param.theme;
    return theme.lowPerformance ? 'unset' : 'all 0.1s ease-in';
}, applyEllipsis);
/**
 * Content wrapper for left and right slots of the field.
 */ export var FieldContent = styled.div.withConfig({
    displayName: "Field__FieldContent",
    componentId: "sc-cb2977c5-1"
})([
    "position:absolute;top:0;",
    ";bottom:0;display:flex;align-items:center;height:3rem;"
], function(param) {
    var pos = param.pos;
    return pos === 'left' ? 'left: 1rem' : 'right: 1rem';
});
/**
 * An inline block to place a helper text under the form item.
 */ export var FieldHelper = styled.span.withConfig({
    displayName: "Field__FieldHelper",
    componentId: "sc-cb2977c5-2"
})([
    "",
    ";display:block;margin-top:0.25rem;",
    ""
], caption, applyEllipsis);
/**
 * Common container for singular form item.
 */ export var FieldRoot = styled.div.withConfig({
    displayName: "Field__FieldRoot",
    componentId: "sc-cb2977c5-3"
})([
    "",
    ";position:relative;display:block;box-sizing:border-box;color:",
    ";",
    " ",
    " ",
    " ",
    ""
], body1, secondary, applyDisabled, function(param) {
    var _param_$size = param.$size, $size = _param_$size === void 0 ? 'm' : _param_$size;
    return $size === 'l' ? css([
        "",
        "{top:1.125rem;left:1rem;right:1rem;}input:not(:placeholder-shown) ~ ",
        "{transform:scale(0.75);top:0.375rem;}",
        "{height:3.5rem;}"
    ], FieldPlaceholder, FieldPlaceholder, FieldContent) : css([
        "",
        "{height:3rem;}"
    ], FieldContent);
}, function(param) {
    var $isContentLeft = param.$isContentLeft, $isContentRight = param.$isContentRight;
    return css([
        "input,textarea{",
        "  ",
        "}",
        "{",
        "  ",
        "}"
    ], $isContentLeft && 'padding-left: 3.125rem;', $isContentRight && 'padding-right: 3.125rem;', FieldPlaceholder, $isContentLeft && 'left: 3.125rem;', $isContentRight && 'right: 3.125rem;');
}, function(param) {
    var $isHelper = param.$isHelper, status = param.status;
    return status && ($isHelper ? css([
        "",
        "{color:",
        ";}"
    ], FieldHelper, fieldStatuses[status]) : css([
        "",
        "{color:",
        ";}"
    ], FieldPlaceholder, fieldStatuses[status]));
});
