input {
  font: inherit;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/* ie hide cross */
input::-ms-clear {
  display: none;
}


.form-group {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1.5rem;

  input,
  textarea {
    background: $gris_background;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 20px 15px 5px 15px;
  }

  input {
    min-height: 56px;
    line-height: 1.9;
  }

  textarea {
    min-height: 100px;
    resize: none;
  }

  .control-label {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    pointer-events: none;
    padding-left: 0.125rem;
    z-index: 1;
    color: $gris_dark;
    font-size: 1rem;
    font-weight: normal;
    transition: all 0.28s ease;
  }

  .bar {
    position: relative;
    border-bottom: 0.0625rem solid $gris_dark;
    display: block;

    &::before {
      content: "";
      height: 0.125rem;
      width: 0;
      left: 50%;
      bottom: -0.0625rem;
      position: absolute;
      background: $bleu_texte;
      transition: left 0.28s ease, width 0.28s ease;
      z-index: 2;
    }
  }

  .message-erreur {
    display: none;
    color: $rouge_negatif;
    font-size: 0.75rem;
    margin-left: 16px;
    margin-top: 8px;
    position: absolute;
  }

  .message-aide {
    display: none;
    color: $gris_dark;
    font-size: 0.75rem;
    margin-left: 16px;
    margin-top: 8px;
    position: absolute;
  }
  
  .dsicon-close,
  .dsicon-check {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 16px;
    width: 16px;
    font-size: 1rem;
    right: 20px;
  }

  .dsicon-check {
    color: $vert_positif;
  }

  .dsicon-close {
    color: $rouge_negatif;
  }

  input {
    line-height: 1.9;
  }

  input,
  textarea {
    display: block;
    // background: none;
    // padding: 0.125rem 0.125rem 0.0625rem;
    font-size: 1rem;
    border-width: 0;
    border-color: transparent;
    width: 100%;
    color: $noir;
    transition: all 0.28s ease;
    box-shadow: none;

    &:disabled,
    &.disabled {
      pointer-events: none;
      background-color: $gris_background;
      opacity: 0.3;

      ~ .control-label {
        color: $gris_light !important;
      }

      ~ .bar {
        border-color: $gris_light;
      }

      ~ .message-aide {
        display: none;
      }

      ~ .message-erreur {
        display: none;
      }
    }

    &.focused,
    &:focus {
      background-color: $gris_light;
      outline: none;

      ~ .bar::before {
        width: 100%;
        left: 0;
      }
    }

    // Note importante
    // ---------------
    // La règle `&:valid` suppose à tort que le `.control-label` doit être en position haute lorsque le champ est valide.
    // La vrai règle est plutôt : il doit être en position haute si le champ contient une valeur.
    //
    // Cependant, lorsque le composant est utilisé en pur HTML, cette règle permet de le faire fonctionner à peu près correctement...
    // Par contre, s'il est utilisé en JavaScript, on peut très facilement détecter la présence d'une valeur et ajouter en conséquence la classe `.has-value`.
    // C'est pourquoi, `&:valid` peut être désactivée si `.ignore-css-valid-state` est présent.

    &.focused,
    &:focus,
    &:valid:not(.ignore-css-valid-state),
    &.has-value {
      color: $noir;

      ~ .control-label {
        font-size: 0.75rem;
        color: $bleu_texte;
        top: 0.5rem;
        left: 0.75rem;
      }
    }

    &:not(.erreur) {
      &.focused,
      &:focus {
        ~ .message-aide {
          display: inherit;
        }
      }
    }

    &.valide {
      ~ .bar::before {
        width: 100%;
        left: 0;
        background: $vert_positif;
      }

      &.focused,
      &:focus,
      &:valid:not(.ignore-css-valid-state),
      &.has-value {
        ~ .control-label {
          color: $vert_positif;
        }

        ~ .dsicon-check {
          display: inherit;
        }

      }
    }

    &.erreur {
      ~ .bar::before {
        width: 100%;
        left: 0;
        background: $rouge_negatif;
      }

      ~ .dsicon-close {
        display: inherit;
      }

      ~ .control-label {
        color: $rouge_negatif;
        font-size: 0.75rem;
        top: 0.5rem;
        left: 0.75rem;
      }

      ~ .dsicon-close {
        display: inherit;
      }

      ~ .message-erreur {
        display: inherit;
      }
    }
  }
}


.form-group-linear {
  @extend .form-group;

  &--typoforme {
    input {
      font-size: 18px;  // Taille augmentée à 18px au lieu de 16px
    }

    .control-label {
      font-size: 18px;  // Ajuster aussi la taille du label si nécessaire
    }
  }

  textarea {
    background: transparent;
    border: 1px solid $gris_dark;
    border-radius: 4px;
    padding: 24px 8px 8px 8px; // Increased top padding for label space
    
    // Keep label at left:0 in all states
    &.focused ~ .control-label,
    &:focus ~ .control-label,
    &:focus-within ~ .control-label,
    &:not(:focus):not(.focused) ~ .control-label,
    &.has-value ~ .control-label,
    &:valid:not(.ignore-css-valid-state) ~ .control-label {
      top: 8px;
      left: 8px;
    }

    &.focused,
    &:focus,
    &.has-value {
      ~ .control-label {
        top: 8px; // Keep label position when focused/filled
        left: 8px;
      }
    }
    
    &.focused,
    &:focus {
      background: transparent;
      border-color: $bleu_texte;
      
      ~ .bar {
        display: none;
      }
    }

    &.erreur {
      border-color: $rouge_negatif;
      
      ~ .bar {
        display: none;
      }
    }

    &.valide {
      border-color: $vert_positif;
      
      ~ .bar {
        display: none;
      }
    }

    ~ .bar {
      display: none; 
    }
  }

  .message-erreur, .message-aide {
    margin-top: 4px;
    margin-left: 0;
  }

  // Ajouter une règle plus spécifique pour .message-erreur
  .message-erreur.mt-2.rouge_negatif {
    margin-top: 4px !important;
    margin-left: 0 !important;
  }

  .control-label {
    display: flex;
    align-items: center;
    gap: 4px;

    .input-icon {
      font-size: inherit; // Hériter la taille du parent
      color: inherit; // Hériter la couleur du parent
      transition: none; // Supprimer toutes les transitions
    }
  }

  input {
    background: transparent;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 48px;
    padding: 24px 0 4px 0;
    line-height: 1;
    margin-bottom: -4px;

    &[readonly] {
      color: $gris_dark !important;
      background: transparent;
      cursor: default;

      ~ .control-label {
        color: $gris_dark !important;
      }

      ~ .bar {
        border-color: $gris_light !important;
        
        &::before {
          background: transparent !important;
        }
      }
    }

    &:disabled,
    &.disabled {
      background: transparent;
    }
    
    &.focused,
    &:focus {
      background: transparent;
      
      ~ .bar::before {
        width: 100%;
        left: 0;
      }
    }

    &.erreur {
      ~ .bar::before {
        background: $rouge_negatif;
      }

      &.focused,
      &:focus,
      &.has-value {
        ~ .control-label {
          color: $rouge_negatif;
          font-size: 0.75rem;
          top: 0.5rem;
          left: 0;
        }
      }

      &:not(.focused):not(:focus):not(.has-value) {
        ~ .control-label {
          top: 45%;
          left: 0;
          font-size: 1rem;
          color: $gris_dark;
        }
      }
    }

    &.valide {
      ~ .bar::before {
        background: $vert_positif;
      }

      &:not(.focused):not(:focus):not(.has-value) {
        ~ .control-label {
          top: 45%;
          left: 0;
          font-size: 1rem;
          color: $gris_dark;
        }
      }
    }

    ~ .bar {
      display: block;

      &::before {
        height: 1px;
      }
    }

    
    ~ .control-label {
      top: 45%;
      left: 0;
      line-height: 1;
      transition: all 0.28s ease; // S'assurer que la transition est cohérente
      
      .input-icon {
        font-size: inherit;
        transition: none;
      }
    }

    ~ .dsicon-crayon,
    ~ .dsicon-close,
    ~ .dsicon-check {
      margin-bottom: 16px;
      right: 0;
    }

    // Keep label at left:0 in all states
    &.focused ~ .control-label,
    &:focus ~ .control-label,
    &:focus-within ~ .control-label,
    &:not(:focus):not(.focused) ~ .control-label,
    &.has-value ~ .control-label,
    &:valid:not(.ignore-css-valid-state) ~ .control-label {
      left: 0;
    }

    &.focused,
    &:focus,
    &:valid:not(.ignore-css-valid-state),
    &.has-value {
      ~ .control-label {
        font-size: 0.75rem;
        color: $bleu_texte;
        top: 0.5rem;
        left: 0;

        .input-icon {
          font-size: inherit; // Même taille que le texte
          color: inherit; // Hériter la couleur du parent
          transition: none;
        }
      }
    }

    &.erreur {
      ~ .control-label {
        color: $rouge_negatif;
        font-size: 0.75rem;
        
        .input-icon {
          color: inherit;
          font-size: inherit;
          transition: none;
        }
      }
    }

    &.valide {
      ~ .control-label {
        color: $vert_positif;

        .input-icon {
          color: inherit;
          font-size: inherit;
          transition: none;
        }
      }
    }
  }

  .form-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: 16px;
    width: 16px;
    font-size: 1rem;
    display: none; // Par défaut caché
    margin: 0; // Supprimer les marges
  }

  // Styles spécifiques pour chaque icône
  .dsicon-check {
    display: none;
    color: $vert_positif;
  }

  .dsicon-close {
    display: none;
    color: $rouge_negatif;
  }

  .dsicon-crayon {
    display: none;
    color: $gris_dark; // ou la couleur que vous souhaitez
    cursor: pointer;
  }

  // Afficher les icônes quand nécessaire
  input {
    &.erreur ~ .dsicon-close {
      display: block;
    }

    &.valide ~ .dsicon-check {
      display: block;
    }

    &[readonly] ~ .dsicon-crayon {
      display: block;
    }
  }
}

.form-group-linear--typoforme {
  @extend .form-group-linear;

  input {
    font-size: 18px;

    // Add default positioning for the control-label 
    ~ .control-label {
      top: 45%; // Match the same positioning as form-group-linear
      left: 0;
      font-size: 18px;
      color: $gris_dark;
    }

    // Adjust positioning when input has state
    &.focused,
    &:focus,
    &.has-value,
    &:valid:not(.ignore-css-valid-state),
    &.erreur,
    &.valide {
      ~ .control-label {
        top: 0.5rem;
        left: 0;
        font-size: 0.75rem;
      }
    }

    // Reset positioning when input has no value and no state
    &:not(.focused):not(:focus):not(.has-value):not(.erreur):not(.valide) {
      ~ .control-label {
        top: 45%;
        left: 0;
        font-size: 18px;
        color: $gris_dark;
      }
    }

    &.erreur {
      ~ .control-label {
        color: $rouge_negatif;
      }

      &.focused,
      &:focus,
      &.has-value {
        ~ .control-label {
          color: $rouge_negatif;
        }
      }
    }
  }

  .control-label {
    font-size: 18px;
  }

  .ds-dropdown {
    // Style du texte sélectionné 
    .control-value {
      font-size: 18px;
    }

    // Style du placeholder
    .control-label {
      font-size: 18px;
    }

    // Style du texte dans le menu déroulant
    .text,
    .text-selected {
      font-size: 18px;
    }
  }
}