/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<div class="list"></div>

<div class="list">
    <div class="list--square"></div>
    <span>ELLIPSED_TEXT</span>
</div>

-------------------------------------------------------------------------------
 OPTIONAL CLASS
-------------------------------------------------------------------------------

-------------------------------------------------------------------------------
 OPTIONAL ICON STYLE
-------------------------------------------------------------------------------
list--square
-------------------------------------------------------------------------------

*/

div.list{
    display:flex; align-items: flex-start; position: relative;
}

div.list span{
    overflow: hidden;
}

div.list div.list--square{
    width: 6px; height: 6px; background-color: hsl(var(--hue),var(--saturation),var(--lightness)); overflow: hidden;
    content: ""; flex-shrink: 0; margin: calc(var(--line-height) * .5em - 3px) 4px;
}

div.list--square.--lh-150, .--lh-150 div.list--square{
    margin: calc(0.9375em - 3px) 4px;
}

div.list div.list--round-outlined{
    width: 6px; height: 6px; border: solid 1px hsl(var(--hue),var(--saturation),var(--lightness)); overflow: hidden;
    content: ""; flex-shrink: 0; margin: calc(var(--line-height) * .5em - 3px) 4px; box-sizing: border-box; border-radius: 3px;
}

div.list--round-outlined.--lh-150, .--lh-150 div.list--round-outlined{
    margin: calc(0.9375em - 3px) 4px;
}