"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "base", {
    enumerable: true,
    get: function() {
        return base;
    }
});
const _react = require("@emotion/react");
const _mixins = require("../../../../mixins");
const _CodeInputstyles = require("../../CodeInput.styles");
const _CodeInputtokens = require("../../CodeInput.tokens");
const base = (0, /*#__PURE__*/ _react.css)(_CodeInputstyles.CaptionWrapper, "{color:var(", _CodeInputtokens.tokens.captionColor, ");&.", _CodeInputtokens.classes.captionError, "{color:var(", _CodeInputtokens.tokens.captionColorError, ");}}", _CodeInputstyles.ItemInput, "{color:var(", _CodeInputtokens.tokens.codeColor, ");background-color:var(", _CodeInputtokens.tokens.backgroundColor, ");box-shadow:inset 0 0 0 var(", _CodeInputtokens.tokens.borderWidth, ") var(", _CodeInputtokens.tokens.borderColor, ");}", _CodeInputstyles.ItemCircle, "{border:var(", _CodeInputtokens.tokens.codeItemCircleBorderWidth, ") solid var(", _CodeInputtokens.tokens.codeColor, ");background-color:'transparent';&.", _CodeInputtokens.classes.itemCirlceFilled, "{background-color:var(", _CodeInputtokens.tokens.codeColor, ");}&.", _CodeInputtokens.classes.itemCircleErrorAnimation, "{animation:shakingError 0.3s forwards;}&.", _CodeInputtokens.classes.itemCircleError, "{background-color:var(", _CodeInputtokens.tokens.codeColorError, ");border:var(", _CodeInputtokens.tokens.codeItemCircleBorderWidth, ") solid var(", _CodeInputtokens.tokens.codeColorError, ");}&:focus-visible{outline:none;}&[data-focus-visible-added]{", (0, _mixins.addFocus)({
    outlineOffset: '0',
    outlineSize: '0.125rem',
    outlineRadius: '1rem',
    outlineColor: `var(${_CodeInputtokens.tokens.borderColorFocus})`
}), "            border:none;position:absolute;}}&:hover{.", _CodeInputtokens.classes.hoverEnabled, "{background-color:var(", _CodeInputtokens.tokens.backgroundColorHover, ");box-shadow:inset 0 0 0 var(", _CodeInputtokens.tokens.borderWidth, ") var(", _CodeInputtokens.tokens.borderColorHover, ");}}&:focus-within{", _CodeInputstyles.ItemInput, ":focus-within{box-shadow:inset 0 0 0 var(", _CodeInputtokens.tokens.borderWidth, ") var(", _CodeInputtokens.tokens.borderColorFocus, ");}}&& .", _CodeInputtokens.classes.codeErrorAnimation, "{animation:shakingError 0.3s forwards;}&& .", _CodeInputtokens.classes.codeError, "{", _CodeInputstyles.ItemInput, "{color:var(", _CodeInputtokens.tokens.codeColorError, ");background-color:var(", _CodeInputtokens.tokens.backgroundErrorColor, ");box-shadow:inset 0 0 0 var(", _CodeInputtokens.tokens.borderWidth, ") var(", _CodeInputtokens.tokens.borderErrorColor, ");}", _CodeInputstyles.ItemCircle, "{border:var(", _CodeInputtokens.tokens.codeItemCircleBorderWidth, ") solid var(", _CodeInputtokens.tokens.codeColorError, ");&.", _CodeInputtokens.classes.itemCirlceFilled, "{background-color:var(", _CodeInputtokens.tokens.codeColorError, ");}}&:focus-within{", _CodeInputstyles.ItemInput, "{background-color:var(", _CodeInputtokens.tokens.backgroundErrorColor, ");box-shadow:inset 0 0 0 var(", _CodeInputtokens.tokens.borderWidth, ") var(", _CodeInputtokens.tokens.borderErrorColor, ");}}&.", _CodeInputtokens.classes.codeErrorFade, "{", _CodeInputstyles.ItemInput, "{animation:fadeError 0.3s forwards;}}}&& .", _CodeInputtokens.classes.itemErrorAnimation, "{animation:shakingError 0.3s forwards;}&& .", _CodeInputtokens.classes.itemError, ",&& .", _CodeInputtokens.classes.itemError, ":focus-within{color:var(", _CodeInputtokens.tokens.codeColorError, ");background-color:var(", _CodeInputtokens.tokens.backgroundErrorColor, ");box-shadow:inset 0 0 0 var(", _CodeInputtokens.tokens.borderWidth, ") var(", _CodeInputtokens.tokens.borderErrorColor, ");&.", _CodeInputtokens.classes.codeErrorFade, "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", _CodeInputtokens.tokens.codeColorError, ");}100%{color:transparent;}}", "base");
