@value (
  block,
  block-xs,
  block-sm,
  block-md,
  block-lg
) from '~@xo-union/tk-css-utilities/lib/block.css';
@value (
  varCoolgray300,
  varCoolgray500,
  varIndigo600,
  varMidnight,
  varTkred500
) from '~@xo-union/tk-ui-colors/lib/variables.css';
@value ( var-sp-down-3 ) from '~@xo-union/tk-css-spacing/lib/variables.css';
.container {
  display: inline-block; }

.field:-ms-input-placeholder {
  color: varCoolgray500; }

.field::-ms-input-placeholder {
  color: varCoolgray500; }

.field::placeholder {
  color: varCoolgray500; }

.field:focus:-ms-input-placeholder {
  color: transparent; }

.field:focus::-ms-input-placeholder {
  color: transparent; }

.field:focus::placeholder {
  color: transparent; }

.field {
  composes: body1 from '~@xo-union/tk-ui-typography/lib/font-scale-categories.css';
  border-bottom: solid 1px varCoolgray300;
  border-style: none;
  color: varIndigo600;
  padding-bottom: var-sp-down-3;
  text-align: center;
  width: 100%; }
  .field:focus {
    border-bottom: solid 1px varMidnight; }

.invalid {
  border-bottom-color: varTkred500; }

.error {
  composes: caption from '~@xo-union/tk-ui-typography/lib/font-scale-categories.css';
  color: varTkred500;
  display: block;
  margin-top: var-sp-down-3; }