.phd-checkbox{
    --checked-color: rgb(var(--phd__color-accent-rgb));
    --hover-color: rgba(var(--phd__color-accent-rgb), 0.2);

    --checkbox-size: var(--phd__icon-size);
    --checkbox-font-size: var(--phd__font-size);

    --checkbox-border-color: var(--phd__main-color)
}

[type="checkbox"], [type="radio"] {


    appearance: none;
    border: 1px solid var(--checkbox-border-color);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    display: inline-block;
    border-radius: 0.25rem;
    vertical-align: center;
    user-select: none;
    flex-shrink: 0;
    color: var(--checked-color);
    cursor: pointer;
}

[type="checkbox"]:checked, [type="radio"]:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}


[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}



input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--phd__focus-line-color);
    outline-offset: 2px;
}

input[type="checkbox"]:hover, input[type="radio"]:hover {
    box-shadow: 0 0 0 5px var(--hover-color);
}

.phd-checkbox{
    font-size: var(--checkbox-font-size);
    display: flex;
    gap: 0.8em;
    align-items: center;
    justify-content: center;
}
.phd-checkbox .phd-checkbox__link{
    margin-left: .3em;
}

.phd-checkbox{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8em;
    grid-template-areas: "input label"
                        "error error";
}
.phd-checkbox input[type="checkbox"]{
    grid-area: input;
}
.phd-checkbox label{
    grid-area: label;
}

.phd-checkbox .error-message{
    grid-area: error;

    text-indent: unset;
    color: rgb(var(--phd__input-error-color));
    font-size: .75rem;
    font-weight: 400;
    display: none;
}

.phd-checkbox.checkbox-error  input{
    background-color: rgba(var(--phd__input-error-color), 0.1);
}
.phd-checkbox.checkbox-error  input:hover {
    box-shadow: 0 0 0 5px  rgba(var(--phd__input-error-color), 0.1);
}
.phd-checkbox.checkbox-error  input:focus-visible{
    --phd__focus-line-color: var(--phd__focus-line-color-error);
}
.phd-checkbox.checkbox-error{
    --checkbox-border-color: rgb(var(--phd__input-error-color) );
}



.phd-checkbox.checkbox-error .error-message{
    display: block;
}


/* ✳️ SIZES */

.phd-checkbox.checkbox-compact{
    --checkbox-size: var(--phd__icon-size-compact);
    --checkbox-font-size: var(--phd__font-size-compact);
}
.phd-checkbox.checkbox-large{
    --checkbox-size: var(--phd__icon-size-large);
    --checkbox-font-size: var(--phd__font-size-large);
}