/* @group @variables */

[class*="a-form-check-detail"] {
--check-grid-template-columns: .875rem 1fr;
--check-grid-template-rows: .1875rem 1fr .1875rem;
--check-gap: 0 .375rem;
--check-min-height: 3rem;
--check-padding: calc(.375rem - 1px) calc(.5625rem - 1px);
--link-font-size: .875rem;
--link-line-height: 1.71428571;
}

[class*="a-form-check-detail-color"] {
--check-grid-template-columns: .875rem 1fr .75rem;
}

[class*="a-form-check-detail"] {
--link-background-color: var(--color-white);
--link-border: 1px solid var(--link-border-color);
--link-border-color: var(--color-very-light-gray);
--link-box-shadow: inset 0 0 0 1px transparent, 0 1px .375rem var(--color-very-light-gray);
--link-action-color: var(--color-text);
--link-action-background-color: var(--color-white);
--link-action-border-color: var(--color-form-checked);
}

input:checked + [class*="a-form-check-detail"] {
--link-background-color: var(--color-white);
--link-border-color: var(--color-form-checked);
--link-action-border-color: var(--color-form-checked);
--link-box-shadow: inset 0 0 0 1px var(--color-form-checked), 0 1px .375rem var(--color-very-light-gray);
--link-action-box-shadow: inset 0 0 0 1px var(--color-form-checked), 0 1px .375rem var(--color-very-light-gray);
}


[class*="has-error"] [class*="a-form-check-detail"] {
--link-border-color: var(--color-form-error);
}

[class*="has-error"] input:checked + [class*="a-form-check-detail"] {
--link-border-color: var(--color-form-checked);
--link-action-border-color: var(--color-form-checked);
--link-box-shadow: inset 0 0 0 1px var(--color-form-checked), 0 1px .375rem var(--color-very-light-gray);
--link-action-box-shadow: inset 0 0 0 1px var(--color-form-checked), 0 1px .375rem var(--color-very-light-gray);
}

[class*="m-search-filter-detail"] [class*="a-form-check-detail"] {
--link-font-size: .75rem;
--link-line-height: 1.5;
}

/* @end @variables */

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

[class*="a-form-check-detail"] {
box-sizing: border-box;
display: grid;
align-items: center;
grid-template-columns: var(--check-grid-template-columns);
grid-template-rows: var(--check-grid-template-rows);
gap: var(--check-gap);
min-height: var(--check-min-height);
padding: var(--check-padding);
transition: var(--transition);
cursor: pointer;
}

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

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

[class*="a-form-check-detail"] span+span {
align-self: center;
grid-column: 3;
grid-row: 1 / span 2;
}

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

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

/* @group @variables */

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

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

[class*="a-form-check-detail"] input[type="checkbox"] + svg,
input[type="checkbox"] ~ [class*="a-form-check-detail"] svg {
--border-radius: 50%;
}

[class*="a-form-check-detail"] input[type="radio"] + svg,
input[type="radio"] ~ [class*="a-form-check-detail"] svg {
--border-radius: 50%;
}

/* @end @variables */

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

[class*="a-form-check-detail"] 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 */