// 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: $otp-input-padding
  position: relative

  .v-field
    height: 100%

.v-otp-input__divider
  margin: $otp-input-divider-margin

.v-otp-input__content
  align-items: center
  display: flex
  gap: $otp-input-content-gap
  height: $otp-input-content-height
  padding: $otp-input-content-padding
  justify-content: center
  max-width: $otp-input-content-max-width
  position: relative
  border-radius: inherit

  .v-otp-input--divided &
    max-width: $otp-input-divided-content-max-width

.v-otp-input__field
  color: inherit
  font-size: $otp-input-field-font-size
  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%