.component-input{display:block;font-weight:400;font-size:14px;position:relative;color:#f8fafc}.component-input .label{font-weight:600;font-size:.8rem;padding:0 .2rem;color:#24282e;transition:color .1s ease-in-out}.component-input.error .label{color:#de1919}.component-input.error .input-wrapper{border-color:#de1919}.component-input:has(input:focus) .input-wrapper{border-color:#3895ff}.component-input .input-wrapper{border:1px solid #e3e8ef;height:40px;line-height:1;display:flex;border-radius:.5rem;align-items:center;padding:0 .5rem;width:auto;overflow:hidden;box-sizing:border-box;background-color:#fff}.component-input .input-wrapper:has(:disabled){background-color:#cacaca;cursor:not-allowed}.component-input .input-wrapper>.outer-input{flex-grow:1}.component-input .input-wrapper>.outer-input input{width:100%;margin:0;padding:0;background:none;border:none;border-radius:0;font-weight:500;font-size:12px}.component-input .input-wrapper>.outer-input input:focus{outline:none}.component-input .input-wrapper>.outer-input input:disabled{opacity:.3;cursor:not-allowed}.component-input .input-wrapper>.outer-input input::placeholder{color:#656565;opacity:.5;font-size:14px;font-weight:500;font-style:italic}.component-input .input-wrapper .append,.component-input .input-wrapper .preppend{height:100%;min-width:1.3rem;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;margin:0 .3rem}.component-input .input-wrapper .append svg,.component-input .input-wrapper .preppend svg{max-height:100%}