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

@include tools.layer('components')
  .v-otp-input
    align-items: center
    display: flex
    justify-content: center
    padding: $otp-input-padding
    position: relative
    @include tools.rounded(4px)

    .v-field
      height: 100%

      .v-field__outline
        &__start,
        &__end
          flex: 1

  .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%

    .v-progress-linear
      position: absolute