/**
 @group Lists
 @zenCss zenList, zenComponents
 @brief For listing data vertically or horizontally

 Some description here.
 */

/**
 @component basicList
 @brief Simple list without bullets

 The basic list has no bullets, a simple vertical list which is often used to group other content.

 @example
 <ul class="basicList">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
 </ul>
 */
.basicList{
    margin: 10px 0;
}
.basicList li{
    padding: .2em 0;
}

/**
 @extension basicListSm
 @extends basicList

 Adds 5px margin top and bottom (which will be 5px total due to margin collapse).

 @example
 <ul class="basicList basicListSm">
   <li>item 1</li>
   <li>item 2</li>
 </ul>
 */
.basicListSm li{
    margin: 5px 0;
}

/**
 @extension basicListMed
 @extends basicList

 Adds 10px margin top and bottom (which will be 5px total due to margin collapse).

 @example
 <ul class="basicList basicListMed">
   <li>item 1</li>
   <li>item 2</li>
 </ul>
 */
.basicListMed li{
    margin: 10px 0;
}

/**
 @extension basicListLg
 @extends basicList

 Adds 20px margin top and bottom (which will be 5px total due to margin collapse).

 @example
 <ul class="basicList basicListLg">
   <li>item 1</li>
   <li>item 2</li>
 </ul>
 */
.basicListLg li{
    margin: 20px 0;
}