@use "pix-design-tokens/typography";
@use "component-state/form";

.pix-input-code {
  @extend %pix-monospace;

  display: flex;
  line-height: 1.15;

  // hide up/down cursors
  input[type='number'] {
    // Firefox
    -moz-appearance: textfield;
    appearance: textfield;

    // The rest
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
  }

  fieldset legend {
    display: none;
  }

  #pix-input-code__details-of-use {
    display: none;
  }

  input:nth-of-type(3n + 4) {
    margin-left: var(--pix-spacing-3x);
  }

  input.pix-input-code__input {
    @extend %pix-form-element-state;

    display: inline-block;
    width: 38px;
    height: 44px;
    padding: 10px var(--pix-spacing-3x) var(--pix-spacing-2x);
    color: var(--pix-neutral-900);
    font-size: 1.25rem;
    text-align: center;
    background-color: var(--pix-neutral-0);
    border: 1.4px solid var(--pix-neutral-500);
    border-radius: 4px;

    &:focus,
    &:active {
      &::placeholder {
        opacity: 0;
      }
    }

    &:not(:first-child) {
      margin-left: var(--pix-spacing-1x);
    }

    &.filled {
      background-color: var(--pix-neutral-0);
    }
  }
}