@use 'sass:math';
@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

      input::placeholder
        color: currentColor
        opacity: var(--v-disabled-opacity)

      &.v-field--focused
        input::placeholder
          opacity: 0

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

  .v-otp-input__content
    align-items: center
    display: flex
    gap: $otp-input-content-gap
    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

  @at-root
    @include tools.density('v-otp-input', $input-density) using ($modifier)
      .v-otp-input__content
        height: #{$otp-input-content-height + math.div($modifier, 2)}

  .v-otp-input__field
    padding: 0
    margin: 0
    border-radius: 0
    font: inherit
    border-style: none
    color: inherit
    background-color: transparent
    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