:root {
  --input-border-color-error: var(--dt-input-border_color-error_default);
}


/* Hidding arrows */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

// règle standard pour les input, textarea
textarea,
.input_select,
input, .input {
  padding: var(--dt-input-padding);
  margin: var(--dt-input-margin);
  border: none;
  outline: none;
  color: var(--dt-font-color_main);
  background: var(--dt-input-background_color-default);
  font-family: var(--dt-input-text-font_family);
  font-size: var(--dt-input-text-font_size);

  @include make-input-border-default();

   // HOVER + FOCUS
   &:hover {
       @include make-input-border-hover();
   }
   &:focus {
       @include make-input-border-focus();
   }
    &:disabled {
        cursor: not-allowed;
    }

  &::-webkit-input-placeholder,
  &::-moz-placeholder,
  &:-ms-input-placeholder,
  &::-ms-input-placeholder,
  &::placeholder {
    color: var(--dt-input-color-default);
  }

  // Taille par défaut
  width: var(--dt-input-max_width-default);

  // Taille différente de champs
  &.--input_full {
    width: var(--dt-input-width-full);
  }
}

// gestion de la hauteur d'un textarea (10 lignes max)
textarea {
  max-height: var(--dt-textarea-max_height);
  resize: vertical
}

/** Ajouter un symbol après un input

  div.symbol-container[data-symbol="votreSymbole"]
      input

*/
.symbol-container {
  display: flex;
  flex-direction: row;
  align-self: stretch;

  input {
    text-align: right;
  }

  &[data-symbol]::after {
    padding: 0 var(--dt-input-padding);
    content: attr(data-symbol);
    display: flex;
    align-items: center;
    border: var(--dt-input-border_color-default) var(--dt-input-border_width-default) solid;
    border-left: none;
    background-color: var(--dt-input-symbol-background_color);
  }

}

/** Génération d'une boucle pour définir des classes afin de pouvoir contrôler la taille des champs input à la volé avec un attribut
  [data-character-limit]="X"
*/
input[data-character-limit] {
  width: calc(
          ((8 * var(--dt-input-width-custom) + 40) / var(--dt-font_size-default-calc)) * 1rem
  );
}

@for $numberOfCaracter from 2 through 30 {
  input[data-character-limit="#{$numberOfCaracter}"] {
    --dt-input-width-custom: #{$numberOfCaracter};
    // on aligne le texte au milieu dans le cas des petits champs (ici de 2 à 6)
    @if($numberOfCaracter < 7) {
      text-align: center;
    }
  }
}