.preact-context-menu .context-menu {
    z-index: 10000;
    min-width: 190px;
    padding: 6px 8px;
    user-select: none;
    border-radius: 4px;
    font-size: .875rem;
    color: var(--secondary-foreground);
    background: var(--primary-background) !important;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05);

    > span, .main > span {
        gap: 6px;
        margin: 2px 0;
        display: flex;
        padding: 6px 8px;
        border-radius: 3px;
        align-items: center;
        white-space: nowrap;
        
        &:not([data-disabled="true"]) {
            cursor: pointer;
            
            &:hover {
                background: var(--secondary-background);
            }
        }

        .tip {
            flex-grow: 1;
            font-size: .650rem;
            text-align: right;
            color: var(--tertiary-foreground);
        }
    }
}

.context-menu.Status {
    .header {
        gap: 8px;
        display: flex;
        padding: 6px 8px;
        font-weight: 600;
        align-items: center;
        color: var(--foreground);

        .main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .status {
            max-width: 132px;
            font-size: .625rem;
            color: var(--secondary-foreground);

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;

        &.online {
            background: var(--status-online);
        }

        &.idle {
            background: var(--status-away);
        }

        &.busy {
            background: var(--status-busy);
        }

        &.invisible {
            background: var(--status-invisible);
        }
    }
}