/**=====================
    List CSS Start
==========================**/
.list-group-item.active {
	background-color: var(--theme-deafult);
	border-color: var(--theme-deafult);
}

.list-group {
	i {
		margin-right: $list-group-margin;
	}

	img {
		height: 40px;
		width: 40px;
		margin-right: $list-group-margin;
	}
}

$list-name: primary,
	secondary,
	success,
	warning,
	info,
	light,
	danger,
	dark;

$list-light-color: $light-primary,
	$light-secondary,
	$light-success,
	$light-warning,
	$light-info,
	$light-white,
	$light-danger,
	$light-dark;

@each $var in $list-name {
	$i: index($list-name, $var);

	.list-light-#{$var} {
		background-color: nth($list-light-color, $i);

		&:hover,
		&:active,
		&:focus {
			background-color: nth($list-light-color, $i);
		}
	}

	.list-hover-#{$var} {
		background-color: unset;

		&:hover,
		&:active,
		&.active,
		&:focus {
			background-color: nth($list-light-color, $i);
			color: $dark-color;
		}
	}
}

.horizontal-list-wrapper {
	.list-group {
		.list-group-item {
			padding: 8px;
		}
	}
}

.list-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;

	@media (max-width: 414px) {
		display: block;
	}

	@media (max-width: 366px) {
		padding-bottom: 8px;
	}

	.list-img {
		width: calc(40px + (55 - 40) * ((100vw - 320px) / (1920 - 320)));
		height: calc(40px + (55 - 40) * ((100vw - 320px) / (1920 - 320)));
		margin-bottom: 10px;
		border-radius: 50%;
	}

	.list-content {
		p {
			margin-bottom: 0;
		}
	}
}

.scrollbar-wrapper {
	max-height: 270px;
	overflow: auto;
}

.main-lists-content {
	small {
		@media (max-width: 480px) {
			display: none;
		}
	}
}

.list-behavior-1 {
	@media (max-width: 1199px) {
		flex-direction: column;
		gap: 12px;
	}

	.flex-grow-1 {
		margin-left: 16px;

		[dir="rtl"] & {
			margin-right: 16px;
			margin-left: unset;
		}
	}
}

.list-behavior-2 {
	@media (max-width: 1199px) {
		display: none;
	}

	.flex-grow-1 {
		margin-right: 16px;

		[dir="rtl"] & {
			margin-left: 16px;
			margin-right: unset;
		}
	}
}

.list-group {
	.list-group-item {
		padding: 11px 16px;

		.form-check-input {
			&:focus {
				box-shadow: unset !important;
			}
		}

		i {
			[dir="rtl"] & {
				margin-left: 10px;
				margin-right: unset;
			}
		}
	}
}

/**=====================
    List CSS Ends
==========================**/