.text-field{width:100%;display:flex;flex-direction:column;gap:8px}.text-field__container{display:flex;flex-direction:column;gap:8px;width:100%}.text-field__label{position:absolute;top:50%;left:16px;transform:translateY(-50%);color:var(--color-black-50);margin:0;pointer-events:none;transition:all .2s ease;background-color:var(--color-white);padding:0 4px}.text-field__input-wrapper{position:relative;background-color:var(--color-white);border:1px solid var(--color-black-50);border-radius:8px;height:56px;box-sizing:border-box;transition:border-color .2s ease;overflow:hidden}.text-field__input{color:var(--color-black);background:transparent;border:none;outline:none;padding:0 16px;margin:0;width:100%;height:100%;box-sizing:border-box}.text-field__input::placeholder{color:var(--color-black-50)}.text-field__error{color:var(--color-error)}.text-field__input:placeholder-shown{color:var(--color-black-50)}.text-field__input:placeholder-shown+.text-field__label,.text-field__input:placeholder-shown~.text-field__label{color:var(--color-black-50);top:50%;transform:translateY(-50%)}.text-field__input:focus{outline:none;color:var(--color-black)}.text-field__input:focus::placeholder{opacity:0}.text-field__input:focus+.text-field__label,.text-field__input:focus~.text-field__label{color:var(--color-black-50);top:5px;transform:none;font-size:var(--font-size-body-caption);line-height:var(--line-height-body-caption);opacity:0}.text-field__input-wrapper:focus-within{border-color:var(--color-black)}.text-field__input:not(:placeholder-shown):not(:focus){color:var(--color-black);padding-top:0}.text-field__input:not(:placeholder-shown):not(:focus)+.text-field__label,.text-field__input:not(:placeholder-shown):not(:focus)~.text-field__label{display:none}.text-field__input:invalid{color:var(--color-black-50)}.text-field__input:invalid+.text-field__label,.text-field__input:invalid~.text-field__label{color:var(--color-black-50);top:50%;transform:translateY(-50%)}.text-field__input-wrapper:has(.text-field__input:invalid:not(:placeholder-shown)){border-color:var(--color-error)}.text-field__input:invalid:focus{color:var(--color-black)}.text-field__input:invalid:focus+.text-field__label,.text-field__input:invalid:focus~.text-field__label{color:var(--color-black-50);top:5px;transform:none;font-size:var(--font-size-body-caption);line-height:var(--line-height-body-caption)}.text-field__input-wrapper:hover{border-color:var(--color-black)}.text-field__input-wrapper:has(.text-field__input:invalid:not(:placeholder-shown)):hover{border-color:var(--color-error)}@media (prefers-contrast: high){.text-field__input-wrapper{border-width:2px}.text-field__input:focus{outline-width:3px}}@media (prefers-reduced-motion: reduce){.text-field__input-wrapper,.text-field__label{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/51/assets/text-field.css.map */