@use "../../style/variables" as *;
@use '../../input/style/mixin' as *;

.#{$prefix}-input-otp {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  &__cell {
    @include input-default;

    width: 36px;
    height: 36px;
    text-align: center;
    padding: 0;
    font-size: var(--ty-font-size-base);
    border-radius: var(--ty-border-radius);
    caret-color: currentcolor;

    &_sm {
      width: 28px;
      height: 28px;
      font-size: var(--ty-font-size-sm);
    }

    &_md {
      width: 36px;
      height: 36px;
      font-size: var(--ty-font-size-base);
    }

    &_lg {
      width: 44px;
      height: 44px;
      font-size: var(--ty-font-size-lg);
    }

    &_disabled {
      @include input-default-disabled;
    }
  }

  &__separator {
    display: inline-flex;
    align-items: center;
    color: var(--ty-color-text-secondary);
    font-size: var(--ty-font-size-base);
  }

  &_disabled {
    cursor: not-allowed;
  }
}