/* ========== Positioning ========== */
.top-left {
    top: 0;
    left: 0;
}
.top-right {
    top: 0;
    right: 0;
}
.bottom-left {
    bottom: 0;
    left: 0;
}
.bottom-right {
    bottom: 0;
    right: 0;
}

/* ============= Badges ============= */
.badge {
    width: max-content;
    position: relative;
    margin: var(--sp-0-5) var(--sp-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge > div {
    height: var(--sp-1);
    width: var(--sp-1);

    background-color: var(--primary-color);
    border: 2px solid #ffffff;
    box-sizing: content-box;
    position: absolute;
}

.badge .online {
    background-color: var(--success-color);
}
.badge .offline {
    background-color: var(--secondary-color);
}
.badge .dnd {
    background-color: var(--failure-color);
}
.badge .number {
    height: var(--sp-1-5);
    width: var(--sp-1-5);
    font-size: 0.7rem;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;
}

.badge i {
    font-size: var(--bigger-font-size);
}
.number.top-left {
    top: -0.5rem;
    left: -1rem;
}
.number.top-right {
    top: -0.5rem;
    right: -1rem;
}
.number.bottom-left {
    bottom: -0.5rem;
    left: -1rem;
}
.number.bottom-right {
    bottom: -0.5rem;
    right: -1rem;
}

@media screen and (min-width: 380px) {
    .top-left {
        top: 0;
        left: var(--sp-0-75);
    }
    .top-right {
        top: 0;
        right: var(--sp-0-75);
    }
    .bottom-left {
        bottom: 0;
        left: var(--sp-0-75);
    }
    .bottom-right {
        bottom: 0;
        right: var(--sp-0-75);
    }
}