@use "design";

$letter-spacing: 0.4rem;

@mixin inputFont {
  // We have to override input styles...maybe there's a better way?
  font-family: design.$font-monospace !important;
  font-size: 1.5rem !important;
  text-transform: lowercase !important;
  letter-spacing: $letter-spacing !important;
}

.otpInput {
  @include inputFont();
}

.wrapper {
  position: relative;
}

.placeholders {
  pointer-events: none;
  position: absolute;
  // Try to align it with the top-left of the input *text*.
  top: 1.75em;
  left: design.$card-h-padding;

  // Apply the fonts here too so we can use font-relative units.
  @include inputFont();

  // The height of the input text itself, plus a little margin.
  height: 1em;
  // Put the placeholders next to each other and at the bottom of the input.
  display: flex;
  align-items: end;
}

.dash,
.character {
  $gap: 0.2rem;

  width: calc(1ch + #{$letter-spacing - $gap});
  margin-right: $gap;
}

.character {
  height: 2px;
  background: design.$card-border-color;
}