// Imports
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

.v-otp-input
  @include tools.rounded(4px)

  align-items: center
  display: flex
  justify-content: center
  padding: .5rem
  position: relative

  .v-field
    height: 100%
    margin: 0 .25rem

.v-otp-input__divider
  margin: 0 8px

.v-otp-input__content
  align-items: center
  display: flex
  height: 64px
  padding: .5rem
  justify-content: center
  max-width: 320px
  position: relative
  border-radius: inherit

  .v-otp-input--divided &
    max-width: 360px

.v-otp-input__field
  font-size: 1.25rem
  height: 100%
  outline: none
  text-align: center
  width: 100%

  &[type=number]::-webkit-outer-spin-button,
  &[type=number]::-webkit-inner-spin-button
    -webkit-appearance: none
    margin: 0

  &[type=number]
    -moz-appearance: textfield

.v-otp-input__loader
  align-items: center
  display: flex
  height: 100%
  justify-content: center
  width: 100%