/*
	Nom de fichier : checkbox.css
    Version : 0.0.1
    Projet : Pégase
    Auteur  : Nicolas Chevallier
    Description : checkboxes personnalisées
    Date    : 13/03/2025
*/

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

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

.checkbox {
    /* display: none;  */
	position: absolute;  /* Positionner en dehors du flux normal */
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* Propriétés générales du custom checkbox */
.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #7839EE; /* Couleur par défaut (violet) */
    border-radius: 6px;
    position: relative;
    margin-right: 8px;
    transition: background-color 0.3s, border-color 0.3s;
}

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

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

/* Classes pour les couleurs */

/* Les vertes */
.checkbox-wrapper.vert .checkbox-custom {
    border-color: var(--gray-400, #828AC4);
}

.checkbox-wrapper.vert .checkbox:checked + .checkbox-custom {
	background-color: var(--brand-600, #008F98);
    border-color: var(--brand-600, #008F98);
}

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



/* Les violettes */
.checkbox-wrapper.violet .checkbox-custom {
	border: 2px solid var(--Violet-600, #7839EE);
}

.checkbox-wrapper.violet .checkbox:checked + .checkbox-custom {
	background: var(--Violet-100, #ECE9FE);
}
.checkbox-wrapper.violet .checkbox:focus + .checkbox-custom {
	box-shadow: 0px 0px 0px 4px rgba(120, 57, 238, 0.24);}



/* Désactivé (idem pour les vertes et violettes) */
.checkbox-wrapper.vert .checkbox:disabled + .checkbox-custom,
.checkbox-wrapper.violet .checkbox:disabled + .checkbox-custom {
    background-color: var(--gray-50, #F1F3F8);
    border-color: var(--gray-300, #B3B8DB);
    cursor: not-allowed;
}

.checkbox-wrapper.vert .checkbox:disabled:checked + .checkbox-custom,
.checkbox-wrapper.violet .checkbox:disabled:checked + .checkbox-custom {
    background-color: var(--gray-50, #F1F3F8);
}

/*****************************************************/
/* Affichage de la coche dans la box (par défaut le svg est blanc et, on le met violet pour les checkboxes violettes */
.checkbox-wrapper .checkbox:checked + .checkbox-custom::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: cover;
}

.checkbox-wrapper.sm .checkbox:checked + .checkbox-custom::before {
    width: 12px;
    height: 12px;
    background: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%203L4.5%208.5L2%206%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6666%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}

.checkbox-wrapper.sm.violet .checkbox:checked + .checkbox-custom::before {
	background: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%203L4.5%208.5L2%206%22%20stroke%3D%22%237839EE%22%20stroke-width%3D%221.6666%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;}

.checkbox-wrapper.md .checkbox:checked + .checkbox-custom::before {
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%203L5.5%209.5L2%206%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6666%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}

.checkbox-wrapper.md.violet .checkbox:checked + .checkbox-custom::before {
	background: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%203L5.5%209.5L2%206%22%20stroke%3D%22%237839EE%22%20stroke-width%3D%221.6666%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;}

.checkbox-wrapper.sm .checkbox:checked:disabled + .checkbox-custom::before {
	background: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%203L4.5%208.5L2%206%22%20stroke%3D%22%23B3B8DB%22%20stroke-width%3D%221.6666%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}

.checkbox-wrapper.md .checkbox:checked:disabled + .checkbox-custom::before {
	background: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%203L5.5%209.5L2%206%22%20stroke%3D%22%23B3B8DB%22%20stroke-width%3D%221.6666%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}
/****************************************************************/