/*
* InputMasked component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-input-masked {
  &--guide {
    font-family: var(--font-family-monospace);
  }

  // Used on iOS when faking the inputMode to be type of number during focus – this fix avoids a flickering
  input::placeholder {
    color: inherit;
  }

  &--hide-controls {
    &[type='number']::-webkit-outer-spin-button,
    &[type='number']::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }

    &[type='number'] {
      appearance: textfield;
    }
  }
}

// MultiInputMask
.dnb-multi-input-mask__fieldset {
  @include fieldsetReset();

  &--horizontal {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: baseline;
    // Adds the 1rem space between legend and input wrapper, as the `display: contents` in .dnb-multi-input-mask__legend makes the margins from .dnb-form-label not apply
    gap: 1rem;
  }
}

.dnb-multi-input-mask__input.dnb-input__input {
  display: inline-block;
  width: auto;

  margin: 0;
  padding: 0 0.125rem;

  // reset vertical alignment
  transform: translateY(0);

  outline: none;

  font-family: var(--font-family-monospace);
  text-align: center;
  border: none;
  background: transparent;

  overflow: visible;
  white-space: nowrap;

  &:first-of-type {
    padding-left: 0.5rem;
  }

  &:last-of-type {
    padding-right: 0.5rem;
  }

  .dnb-input--medium &,
  .dnb-input--large & {
    padding: 0 0.25rem;
  }
}

.dnb-multi-input-mask {
  width: fit-content;

  &:not(.dnb-input__status--error) {
    .dnb-multi-input-mask__input,
    .dnb-multi-input-mask__delimiter {
      color: var(--color-black-55);

      &--highlight {
        color: var(--color-black);
      }
    }
  }
}