/*
	Nom de fichier : input_search.css
    Version : 0.0.1
    Projet : Pégase
    Auteur  : Nicolas Chevallier
    Description : bloc de recherche
    Date    : 14/03/2025
*/

/* Styles pour le conteneur principal */
.input-search-container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  /* Styles pour le label */
  .input-search-label {
    margin-bottom: 8px;
    color: var(--Gray-800, #293056);
    font-family: Marianne-Medium;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
  }
  
  /* Styles pour le conteneur de l'input et de l'icône */
  .input-search-field {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  /* Styles pour l'input */
  .input-search-input {
    font-family: Marianne-Regular;
    width: 100%;
    padding: 8px 30px 8px 14px; /* Ajuster le padding pour l'icône */
    border: 1px solid #B3B8DB;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
    overflow: hidden;
    color: var(--Gray-500, #5965A8);
    text-overflow: ellipsis;
  }
  
  .input-search-input:focus {
    outline: 2px solid #BCF1EB; /* Couleur d'outline au focus */
  }
  
  /* Styles pour l'icône SVG */
  .input-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none; /* Empêcher l'icône de capturer les événements de souris */
  }