@layer components {
    avatar-image {
        display: grid;
        width: 35px;
        height: 35px;
        position: relative;

        place-content: center;
        text-align: center;

        border-radius: var(--radius-round);

        header.admin & {
            box-shadow: 0 0 0 2px var(--color-brick);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius-round);
        }

        div.online {
            background: green;
            border: solid 1px white;
            border-radius: 100%;
            bottom: -2px;
            height: 8px;
            position: absolute;
            right: -2px;
            width: 8px;
        }
    }

    .unread-notification {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 9px;
        width: 9px;
        background: var(--color-altorange);
        border-radius: 25px;
        border: 2px solid var(--color-brick);

        @media screen and (max-width: 768px) {
            display: none;
        }
    }

    .unread-notification-mobile {
        display: none;

        @media screen and (max-width: 768px) {
            display: block;
            position: absolute;
            top: 40px;
            right: 35px;
            height: 9px;
            width: 9px;
            background: var(--color-altorange);
            border-radius: 25px;
            border: 2px solid var(--color-brick);
            z-index: 10;
        }

    }
}