.list-group-item {
    background-color: rgba(255,255,255,0);
    border: 0.0625rem solid $border;
    padding: 0.75rem 0.625rem;
	color: $body-color;
	
	&.active{
		background-color :var(--primary);
		border-color :var(--primary);
	}
    &:first-child{
        border-top-left-radius: var(--border-radius-base);
        border-top-right-radius: var(--border-radius-base);
    }
    &:last-child{
        border-bottom-left-radius: var(--border-radius-base);
        border-bottom-right-radius: var(--border-radius-base);
    }
}

.list-group-item.disabled, .list-group-item:disabled {
    color: #fff;
    background-color: $secondary;
    border-color: $secondary;
}
[class*="bg-"]{
	.list-group-item{
		border-color:rgba($white, 0.05);
	}
}
.bg-warning{
	.list-group-item{
		border-color:rgba($black, 0.05);
	}
}

.card {
    &.text-white{
        .list-group{
            .list-group-item{
                color: #fff;        
            }
        }
    }    
}


.list-group-item{
	&-primary{
		color: var(--primary);
	}
	&-secondary{
		color: $secondary;
	}
	&-success{
		color: $success;
	}
	&-danger{
		color: $danger;
	}
	&-warning{
		color: $warning;
	}
	&-info{
		color: $info;
	} 
	&-light{
		color: $light;
	}
	&-dark{
		color: $dark;
	}
}

.dz-list{
    & > ul > li{
        border-bottom: 1px solid var(--border-color);
        .dz-media{
            margin-right: 15px;
            min-width: 15px;
        }
        .dz-icon {
			height: 20px;
			width: 20px;
			svg {
				width: 20px;
				height: 20px;
				transform: scale(1.2);
			}
			&.icon-sm{
				svg {
					width: 16px;
					height: 16px;
					transform: scale(1.2);
				}
			}
		}
        .item-content{
            padding: 15px 0;
            display: flex;
            align-items: center;
            position: relative;
            
            .dz-title{
                color: var(--title);
                font-size: 0.875rem;
                font-weight: 600;
            }
        }
        .item-link{
            &:after{
                content: "\f105";
                font-family: "Font Awesome 6 Free";
                right: 10px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        a{
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--title);
        }
    }
    &.list-space{
        & > ul > li{
            a{
                padding-left: 20px;
                padding-right: 20px;
                
                &.item-link{
                    &:after{
                        right: 20px;
                    }
                }
            }
        }
    }
}

//Setting====

.toggle-list{
	display: flex;
	align-items: center;
	justify-content: space-between;
	.form-switch{
		padding: 0;
		margin: 0;
	}
	.no-class {
		position: relative;
	}
	.form-check-input{
	    position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		
	}
	.form-check-label{
		background-image: none !important;
		margin-right: 0 !important;
		width: 2rem !important;
		height: 0.875rem !important;
		position: relative;
		margin: 0;
		background: #565656;
		border-radius: 20px;
		display: block;
		transition: all 0.5s;
		&:after{
			content: "";
			position: absolute;
			top: -50%;
			left: 0;
			background-color: #e9e9e9;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			transform: translateY(50%) scale(1.4);
			box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.20);
			transition: all 0.15s;
		}
		&:active:after{
			box-shadow: 0px 0px 0px 3px var(--rgba-primary-4);
		}
	}
	.form-check-input:checked + .form-check-label{
		background:var(--primary);
		
		&:after{
		    left: calc(100% - 0.875rem);
			background-color: #e9e9e9;
		}
	}
}

.login-activity{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	.icon{
		width: 40px;
		height: 40px;
		min-width: 40px;
		background-color: var(--rgba-primary-2);
		text-align: center;
		line-height: 40px;
		border-radius: var(--border-radius-base);
		svg{
			path{
				stroke: var(--primary);
			}
		}
	}
	.right-content{
		svg{
			path{
				fill: var(--primary);
			}
		}
	}
}


.list-style-1{
	padding: 0 20px;
	li{
		position: relative;
		padding-bottom: 15px;
		&:after{
			content: "";
			position: absolute;
			width: 5px;
			height: 5px;
			background-color: var(--dark);
			border-radius: 50%;
			top: 8px;
			left: -18px;
		}
	}
}


.share-list{
	li{
		padding-bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left-content{
			position: relative;
			padding-left: 55px;
	
			img{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.name{
			font-weight: 500;
			margin-bottom: 0;
		}
		.username{
			font-size: 12px;
			color: #999;
		}
	}
}

//LIKE-BUTTON===

.like-button{
	position: relative;
	font-size: 20px;
	--xw:10px;
	&:focus {
		outline: 0;
	}
	&:before, 
	&:after{
		position: absolute;
		content: '';
		display: block;
		width: 200%;
		height: 100%;
		left: -50%;
		z-index: -1000;
		transition: all ease-in-out 0.5s;
		background-repeat: no-repeat;
	}
  
	&:before{
		display: none;
		top: -35%;
		background-image:  
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle,  transparent 20%, $pink 20%, transparent 30%),
		radial-gradient(circle, $pink 20%, transparent 20%), 
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle,  transparent 10%, $pink 15%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%);
		background-size:
		calc(10% + var(--xw)) 
		calc(10% + var(--xw)), 
		calc(20% + var(--xw)) 
		calc(20% + var(--xw)), 
		calc(15% + var(--xw)) 
		calc(15% + var(--xw)), 
		calc(20% + var(--xw)) 
		calc(20% + var(--xw)), 
		calc(18% + var(--xw)) 
		calc(18% + var(--xw)), 
		calc(10% + var(--xw)) 
		calc(10% + var(--xw)), 
		calc(15% + var(--xw)) 
		calc(15% + var(--xw)), 
		calc(10% + var(--xw)) 
		calc(10% + var(--xw)), 
		calc(18% + var(--xw)) 
		calc(18% + var(--xw));
	}
  
	&:after{
		display: none;
		bottom: -25%;
		background-image:  
		radial-gradient(circle, $pink 20%, transparent 20%), 
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle,  transparent 10%, $pink 15%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%),
		radial-gradient(circle, $pink 20%, transparent 20%);
		background-size: 
		calc(15% + var(--xw)) 
		calc(15% + var(--xw)), 
		calc(20% + var(--xw)) 
		calc(20% + var(--xw)), 
		calc(18% + var(--xw)) 
		calc(18% + var(--xw)), 
		calc(20% + var(--xw)) 
		calc(20% + var(--xw)), 
		calc(15% + var(--xw)) 
		calc(15% + var(--xw)), 
		calc(10% + var(--xw)) 
		calc(10% + var(--xw)), 
		calc(20% + var(--xw)) 
		calc(20% + var(--xw));
	}
 
	&:active{
		transform: scale(0.9);
	}
  
	&.active{
		&:before{
			display: block;
			animation: likeButton ease-in-out 0.75s forwards;
		}
		&:after{
			display: block;
			animation: likeButtonBottom ease-in-out 0.75s forwards;
		}
		.fa-heart:before{
			font-weight: 700;
			color:$pink;
		}
	}
}
@keyframes likeButton {
	0%{
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
    50% {
		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
	}
}
@keyframes likeButtonBottom {
	0%{
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}	
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
	}
}



