/*
	Nom de fichier : bouton_radio.css
    Version : 0.0.1
    Projet : Pégase
    Auteur  : Nicolas Chevallier
    Description : boutons radio personnalisés
    Date    : 13/03/2025
*/

/* Réinitialiser les styles de base des boutons radio natifs */
.radio-wrapper {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 6px;
}

.radio-wrapper:hover {
    background: var(--Gray-50, #F1F3F8);
}

.radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    /* pointer-events: auto; */
}

/* Propriétés générales du custom radio */
.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400, #828AC4); /* Bordure grise par défaut */
    border-radius: 50%; /* Forme circulaire */
    position: relative;
    margin-right: 8px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Classes pour les tailles (sm ou md) */
.radio-wrapper.sm .radio-custom {
    width: 16px;
    height: 16px;
}

.radio-wrapper.md .radio-custom {
    width: 20px;
    height: 20px;
}

/* Couleur et comportement pour la classe .vert (vert) */
.radio-wrapper.vert .radio-custom {
    border-color: var(--gray-400, #828AC4);
}

/* État checké */
.radio-wrapper.vert .radio:checked + .radio-custom {
    background-color: var(--brand-600, #008F98); /* Fond coloré lorsqu'il est checké */
    border-color: var(--brand-600, #008F98); /* Bordure colorée lorsqu'il est checké */
}

/* Focus (lorsque l'élément est sélectionné via tab) */
.radio-wrapper.vert .radio:focus + .radio-custom {
    box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
}

/* État checké et focus */
.radio-wrapper.vert .radio:focus:checked + .radio-custom {
    box-shadow: 0px 0px 0px 4px rgba(52, 185, 180, 0.24);
}

/* Désactivé (état désactivé) */
.radio-wrapper.vert .radio:disabled + .radio-custom {
    background-color: var(--gray-50, #F1F3F8);
    border-color: var(--gray-300, #B3B8DB);
    cursor: not-allowed;
}

/* État checké et désactivé */
.radio-wrapper.vert .radio:disabled:checked + .radio-custom {
    background-color: var(--gray-50, #F1F3F8);
}

/*****************************************************/
/* Affichage du point dans le radio (par défaut il est blanc) */
.radio-wrapper .radio:checked + .radio-custom::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

/* Taille des éléments checkés */
.radio-wrapper.sm .radio:checked + .radio-custom::before {
    width: 8px;
    height: 8px;
}

.radio-wrapper.md .radio:checked + .radio-custom::before {
    width: 10px;
    height: 10px;
}

/* Radios désactivés */
.radio-wrapper.sm .radio:checked:disabled + .radio-custom::before {
    background-color: #B3B8DB; /* Gris pour les désactivés */
}

.radio-wrapper.md .radio:checked:disabled + .radio-custom::before {
    background-color: #B3B8DB; /* Gris pour les désactivés */
}

.radio-wrapper:focus {
  outline: none; /* Supprime l'outline par défaut */
}

/* Focus (lorsque l'élément est sélectionné via tab) */
.radio-wrapper.vert:focus .radio-custom {
    box-shadow: 0px 0px 0px 4px rgba(52, 185, 180, 0.24);
    outline: none; /* Supprime l'outline par défaut du label */
}

/* État checké et focus */
.radio-wrapper.vert:focus .radio:checked + .radio-custom {
    box-shadow: 0px 0px 0px 4px rgba(52, 185, 180, 0.24);
    outline: none; /* Supprime l'outline par défaut du label */
}
/* Focus mais non checké */
.radio-wrapper.vert:focus .radio:not(:checked) + .radio-custom {
    box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14); /* Box shadow gris clair */
}