import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { classes, tokens } from "./CodeInput.tokens";
export const base = /*#__PURE__*/ css("display:flex;flex-direction:column;justify-content:center;width:min-content;align-items:center;&.", classes.captionAlignLeft, "{align-items:start;}", "base");
export const CodeWrapper = /*#__PURE__*/ styled("div", {
    target: "e1kklyp00",
    label: "CodeWrapper"
})("display:flex;align-items:center;");
export const CodeGroup = /*#__PURE__*/ styled("div", {
    target: "e1kklyp01",
    label: "CodeGroup"
})("display:flex;align-items:center;");
export const Separator = /*#__PURE__*/ styled("div", {
    target: "e1kklyp02",
    label: "Separator"
})("width:var(", tokens.separatorWidth, ");");
export const ItemInput = /*#__PURE__*/ styled("input", {
    target: "e1kklyp03",
    label: "ItemInput"
})("box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;caret-color:transparent;caret:none;opacity:", ({ hide })=>hide ? '0' : '1', ";");
export const ItemWrapper = /*#__PURE__*/ styled("div", {
    target: "e1kklyp04",
    label: "ItemWrapper"
})("position:relative;");
export const ItemCircle = /*#__PURE__*/ styled("div", {
    target: "e1kklyp05",
    label: "ItemCircle"
})("position:absolute;top:calc(50% - calc(var(", tokens.codeItemCircleSize, ") / 2));left:calc(50% - calc(var(", tokens.codeItemCircleSize, ") / 2));width:var(", tokens.codeItemCircleSize, ");height:var(", tokens.codeItemCircleSize, ");box-sizing:border-box;border-radius:100%;background-color:'transparent';");
export const CaptionWrapper = /*#__PURE__*/ styled("div", {
    target: "e1kklyp06",
    label: "CaptionWrapper"
})("text-align:", ({ captionAlign })=>captionAlign, ";align-self:", ({ captionAlign })=>captionAlign, ";width:", ({ widthValue })=>widthValue || 'auto', ";white-space:pre-line;");
