.ty-input-otp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ty-input-otp__cell {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--ty-input-color, var(--ty-color-text));
  border: 1px solid var(--ty-input-border);
  transition: all 0.3s;
  outline: 0;
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
  background-color: var(--ty-input-bg, var(--ty-color-bg-container));
  box-shadow: var(--ty-input-shadow, none);
}
.ty-input-otp__cell:hover {
  border-color: var(--ty-input-border-hover, var(--ty-color-primary));
}
.ty-input-otp__cell:focus {
  border-color: var(--ty-input-border-focus, var(--ty-color-primary));
  box-shadow: var(--ty-input-shadow-focus, var(--ty-shadow-focus));
}
.ty-input-otp__cell::-moz-placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-input-otp__cell::placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-input-otp__cell {
  width: 36px;
  height: 36px;
  text-align: center;
  padding: 0;
  font-size: var(--ty-font-size-base);
  border-radius: var(--ty-border-radius);
  caret-color: currentcolor;
}
.ty-input-otp__cell_sm {
  width: 28px;
  height: 28px;
  font-size: var(--ty-font-size-sm);
}
.ty-input-otp__cell_md {
  width: 36px;
  height: 36px;
  font-size: var(--ty-font-size-base);
}
.ty-input-otp__cell_lg {
  width: 44px;
  height: 44px;
  font-size: var(--ty-font-size-lg);
}
.ty-input-otp__cell_disabled {
  cursor: not-allowed;
  background-color: var(--ty-input-bg-disabled, var(--ty-color-bg-disabled));
  color: var(--ty-input-text-disabled, var(--ty-color-text-quaternary));
}
.ty-input-otp__cell_disabled:hover {
  border-color: var(--ty-input-border);
}
.ty-input-otp__separator {
  display: inline-flex;
  align-items: center;
  color: var(--ty-color-text-secondary);
  font-size: var(--ty-font-size-base);
}
.ty-input-otp_disabled {
  cursor: not-allowed;
}