/* checkbox / radio list --------------------------------------------------------*/

/* @group @variables */

:root {
--check-list-grid-columns: repeat(1, 1fr);
--check-list-gap: .375rem;
}

@media all and (min-width:48em) {

:root {
--check-list-grid-columns: repeat(2, 1fr);
}

}

/* @end @variables */

/* @group @m-form-check-list */

[class*="m-form-check-list"] {
display: grid;
grid-template-columns: var(--check-list-grid-columns);
gap: var(--check-list-gap);
}

/* @end @m-form-check-list */

/* checkbook / radio wrap --------------------------------------------------------*/

/* @group @a-check-wrap */

.a-check-wrap {
position: relative;
display: grid;
}

/* @end @a-check-wrap */

/* @group @a-check-hidden */

.a-check-hidden {
-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-check-hidden */

/* checkbox / radio button --------------------------------------------------------*/

/* @group @variables */

:root {
--check-btn-grid-columns: auto 1fr;
--check-btn-grid-rows: auto;
--check-btn-gap: .375rem;
--check-btn-padding: calc(.75rem - 1px);
--check-btn-background-color: var(--color-white);
--check-btn-border-color: var(--color-gainsboro);
--check-btn-shadow-color: transparent;
--check-btn-label-column: 2;
--check-btn-label-row: 1;
--check-btn-icon-column: 1;
--check-btn-icon-row: 1;
}

.m-form-check-list-secondary,
.a-check-btn-secondary {
--check-btn-grid-columns: 1fr auto;
--check-btn-label-column: 1;
--check-btn-icon-column: 2;
}

.a-checkbox-btn-label,
.a-radio-btn-label {
grid-column: var(--check-btn-column);
}

.a-checkbox-icon,
.a-checkbox-toggle-icon,
.a-checkbox-drawer-icon,
.a-radio-icon {
grid-column: var(--check-btn-column-icon);
}

.a-check-btn:hover,
.a-check-btn:focus {
--check-btn-border-color: var(--color-focus-tertiary);
--check-btn-shadow-color: var(--color-focus-tertiary);
}

input:checked + .a-check-btn {
--check-btn-border-color: var(--color-focus-primary);
--check-btn-shadow-color: var(--color-focus-primary);
}

.has-error {
--check-btn-border-color: var(--color-error-primary);
--check-btn-shadow-color: var(--color-error-primary);
}

/* @end @variables */

/* @group @a-check-btn */

[class*="a-check-btn"] {
box-sizing: border-box;
position: relative;
z-index: 2;
display: grid;
align-items: center;
grid-template-columns: var(--check-btn-grid-columns);
grid-template-rows: var(--check-btn-grid-rows);
gap: var(--check-btn-gap);
min-height: 3rem;
padding: 0 var(--check-btn-padding);
background-color: var(--check-btn-background-color);
border: var(--form-border-size) solid var(--check-btn-border-color);
box-shadow: inset 0 0 0 var(--form-border-size) var(--check-btn-shadow-color);
cursor: pointer;
transition: var(--link-transition);
}

.a-checkbox-btn-label,
.a-radio-btn-label {
grid-column: var(--check-btn-label-column);
grid-row: var(--check-btn-label-row);
}

.a-checkbox-icon,
.a-checkbox-toggle-icon,
.a-checkbox-drawer-icon,
.a-radio-icon {
grid-column: var(--check-btn-icon-column);
grid-row: var(--check-btn-icon-row);
}

/* @end @a-check-btn */

/* checkbox / radio link --------------------------------------------------------*/

/* @group @variables */

:root {
--check-link-grid-column: auto 1fr;
--check-link-grid-rows: auto;
--check-link-gap: .375rem;
--check-link-icon-top-spacing: .1875rem;
--check-link-label-column: 2;
--check-link-label-row: 1;
--check-link-icon-column: 1;
--check-link-icon-row: 1;
}

/* @end @variables */

/* @group @a-check-link */

.a-check-link {
box-sizing: border-box;
position: relative;
z-index: 2;
display: inline-grid;
grid-template-columns: var(--check-link-grid-column);
grid-template-rows: var(--check-link-grid-rows);
gap: var(--check-link-gap);
transition: var(--link-transition);
}

.a-check-link>.a-checkbox-icon,
.a-check-link>.a-radio-icon {
grid-column: var(--check-link-label-column);
grid-row: var(--check-link-icon-row);
margin-top: var(--check-link-icon-top-spacing);
}

.a-checkbox-link-label,
.a-radio-link-label {
grid-column: var(--check-link-icon-column);
grid-row: var(--check-link-icon-row);
}

/* @end @a-check-link */