.list {
	&.list-column {
		@extend %flex;
		flex-direction: column;
	}
	&.list-style-check {
		li {
			position: relative;
			padding: 7px 0;
			padding-left: 28px;
			font-size: 14px;
			&.active {
				color: hsl(var(--heading));
				&::before {
					content: "\f00c";
				}
			}
			&.disabled {
				color: hsl(var(--body) / 0.65);
				&::before {
					content: "\f00d";
				}
			}
			&::before {
				@extend %line-ico;
				left: 0;
				top: 6px;
			}
		}
	}
	&.list-style-one {
		li {
			padding: 6px 0;
			padding-left: 25px;
			position: relative;
			&::before {
				position: absolute;
				content: "";
				left: 0;
				width: 10px;
				height: 10px;
				top: 12px;
				background-color: hsl(var(--base));
				border-radius: 50%;
			}
		}
	}
	&.list-style-two {
		li {
			padding: 6px 0;
			padding-left: 25px;
			position: relative;
			&::before {
				@extend %line-ico;
				content: "\f101";
				left: 0;
				top: 6px;
				color: hsl(var(--base));
			}
		}
	}
	&.list-50-sm {
		@include breakpoint(sm) {
			li {
				width: 50%;
			}
		}
	}
	&.list-50-md {
		@include breakpoint(md) {
			li {
				width: 50%;
			}
		}
	}
	&.list-50-lg {
		@include breakpoint(lg) {
			li {
				width: 50%;
			}
		}
	}
	&.list-50-xl {
		@include breakpoint(xl) {
			li {
				width: 50%;
			}
		}
	}
}