.app-otp-input{--input-padding-left:var(--input-padding-x)}.app-otp-input .otp-input-container{display:flex;gap:.75rem}.app-otp-input__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-white);border:.0625rem solid var(--color-black-200);border-radius:var(--border-radius-primary);color:var(--color-black-900);display:block;font-size:var(--body-font-size);font-weight:var(--body-font-weight);line-height:var(--body-line-height);outline:none;padding:var(--input-padding-y) var(--input-padding-x);padding-left:var(--input-padding-left);resize:none;text-align:center;transition:border-color var(--transition-duration-primary),box-shadow var(--transition-duration-primary);width:100%}.app-otp-input__input.placeholder{color:var(--color-black-500)}.app-otp-input__input::placeholder{color:var(--color-black-500)}.app-otp-input__input:-moz-placeholder,.app-otp-input__input::-moz-placeholder{color:var(--color-black-500)}.app-otp-input__input:-ms-input-placeholder{color:var(--color-black-500)}.app-otp-input__input::-webkit-input-placeholder{color:var(--color-black-500)}@media (any-hover:hover){.app-otp-input__input:not(:disabled):hover{border-color:var(--color-black-400)}}.app-otp-input__input:not(:disabled):active,.app-otp-input__input:not(:disabled):focus{border-color:var(--color-black-300)}.app-otp-input__input[type=number]{-moz-appearance:textfield}.app-otp-input__input::-webkit-inner-spin-button,.app-otp-input__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}