//////////////////////////////////////////
// COLUM LISTS
// -- WAY TO ORGANIZE CHECKBOXES + RADIOS
//////////////////////////////////////////
// THESE WORK DIFFERENTLY FROM GRID COLUMNS. THE NUMBER OF THE LIST 
// REPRESENTS ITEMS PER ROW.
//////////////////////////////////////////

$li-box-background: true;
$li-box-color: #eee;

[class*='li-column-']{
	overflow: hidden;	
	list-style: none;
	padding: 0;
	margin: $line-height*0.75rem 0;
	@include flex;
	@include flex-wrap(wrap);

	@if $li-box-background{
		padding: 0.5rem 0.75rem;
		background-color: $li-box-color;
		border-radius: 0 0 2px 2px;
	}

	@include break(ml){
		display: block;
	}

	> li{
		padding: 0.5rem;
	}
}

@for $i from 1 through $grid-columns{
  
	.li-column-#{$i} {

		> li{ 
			width: percentage(1/$i); 

			@include break(tp){
				width: percentage(1/2);
			}

			@include break(ml){
				width: 100%;
				white-space: normal;
			}
		}
	}
}

//////////////////////////////////////////
// ADD .input-list TO THE UL FOR INPUT POSITIONING
//////////////////////////////////////////

.input-list{

	> li{
		position: relative;
		padding: 0.5rem 1rem;
		padding-left: 2em;
	}

	label{
		margin: 0;
		display: inline-block;
		@include user-select(none);
		cursor: pointer;  
	}

	& input[type="checkbox"],
	& input[type="radio"]{
		position: absolute;
		top: rem(16);
		left: rem(3);
		margin: 0;
		cursor: pointer;
	}
}