.TextField{position:relative}.TextField input,.TextField textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-bottom:2px solid var(--color-primary-carbon-dark);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-base);font-family:var(--font-family-base);font-size:var(--text-copy-medium-font-size);font-weight:400;height:50px;line-height:var(--text-copy-medium-line-height);padding:8px 0;width:100%}.TextField input::-webkit-input-placeholder{color:transparent}.TextField input::-moz-placeholder{color:transparent}.TextField input::-ms-input-placeholder{color:transparent}.TextField input::placeholder{color:transparent}.TextField textarea::-webkit-input-placeholder{color:transparent}.TextField textarea::-moz-placeholder{color:transparent}.TextField textarea::-ms-input-placeholder{color:transparent}.TextField textarea::placeholder{color:transparent}.TextField input:focus,.TextField textarea:focus{border-color:var(--color-primary-carbon-dark);-webkit-box-shadow:none;box-shadow:none;outline:none}.TextField input:not(:-moz-placeholder)~label{opacity:1;transform:scale(.8) translateY(-32px)}.TextField input:not(:placeholder-shown)~label{opacity:1;-webkit-transform:scale(.8) translateY(-32px);transform:scale(.8) translateY(-32px)}.TextField textarea:not(:-moz-placeholder)~label{opacity:1;transform:scale(.8) translateY(-32px)}.TextField textarea:not(:placeholder-shown)~label{opacity:1;-webkit-transform:scale(.8) translateY(-32px);transform:scale(.8) translateY(-32px)}.TextField input:focus~label,.TextField textarea:focus~label{opacity:1;-webkit-transform:scale(.8) translateY(-32px);transform:scale(.8) translateY(-32px)}.TextField label{border:1px solid transparent;color:var(--color-text-base);font-family:var(--font-family-base);font-size:var(--text-copy-medium-font-size);font-weight:400;height:100%;left:0;line-height:var(--text-copy-medium-line-height);overflow:hidden;padding:8px 0;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transition:opacity .1s ease-in-out,-webkit-transform .1s ease-in-out;transition:opacity .1s ease-in-out,-webkit-transform .1s ease-in-out;transition:opacity .1s ease-in-out,transform .1s ease-in-out;transition:opacity .1s ease-in-out,transform .1s ease-in-out,-webkit-transform .1s ease-in-out;white-space:nowrap;width:100%}.TextField.has-icon .icon{height:24px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}.TextField.has-icon .icon svg{color:var(--color-primary-carbon-dark);height:100%;width:100%}.TextField.has-icon-left input,.TextField.has-icon-left label{padding-left:48px}.TextField.has-icon-left .icon{left:0}.TextField.has-icon-right input,.TextField.has-icon-right label{padding-right:48px}.TextField.has-icon-right .icon{right:0}.TextField .error-message{color:var(--color-text-copy);color:var(--color-status-red);display:none;font-family:var(--font-family-base);font-size:var(--text-copy-small-font-size);font-weight:400;line-height:var(--text-copy-small-line-height)}.TextField:has(.has-error) input{border-color:var(--color-status-red)}.TextField:has(.has-error) textarea{border-color:var(--color-status-red)}.TextField.has-error input,.TextField.has-error textarea{border-color:var(--color-status-red)}.TextField:has(.has-error) .error-message{display:block}.TextField.has-error .error-message{display:block}