/* @group @variables */

[class*="a-form-check-detalle"] {
--check-grid-template-columns: .875rem 1fr;
--check-grid-template-rows: .25rem auto 1fr;
--check-gap: 0 .375rem;
--font-size: .875rem;
--line-height: 1.71428571;
--icon-width: 1rem;
--icon-height: 1rem;
--background-color: var(--check-border-color);
--border-color: var(--check-border-color);
--icon-fill: var(--color-white);
}

[class*="a-form-check-detalle"]:hover,
[class*="a-form-check-detalle"]:focus {
--border-color: var(--color-primary);
}

input:checked ~ [class*="a-form-check-detalle"],
input:checked ~ [class*="a-form-check-detalle"]:hover,
input:checked ~ [class*="a-form-check-detalle"]:focus,
[class*="a-form-check-detalle"] input:checked + svg,
[class*="a-form-check-detalle"]:hover input:checked + svg,
[class*="a-form-check-detalle"]:focus input:checked + svg {
--background-color: var(--color-primary);
--border-color: var(--color-primary);
--icon-fill: var(--color-white);
}

/* @end @variables */

/* @group @a-form-check-detalle */

[class*="a-form-check-detalle"] {
box-sizing: border-box;
display: inline-grid;
grid-template-columns: var(--check-grid-template-columns);
grid-template-rows: var(--check-grid-template-rows);
/*align-items: center;*/
gap: var(--check-gap);
cursor: pointer;
}

[class*="a-form-check-detalle"] svg {
grid-column: 1;
/*grid-row: 1;*/
grid-row: 2;
}

[class*="a-form-check-detalle"] span {
grid-column: 2;
/*grid-row: 1;*/
grid-row: 1 / span 3;
}

/* @end @a-form-check-detalle */

/* @group @a-form-check-detalle */

[class*="a-form-check-detalle"] input {
-webkit-appearance: none;
appearance: none;
overflow: hidden;
visibility: hidden;
position: absolute;
z-index: -100;
width: 0;
max-width: 0;
height: 0;
max-height: 0;
}

/* @end @a-form-check-detalle */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="a-form-check-detalle"] svg {
--background-color: hsla(220, 5%, 90%, 1);
--border-color: hsla(220, 5%, 90%, 1);
--icon-width: .875rem;
--icon-height: .875rem;
--icon-fill: hsla(0, 0%, 0%, 0);
}

[class*="a-form-check-detalle"] input[type="checkbox"]:checked + svg,
input:checked + [class*="a-form-check-detalle"] svg {
--background-color: var(--color-white);
--border-color: var(--color-form-checked);
--icon-fill: var(--color-form-checked);
}

[class*="a-form-check-detalle"] input[type="checkbox"] + svg,
input[type="checkbox"] ~ [class*="a-form-check-detalle"] svg {
--border-radius: .25rem;
}

[class*="a-form-check-detalle"] input[type="radio"] + svg,
input[type="radio"] ~ [class*="a-form-check-detalle"] svg {
--border-radius: 9rem;
}

/* @end @variables */

/* @group @a-form-check-icon */

[class*="a-form-check-detalle"] svg {
display: grid;
background-color: var(--background-color);
border: 1px solid;
border-color: var(--border-color);
border-radius: var(--border-radius);
transition: var(--transition);
}

/* @end @a-form-check-icon */