/*
 * SATAID Web - Shared Online Status Widget
 *
 * Draggable shared widget.
 */


/* ==========================================================
   WIDGET
========================================================== */

.online-status-widget {
    position: fixed;

    left: 16px;
    bottom: 16px;

    z-index: 9000;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 36px;

    padding:
        7px 12px;

    color: #f8fafc;

    background:
        rgba(15, 23, 42, 0.90);

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    user-select: none;
    -webkit-user-select: none;

    touch-action: none;

    pointer-events: auto;

    cursor: grab;
}


/* ==========================================================
   DRAGGING
========================================================== */

.online-status-widget.is-dragging {
    cursor: grabbing;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.32);

    opacity: .96;
}


/* ==========================================================
   STATUS DOT
========================================================== */

.online-status-dot {
    width: 9px;
    height: 9px;

    flex:
        0 0 9px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 3px
        rgba(34, 197, 94, 0.14);
}


.online-status-widget.is-loading
.online-status-dot {

    background: #f59e0b;

    box-shadow:
        0 0 0 3px
        rgba(245, 158, 11, 0.14);
}


.online-status-widget.is-error
.online-status-dot {

    background: #94a3b8;

    box-shadow: none;
}


/* ==========================================================
   LABEL
========================================================== */

.online-status-label {
    white-space: nowrap;
}


.online-status-count {
    min-width: 1ch;

    font-variant-numeric:
        tabular-nums;

    font-weight: 750;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

    .online-status-widget {
        left: 10px;
        bottom: 10px;

        min-height: 32px;

        padding:
            6px 10px;

        font-size: 13px;
    }
}


/* ==========================================================
   LARGE DISPLAY
========================================================== */

@media (min-width: 1600px) {

    .online-status-widget {
        left: 20px;
        bottom: 20px;

        min-height: 40px;

        padding:
            8px 14px;

        font-size: 16px;
    }


    .online-status-dot {
        width: 10px;
        height: 10px;

        flex-basis: 10px;
    }
}