/*
 * Shortcode: unordered-list.scss
 * -----------------------------------------------
*/
$font_family_list_fw: 'FontAwesome';

.tm-ordered-list {
	ol {
		list-style: none;
		counter-reset: li;
		li {
			position: relative;
			counter-increment: li;
			&:before {
				content: "." counter(li);
				color: #333;
				display: inline-block;
				width: 1em;
				margin-left: -1.5em;
				margin-right: .5em;
				font-weight: 600;
				direction: rtl;
			}
		}
	}
	ul > li,
	ol > li {
		margin-bottom: 12px;
		> ul, > ol {
			margin-top: 12px;
		}
	}
}

@mixin unordered-list-common() {
	ul {
		list-style: none;
		>li {
			position: relative;
		}
		li {
			list-style-type: none;
			padding-left: 25px;
			&:before {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				content: "\f18e";
				font-family: $font_family_list_fw;
			}
		}
	}
}
.tm-sc-unordered-list {
	ul > li,
	ol > li {
		margin-bottom: 12px;
		> ul, > ol {
			margin-top: 12px;
		}
	}
	&.list-style2 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style3 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f061";
					font-size: 80%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style4 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f178";
					font-size: 80%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style5 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f0a9";
					font-size: 80%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style6 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f00c";
					font-size: 80%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style7 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f05d";
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style8 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f058";
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style9 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f046";
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style10 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f28d";
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style11 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f046";
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style12 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f055";
					font-size: 90%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style13 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f10c";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style14 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f111";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style15 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f105";
					line-height: 2;
				}
			}
		}
	}
	&.list-style16 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f054";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style17 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f101";
					line-height: 2;
				}
			}
		}
	}
	&.list-style18 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f0da";
					line-height: 2;
				}
			}
		}
	}
	&.list-style19 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f152";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style20 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f006";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style21 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f005";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style22 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					content: "\f0c8";
					font-size: 70%;
					line-height: 2;
				}
			}
		}
	}
	&.list-style23 {
		@include unordered-list-common();
		ul {
			li {
				&:before {
					border-width: 2px;
					border-color: #fff !important;
					content: '';
					display: block;
					position: absolute;
					top: 10px;
					left: 5px;
					width: 8px;
					height: 5px;
					border-left: 2px solid transparent;
					border-bottom: 2px solid transparent;
					z-index: 1;
					-webkit-transform: rotate(-45deg);
					-ms-transform: rotate(-45deg);
					transform: rotate(-45deg)
				}
				&:after {
					background-color: #609beb !important;
					content: '';
					display: block;
					position: absolute;
					top: 6px;
					left: 1px;
					width: 15px;
					height: 15px;
					border: 0;
					border-radius: 50%;
					border: 2px solid transparent;
				}
			}
		}
	}
}