:root{
    --menu-bg: #ffffff;
    --border: #d8dde6;

    --tab-bg: #4E5E6D;
    --tab-hover: #3f4c59;
    --tab-active-bg: #ffffff;
    --tab-text: #ffffff;
    --tab-active-text: #4E5E6D;

    --row-gradient-top: #ffffff;
    --row-gradient-bottom: #e6e6e6;

    --hover-green: #06A000;

    --text-main: #222;
    --text-muted: #7b8797;
    --text-subtle: #5f6b7a;

    --online: #11b300;
    --away: #ffb300;
    --offline: #9aa3af;
}

.friend-list{
    list-style:none;
    margin:0;
    padding:0;
}

.friend-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 22px;

    border-bottom:1px solid 1.5px solid #ddd;;

    background: linear-gradient(
        var(--row-gradient-top),
        var(--row-gradient-bottom)
    );

    text-decoration:none;
    cursor: crosshair;

    overflow:hidden;

    transition: background 0.25s ease;
}

.friend-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--hover-green);
    opacity:0;
    transition:0.25s ease;
    z-index:0;
}

.friend-item:hover::before{
    opacity:1;
}

.friend-item > *{
    position:relative;
    z-index:1;
}

.friend-item:hover .nickname,
.friend-item:hover .subname,
.friend-item:hover .status-text{
    color:white !important;
}

.avatar-wrap{
    width:58px;
    height:58px;
    position:relative;
    overflow:hidden;
    flex-shrink:0;
}

.avatar{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.avatar-wrap::after{
    content:"";
    position:absolute;

    /* beautiful little thing */
    inset: 2px;

    z-index:2;
    pointer-events:none;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.5),
        rgba(255,255,255,0) 60%
    );
}

.friend-text{
    display:flex;
    flex-direction:column;
}

.nickname{
    font-size:17px;
    font-weight:bold;
    color:var(--text-main);
}

.subname{
    margin-top:4px;
    font-size:12px;
    color:var(--text-muted);
}

.status{
    margin-left:auto;
    width:140px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
}

.status-icon{
    font-size:16px;
    line-height:1;
}

.status-text{
    font-size:13px;
    color:var(--text-subtle);
}

.online .status-icon{ color:var(--online); }
.away .status-icon{ color:var(--away); }
.offline .status-icon{ color:var(--offline); }