import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { classes, tokens } from "./CodeField.tokens";
export const base = /*#__PURE__*/ css("display:flex;flex-direction:column;justify-content:center;width:min-content;align-items:center;&.", classes.captionAlignLeft, "{align-items:flex-start;}", "base");
export const CodeWrapper = /*#__PURE__*/ styled("div", {
    target: "eh5t6vw0",
    label: "CodeWrapper"
})("display:flex;align-items:center;");
export const CodeGroup = /*#__PURE__*/ styled("div", {
    target: "eh5t6vw1",
    label: "CodeGroup"
})("display:flex;align-items:center;");
export const Separator = /*#__PURE__*/ styled("div", {
    target: "eh5t6vw2",
    label: "Separator"
})("width:var(", tokens.separatorWidth, ");");
export const ItemInput = /*#__PURE__*/ styled("input", {
    target: "eh5t6vw3",
    label: "ItemInput"
})("box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;");
export const CaptionWrapper = /*#__PURE__*/ styled("div", {
    target: "eh5t6vw4",
    label: "CaptionWrapper"
})("text-align:", ({ captionAlign })=>captionAlign, ";align-self:", ({ captionAlign })=>captionAlign, ";width:", ({ widthValue })=>widthValue || 'auto', ";white-space:pre-line;");
export const HiddenInput = /*#__PURE__*/ styled("input", {
    target: "eh5t6vw5",
    label: "HiddenInput"
})("display:none;");
