comp-checkbox {
    width: max-content;
    height: max-content;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

comp-checkbox i {
    color: var(--color-neutral-0, #ffffff);
    position: absolute;
    height: 12px;
    width: 12px;
    pointer-events: none;
    flex-shrink: 0;
}

comp-checkbox i svg {
    position: absolute;
}

comp-checkbox input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: var(--border-radius-corner-s, 4px);
    border: 1px solid var(--color-neutral-400, #8CA2B5);
    background: var(--color-neutral-0, #FFF);
    margin: 0;
}

comp-checkbox input[type="checkbox"]:hover {
    background: var(--color-neutral-100, #F3F4F7);
}

comp-checkbox input[type="checkbox"]:active {
    background: var(--color-neutral-200, #D5DFEC);
}

comp-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 0;
    border: 1px solid var(--color-neutral-300, #B7C9DF);
}

comp-checkbox input[type="checkbox"]:disabled {
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    background: var(--color-neutral-100, #F3F4F7);
    cursor: not-allowed;
}

.ctn-comp-checkbox:has(comp-checkbox input[type="checkbox"]:disabled) label{
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

comp-checkbox input[type="checkbox"]:checked,
comp-checkbox[indeterminate] input[type="checkbox"] {
    background: var(--color-primary-600, #0E55B9);
    border: none;
}

comp-checkbox input[type="checkbox"]:checked:hover,
comp-checkbox[indeterminate] input[type="checkbox"]:hover {
    background: var(--color-primary-700, #164FA1);
}

comp-checkbox input[type="checkbox"]:checked:active,
comp-checkbox[indeterminate] input[type="checkbox"]:active {
    background: var(--color-primary-800, #163A79);
}

comp-checkbox input[type="checkbox"]:checked:focus-visible,
comp-checkbox[indeterminate] input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
}

comp-checkbox input[type="checkbox"]:checked:disabled,
comp-checkbox[indeterminate] input[type="checkbox"]:disabled {
    background: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

comp-checkbox input[type="checkbox"].error {
    border: 1px solid var(--color-danger-600, #D82525);
}

comp-checkbox input[type="checkbox"].error:hover {
    background: var(--color-neutral-0, #FFF);
}

comp-checkbox input[type="checkbox"].error:active {
    background: var(--color-neutral-0, #FFF);
}

comp-checkbox input[type="checkbox"].error:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 0;
    border: 1px solid var(--color-danger-600, #D82525);
}

comp-checkbox input[type="checkbox"].error:checked,
comp-checkbox[indeterminate] input[type="checkbox"].error {
    background: var(--color-danger-600, #D82525);
    border: none;
}

comp-checkbox input[type="checkbox"].error:checked:hover,
comp-checkbox[indeterminate] input[type="checkbox"].error:hover {
    background: var(--color-danger-600, #D82525);
}

comp-checkbox input[type="checkbox"].error:checked:active,
comp-checkbox[indeterminate] input[type="checkbox"].error:active {
    background: var(--color-danger-600, #D82525);
}


/* Estilos plantillas */

/* Antigua */
.ctn-comp-checkbox{
    display: flex;
    gap: 8px;
}

/* Nuevas */

.container-comp-checkbox{
    display: block;
}

.container-comp-checkbox .ctn-content-checkbox{
    display: flex;
    gap: 8px;
}

.container-comp-checkbox .ctn-content-label-checkbox{
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: normal;
    word-wrap: break-word;
}

.container-comp-checkbox label.label-checkbox{
    font: var(--font-body);
    color: var(--color-neutral-500, #566A80);
}

.container-comp-checkbox label.label-checkbox .tag-checkbox{
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500, #566A80);
}

.container-comp-checkbox label.label-checkbox comp-toggle-tip{
    display: inline-flex;
    vertical-align: middle;
}

.container-comp-checkbox .helper-text.error{
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-top: 4px;
    padding-left: 28px;
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500);
    width: 100%;
}

.container-comp-checkbox .helper-text.error i{
    display: flex;
    align-items: center;
    color: var(--color-danger-600);
    padding-top: 2px;
    width: 16px;
}

.container-comp-checkbox .helper-text.error i::before{
    font-size: 16px;
}

.ctn-content-checkbox:has(comp-checkbox[disabled]) .label-checkbox{
    cursor: not-allowed;
}

/* Group */

.checkbox-group .title-checkbox-group{
    display: flex;
    gap: 4px;

}
.checkbox-group .title-checkbox-group legend{
    font: var(--font-caption-medium-strong);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500);
    width: auto;
    margin: 0;
}

.checkbox-group .helper-text{
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500);
    margin-top: 4px;
}

.checkbox-group .helper-text.error{
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-top: 4px;
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500);
    width: 100%;
}

.checkbox-group .helper-text.error i{
    display: flex;
    align-items: center;
    color: var(--color-danger-600);
    padding-top: 2px;
    width: 16px;
}

.checkbox-group .helper-text.error i:before{
    font-size: 16px;
}

.checkbox-group .ctn-list-checkbox-group{
    display: flex;
    margin-top: 8px;
}

.checkbox-group.horizontal .ctn-list-checkbox-group{
    flex-direction: row;
    gap: 16px;
}

.checkbox-group.vertical .ctn-list-checkbox-group{
    flex-direction: column;
    gap: 8px;
}

.checkbox-group:has(.helper-text.error) .helper-text:not(.error){
    display: none;
}

.checkbox-group.horizontal .container-comp-checkbox .ctn-content-label-checkbox{
    white-space: nowrap;
}

.checkbox-group  .tag-checkbox{
    font: var(--font-caption-medium);
    letter-spacing: var(--letter-spacing-1);
    color: var(--color-neutral-500, #566A80);
}

/* tree */
.checkbox-group.tree .title-checkbox-group{
    margin-bottom: 8px;
}

.checkbox-group.tree:has(.helper-text) .title-checkbox-group{
    margin-bottom: 0;
}

.checkbox-group.tree .helper-text{
    margin-bottom: 8px;
}

.checkbox-group.tree .ctn-childs{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group.tree .parent-tree-group{
    margin-bottom: 8px;
}

.checkbox-group.tree ul {
    list-style-type: none;
    margin-left: 24px;
}