.textfield-wrapper{position:relative;width:100%;&.with-left-icon{.left-icon{position:absolute;left:14px;top:28px;transform:translateY(-50%);z-index:1;filter:var(--icon-default-filter)}.textfield-input{.MuiSelect-select,input,label{margin-left:45px;&::placeholder{margin-left:45px}}label{&.Mui-focused:not(.Mui-disabled):not(.Mui-error){color:var(--label-text-focused)}&.MuiInputLabel-root{&.Mui-disabled:not(.MuiInputLabel-shrink){color:var(--label-text-disabled)}&:not(.MuiInputLabel-shrink){top:-4px}}}p{margin-left:12px}&.filled{.MuiSelect-select,input,label{margin-left:35px;&::placeholder{margin-left:35px}}label{&.MuiInputLabel-root{&:not(.MuiInputLabel-shrink){top:0}}}}}&.wrapper-disabled{.left-icon{filter:var(--icon-disabled-filter)}&.wrapper-filled{.left-icon{filter:var(--icon-disabled-filter-filled)}}}}}.textfield-input{width:100%;label{&.MuiInputLabel-root{&:not(.MuiInputLabel-shrink){color:var(--input-text)}}}input,label,p{font-family:Ubuntu Sans,sans-serif;font-weight:500}p{margin-left:0}input{color:var(--input-text);&::placeholder{color:var(--input-placeholder);opacity:1}&.Mui-disabled{-webkit-text-fill-color:var(--input-text-disabled);&::placeholder{-webkit-text-fill-color:var(--input-placeholder-disabled);opacity:1}}&:-webkit-autofill{-webkit-text-fill-color:var(--input-text);transition:background-color 9999s ease-in-out 0s}&:-webkit-autofill,&:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 1000px transparent}}label,p{color:var(--label-text);&.Mui-disabled{color:var(--label-text-disabled)}&.Mui-error{color:var(--label-text-error)}}.MuiInputBase-root{.MuiInputAdornment-root{img{filter:var(--icon-default-filter)}}&.Mui-disabled{.MuiInputAdornment-root{img{filter:var(--icon-disabled-filter)}}}}.MuiFilledInput-root,.MuiInputBase-root{&.MuiFilledInput-underline,&.MuiInput-underline{&:before{border-bottom:2px solid var(--underline-default)}&:not(.Mui-disabled):not(.Mui-error){&:before{border-bottom:2px solid var(--underline-default)}&:hover{&:before{border-bottom:2px solid var(--underline-hover)}}}&.Mui-disabled{&:before{border-bottom:2px solid var(--underline-disabled)}}&.Mui-error{&:after,&:before{border-bottom:2px solid var(--underline-error)}}&.Mui-focused:not(.Mui-error){&:after{border-bottom:2px solid var(--underline-focused)}}}}&.filled{.MuiFilledInput-root{border-radius:12px 12px 0 0;background-color:var(--filled-bg);input{&:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-text-fill-color:var(--input-text);transition:background-color 9999s ease-in-out 0s}&:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--filled-bg-focus) inset}}&.Mui-disabled{background-color:var(--filled-bg-disabled)}&.Mui-focused,&:hover:not(.Mui-disabled):not(.Mui-error){background-color:var(--filled-bg-hover)}&.Mui-error{background-color:var(--filled-bg-error);input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--filled-bg-error) inset;-webkit-text-fill-color:var(--input-text-error)}}}input{&.Mui-disabled{color:var(--input-text-filled-disabled);&::placeholder{-webkit-text-fill-color:var(--input-text-filled-disabled)}}}label,p{&.Mui-disabled{color:var(--input-text-filled-disabled)}}p{margin-left:12px}}}