/* content-list --------------------------------------------------------*/

/* @group @variables */

:root {
--content-list-gap: .375rem;
--content-list-line-height: 1.5rem;
--content-list-marker-spacing: 1.125rem;
--content-list-marker-background-color: var(--color-brand);
}

.m-content-list-primary {
--content-list-marker-size-primary: .375rem;
--content-list-marker-radius-primary: 50%;
}

.m-content-list-secondary,
.m-content-list-deutero,
[class*="m-article-body"] ul {
--content-list-marker-size-width-secondary: .75rem;
--content-list-marker-size-height-secondary: 2px;
}

.m-content-list-deutero {
--content-list-marker-background-color: var(--color-white);
}

/* @end @variables */

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

[class*="m-content-list"],
[class*="m-article-body"] ul {
position: relative;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--content-list-gap);
align-content: start;
}

[class*="m-content-list"]>li,
[class*="m-article-body"] ul>li {
position: relative;
padding-left: var(--content-list-marker-spacing);
}

[class*="m-content-list"]>li:before,
[class*="m-article-body"] ul>li:before {
content: '';
position: absolute;
top: calc(var(--content-list-line-height) / 2);
left: 0;
background-color: var(--content-list-marker-background-color);
transform: translateY(-50%);
}

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

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

.m-content-list-primary>li:before {
width: var(--content-list-marker-size-primary);
height: var(--content-list-marker-size-primary);
border-radius: var(--content-list-marker-radius-primary);
}

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

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

.m-content-list-secondary>li:before,
.m-content-list-deutero>li:before,
[class*="m-article-body"] ul>li:before {
width: var(--content-list-marker-size-width-secondary);
height: var(--content-list-marker-size-height-secondary);
}

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