@layer components{.code-input{border-radius:var(--rounded-radius);background-color:#fff;border:1px solid #d1d5dc;gap:15px;max-width:300px;padding:25px 15px;display:flex}.code-input .input__field{border:none;border-bottom:1px solid color-mix(in srgb, var(--color-grey), #fff 35%);font-size:var(--font-size-extra);background-color:#0000;border-radius:0;padding-inline:1.3rem}.code-input .input__field:focus{outline:none}.code-input.code-input--invalid{color:var(--control-invalid-text-color);border:1px solid var(--control-invalid-border-color)}.code-input.code-input--invalid .input__field{border-bottom:1px solid var(--control-invalid-border-color)}}