.verification-code {
  display: block;

  .verification-code-controls {
    display: flex;
    justify-content: center;

    .digit-field {
      input {
        position: relative;
        display: inline-flex;
        width: 1.5rem;
        font-size: 2rem;
        border-radius: 0.375em;
        color: var(--primary-text-color, #707584);
        appearance: none;
        align-items: center;
        border: 1px solid var(--primary-text-color, #707584);
        justify-content: center;
        line-height: 1.5;
        padding: calc(0.5em - 1px) calc(0.5em - 1px);
        vertical-align: middle;
        box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
        text-align: center;

        @media (max-width: 660px) {
          padding: 0.5rem;
        }

        &:focus-within,
        &:active {
          background: var(--light-secondary-color, #a30000);
          border-color: var(--secondary-color, #a30000);
        }
      }

      &.filled:not(:focus-within) {
        * {
          background: var(--secondary-color, #a30000);
        }

        input {
          color: var(--light-secondary-color);
        }
      }
    }

    .digit-field + .digit-field {
      margin-left: 0.5rem;
    }
  }

  .action-btns {
    display: flex;
    margin-top: 2rem;
    align-items: center;
    justify-content: center;

    button {
      width: 100%;
      height: 38px;
      max-width: 310px;
    }
  }
}