import { css } from "styled-components";
import styled from "styled-components";
import { classes, tokens } from "./Editable.tokens";
export var EditButton = styled.span.withConfig({
    displayName: "Editable.styles__EditButton",
    componentId: "sc-fbb9fd05-0"
})([
    "position:relative;align-self:stretch;display:",
    ";"
], function(param) {
    var isHidden = param.isHidden;
    return isHidden ? 'none' : '';
});
export var StyledInput = styled.input.withConfig({
    displayName: "Editable.styles__StyledInput",
    componentId: "sc-fbb9fd05-1"
})([
    ""
]);
export var StyledPlacehpolder = styled.span.withConfig({
    displayName: "Editable.styles__StyledPlacehpolder",
    componentId: "sc-fbb9fd05-2"
})([
    "display:inline-block;color:var(",
    ");"
], tokens.placeholderColor);
export var base = css([
    "display:inline-flex;align-items:center;max-width:100%;cursor:pointer;.",
    "{outline:none;overflow:hidden;white-space:nowrap;caret-color:var(",
    ");}"
], classes.editableTextBox, tokens.caretColor);
