/* Colors available : yellow, indigo, gray, purple, orange, blue, pink, green */

.setting-card{
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.setting-card .icon-holder{
    margin-right: 8px;
    font-weight: 500;
    font-size: var(--font-14);
}

.setting-card span{
    font-weight: 500;
    font-size: var(--font-14);
    color: var(--text-gray-10);
}



.setting-container.blue .icon-holder{
    font-weight : 500;
    background: var(--blue-50);
    color: var(--blue-600);
}


.setting-container.blue .setting-card{
    background: var(--blue-50);
}

.setting-container.blue .setting-card .icon-holder{
    background: var(--blue-100);
}




.setting-container.green .icon-holder{
    font-weight : 500;
    background: var(--green-50);
    color: var(--green-600);    
}

.setting-container.green .setting-card{
    background: var(--green-50);
}

.setting-container.green .setting-card .icon-holder{
    background: var(--green-100);
}



.setting-container.orange .icon-holder{
    font-weight : 500;
    background: var(--orange-50);
    color: var(--orange-600);
}

.setting-container.orange .setting-card{
    background: var(--orange-50);
}

.setting-container.orange .setting-card .icon-holder{
    background: var(--orange-100);
}




.setting-container.pink .icon-holder{
    font-weight : 500;
    background: var(--pink-50);
    color: var(--pink-600);
}

.setting-container.pink .setting-card{
    background: var(--pink-50);
}

.setting-container.pink .setting-card .icon-holder{
    background: var(--pink-100);
}




.setting-container.yellow .icon-holder{
    font-weight : 500;
    background: var(--yellow-50);
    color: var(--yellow-600);
}

.setting-container.yellow .setting-card{
    background: var(--yellow-50);
}

.setting-container.yellow .setting-card .icon-holder{
    background: var(--yellow-100);
}




.setting-container.indigo .icon-holder{
    font-weight : 500;
    background: var(--indigo-50);
    color: var(--indigo-600);
}

.setting-container.indigo .setting-card{
    background: var(--indigo-50);
}

.setting-container.indigo .setting-card .icon-holder{
    background: var(--indigo-100);
}




.setting-container.gray .icon-holder{
    font-weight : 500;
    background: var(--gray-50);
    color: var(--gray-600);
}

.setting-container.gray .setting-card{
    background: var(--gray-50);
}

.setting-container.gray .setting-card .icon-holder{
    background: var(--gray-100);
}




.setting-container.purple .icon-holder{
    font-weight : 500;
    background: var(--purple-50);
    color: var(--purple-600);
}

.setting-container.purple .setting-card{
    background: var(--purple-50);
}