//------------------------------------------------------------------------------------------------
// LIST
//------------------------------------------------------------------------------------------------

/*
Decorated list element
*/

// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-list-bullet-color: 'primary' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-list {
	list-style: none;
	margin-left: 0;
	padding-left: 1.7em;
	li {
		position: relative;
		&:before {
			content: '';
			position: absolute;
			width: 0.75em;
			height: 0.75em;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 100" style="fill:#{str-replace(inspect(color($component-list-bullet-color)), '#' , '%23')};"><polygon points="0,25 0,75 43.3,100 86.6,75 86.6,25 43.3,0 "/></svg>');
			background-repeat: no-repeat;
			top: 0.4em;
			left: -1.3em;
		}
		&:not(:last-child) {
			margin-bottom: 0.6em;
		}
	}
}

.c-list .c-list {
	margin-top: 0.6em;
}

.c-list__label {
	font-weight: bold;
	color: color('#{$component-list-bullet-color}-dark');
}