/* ----------------------------------------
*               Main containers
* -----------------------------------------
*/
.body-container {
    width: 100%;
    height: 100%;
    gap: 20px;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
}
/* Application container */
.container-app {
    display: flex;
    flex-direction: column;
    gap: 10px
}
/* Main app card container Eg. Profile, leave..etc */
.container-cards {
    flex-direction: row;
    gap: 10px
}

.card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
}

.card-header {
    flex-direction: row;
    gap: 10px;
}

.card-header-profile {
    width: 50px;
    height: 50px;
    border: 3.5px solid rgb(84, 84, 84);
    border-radius: 50%;
    background-color: aliceblue;
}

.card-header-icon {
    align-items: start;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;

    .card-header-img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

/* seperate style for sphere */
.card-sphere {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}



.iComponent {
    padding: 10px;
    align-items: flex-start;
    gap: 5px
}

.iComponent[s-state="init"] {
    display: none;
}

.iComponent[s-state="start"] {
    display: inherit;
}


/* basic card states */
.card[s-state="init"] {
    display: none;
}

.card[s-state="start"] {
    display: inherit;
}

.card[s-state="open"] {
    display: inherit;
}

.card[s-state="close"] {
    display: none;
}