/* 2 kinds of panels - 
Hard border panel
Soft border panel
*/

.c-panel{
    background-color: var(--white);
    border: 2px solid transparent;
    color: var(--grey-dark);
    border-radius: var(--bord-rad);
    transition: var(--trans);
}

.c-panel.chosen{
    border-color: var(--accent-color)
}

.dark-mode .c-panel.chosen{
    border-collapse: var(--accent-color--dm);
}

.c-panel.chosen::after{
    content: "\2713 ";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -8px;
    right: -8px;
    
    font-size: 12px;
    line-height: 16px;
    color: var(--white);
    text-align: center;
    
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color);
    border-radius: 50%;
    
    transition: var(--trans);
}

.dark-mode .c-panel.chosen::after{
    border-color: var(--accent-color--dm);
    background-color: var(--accent-color--dm);
}

.c-panel.c-panel--hard-border{
    box-shadow: 6px 6px 0 2px hsl(0, 0%, 80%), 12px 12px 0 2px hsl(0, 0%, 90%);
    border: 1px solid var(--border-color);
}

.c-panel.c-panel--soft-border{
    background-color: var(--white);
    box-shadow: var(--box-shadow--light);
}
/* HARD BORDER PANEL */
.hard-border-panel{
    background-color: var(--white);
    box-shadow: 6px 6px 0 2px hsl(0, 0%, 80%), 12px 12px 0 2px hsl(0, 0%, 90%);
}

/* SOFT BORDER PANEL */
.soft-border-panel{
    background-color: var(--white);
    box-shadow: var(--box-shadow--light);
}