import styled, { css } from "styled-components";
import { classes, tokens } from "./Editable.tokens";
export const EditButton = styled.span.withConfig({
    displayName: "Editable.styles__EditButton",
    componentId: "sc-e66a3df4-0"
})([
    `position:relative;align-self:stretch;display:`,
    `;`
], ({ isHidden })=>isHidden ? 'none' : '');
export const StyledInput = styled.input.withConfig({
    displayName: "Editable.styles__StyledInput",
    componentId: "sc-e66a3df4-1"
})([
    ``
]);
export const StyledPlacehpolder = styled.span.withConfig({
    displayName: "Editable.styles__StyledPlacehpolder",
    componentId: "sc-e66a3df4-2"
})([
    `display:inline-block;color:var(`,
    `);`
], tokens.placeholderColor);
export const 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);
