/* ------------------------ */
/* topbar context menu area */
/* ------------------------ */

.topbar-context-menu-area {
    z-index: 2;
}


/* ------------ */
/* topbar panel */
/* ------------ */

.topbar-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 4px rgba(0 0 0 / 10%);
    padding-left: calc(384px - 232px);
    padding-right: 40px;
}

@media (max-width: 900px) {
    .topbar-panel {
        height: 80px;
        padding: 0;
        padding-left: 16px;
        padding-right: 16px;

        &>.f-s-w-20px-400 {
            display: none;
        }
    }
}



/* ----------- */
/* topbar logo */
/* ----------- */

.topbar-logo {
    display: none;
}

@media (max-width: 900px) {
    .topbar-logo {
        display: block;
        height: 39px;
        width: 32px;
    }
}



/* ---------- */
/* topbar nav */
/* ---------- */

.topbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.topbar-icon {
    height: 32px;
    width: 32px;
    object-fit: contain;

    &:hover {
        cursor: pointer;
    }
}

@media (max-width: 900px) {
    .topbar-icon {
        display: none;
    }
}

.topbar-user-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 56px;
    border: 3px solid rgb(42, 54, 71);
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    color: rgb(41, 170, 227);

    &:hover {
        cursor: pointer;
        background-color: rgb(226, 230, 236);
    }
}

@media (max-width: 900px) {
    .topbar-user-profile {
        height: 40px;
        width: 40px;
        font-size: 16px;
    }
}



/* ------------ */
/* context menu */
/* ------------ */

#context-menu-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: calc(158px - 20px);
    width: calc(150px - 20px);
    background-color: rgb(42, 54, 71);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    right: 16px;
    padding: 10px;
    z-index: 2;
}

.context-menu-member {
    padding: 8px 12px;
    font-size: 16px;
    color: rgb(205, 205, 205);
}

.context-menu-member:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(10, 25, 49);
}

@media (max-width: 900px) {
    #context-menu-panel {
        top: 62px;
    }

    .context-menu-panel-in {
        right: 16px;
        animation-duration: 300ms;
        animation-name: context-menu-panel-in;
    }

    @keyframes context-menu-panel-in {
        from {
            right: calc(-150px - 50px);
        }

        to {
            right: 16px;
        }
    }

    .context-menu-panel-out {
        top: 62px;
        right: calc(-150px - 50px);
        animation-duration: 300ms;
        animation-name: context-menu-panel-out;
    }

    @keyframes context-menu-panel-out {
        from {
            right: 16px;
        }

        to {
            right: calc(-150px - 50px);
        }
    }
}