.otp-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 16px;

  .otp-input {
    display: flex;
    width: 56px;
    height: 56px;
    text-align: center;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid var(--color-slate-300, #e2e8f0);
    background: var(--White, #fff);
    caret-color: transparent;
    cursor: default;

    overflow: hidden;
    color: var(--input-text-placeholder-Default, var(--color-slate-600, #718096));
    text-align: center;
    text-overflow: ellipsis;

    /* text-16-xl/semibold/lineheight-20 */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */

    &::selection {
      background: transparent;
    }

    &:focus {
      border-color: var(--color-blue-500, #2095f3);
      box-shadow: 0 0 10px var(--color-slate-300, #e2e8f0);
      transform: scale(1.05);
    }
  }
}