/* @group @variables */

:root {
--unordered-list-background-image: url('../img/sprite-svg.svg#icon-arrow-right');
--unordered-list-padding-left: 1rem;
--unordered-list-background-position: 0 .5625rem;
--unordered-list-background-size: .5rem .5rem;
}

[class*="o-mutual-footer"] {
--unordered-list-background-image: url('../img/sprite-svg.svg#icon-arrow-right-white');
}

/* @end @variables */

/* @group @m-content-list */

:where(ul:not([class])) {
position: relative;
z-index: 2;
display: grid;
grid-auto-columns: 1fr;
gap: .375rem;
align-content: start;
}

:where(ul:not([class]))>li {
padding-left: var(--unordered-list-padding-left);
background-image: var(--unordered-list-background-image);
background-position: var(--unordered-list-background-position);
background-repeat: no-repeat;
background-size: var(--unordered-list-background-size);
}

/* @end @m-content-list */


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

/* @group @variables */

[class*="m-check-note-list"] {
--check-criterion-size: 1rem;
--unordered-list-min-height: var(--check-criterion-size);
--unordered-list-background-image: url('../img/sprite-svg.svg#icon-point-secondary');
--unordered-list-padding-left: 1.375rem;
--unordered-list-background-position: 0 0;
--unordered-list-background-size: var(--check-criterion-size) auto;
--line-height: 1.5;
}

/* @end @variables */

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

[class*="m-check-note-list"] {
position: relative;
z-index: 2;
display: grid;
grid-auto-columns: 1fr;
gap: .375rem;
align-content: start;
}

:where([class*="m-check-note-list"])>li {
position: relative;
padding-top: var(--unordered-list-padding-top);
padding-left: var(--unordered-list-padding-left);
}

:where([class*="m-check-note-list"])>li:before {
content: '';
position: absolute;
top: .25rem;
left: 0;
width: var(--check-criterion-size);
height: var(--check-criterion-size);
background-image: var(--unordered-list-background-image);
background-position: var(--unordered-list-background-position);
background-repeat: no-repeat;
background-size: var(--unordered-list-background-size);
border-radius: 99rem;
}

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

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

/* @group @variables */

[class*="m-checkmark-list"] {
--checkmark-criterion-size: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem);
--unordered-list-min-height: var(--checkmark-criterion-size);
--unordered-list-background-image: url('../img/sprite-svg.svg#icon-point-secondary');
--unordered-list-padding-left: calc(var(--checkmark-criterion-size) + clamp(.375rem, 0.881rem + 0.6vw, .75rem));
--unordered-list-background-position: 0 0;
--unordered-list-background-size: var(--checkmark-criterion-size) auto;
--font-size: clamp(1rem, 0.929rem + 0.36vw, 1.25rem);/* 16-20 to 320-1440 */
--line-height: 1.5;
}

/* @end @variables */

/* @group @m-checkmark-list */

[class*="m-checkmark-list"] {
position: relative;
z-index: 2;
display: grid;
grid-auto-columns: 1fr;
gap: .75rem;
align-content: start;
}

:where([class*="m-checkmark-list"])>li {
position: relative;
min-height: var(--unordered-list-min-height);
min-height: clamp(1rem, 0.929rem + 0.36vw, 1.25rem);
padding-top: var(--unordered-list-padding-top);
padding-left: var(--unordered-list-padding-left);
}

:where([class*="m-checkmark-list"])>li:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: var(--checkmark-criterion-size);
height: var(--checkmark-criterion-size);
background-image: var(--unordered-list-background-image);
background-position: var(--unordered-list-background-position);
background-repeat: no-repeat;
background-size: var(--unordered-list-background-size);
border-radius: 99rem;
}

/* @end @m-checkmark-list */

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

/* @group @variables */

:where(ol:not([class])) {
--ordered-list-detail-padding-left: 1.875rem;
--ordered-list-detail-counter-width: 1.125rem;
}

:where(ol:not([class])):has(:nth-child(n+10)) {
--ordered-list-detail-padding-left: 2.25rem;
--ordered-list-detail-counter-width: 1.6875rem;
}

/* @end @variables */

/* @group @m-counter-list */

:where(ol:not([class])) {
position: relative;
display: grid;
grid-auto-flow: row;
gap: .375rem;
align-content: start;
counter-reset: li-entry;
}

:where(ol:not([class]))>li {
position: relative;
counter-increment: li-entry;
padding-left: var(--ordered-list-detail-padding-left);
}

:where(ol:not([class]))>li:before {
box-sizing: border-box;
content: counter(li-entry)'.';
position: absolute;
top: 0;
left: 0;
display: grid;
width: var(--ordered-list-detail-counter-width);
speak: none;
text-align: right;
}

/* @end @m-counter-list */

/* variables - note-list --------------------------------------------------------*/

/* @group @variables - @list */

[class*="m-note-list"] {
--content-list-gap: .375rem;
--note-list-mark-size: 1rem;
--note-list-font-size: 1rem;
--note-list-line-height: 1.5;
}

[class*="m-note-list-primary"] {
--note-list-font-size: .625rem;
--note-list-line-height: 1.8;
}

[class*="m-note-list-secondary"] {
--note-list-font-size: .75rem;
--note-list-line-height: 1.5;
}

[class*="m-note-list-tertiary"] {
--note-list-font-size: .875rem;
--note-list-line-height: 1.71428571;
}

/* @end @variables - @list */

/* @group @m-note-list */

[class*="m-note-list"] {
display: grid;
align-self: start;
grid-template-columns: repeat(1, 1fr);
gap: var(--content-list-gap);
padding: var(--note-list-padding);
background-color: var(--note-list-background-color);
}

[class*="m-note-list"]>li {
position: relative;
display: block;
padding-left: var(--note-list-mark-size);
font-size: var(--note-list-font-size);
line-height: var(--note-list-line-height);
}

[class*="m-note-list"]>li:before {
content: '※';
position: absolute;
top: 0;
left: 0;
}

/* @end @m-note-list */