/* 用户组前台身份展示与级别流光样式。 */

.user-group-badge {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.user-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-group-separator,
.user-group-level {
    flex: 0 0 auto;
}

.user-group-separator {
    color: var(--color-muted);
}

.user-group-level {
    --user-group-level-shine: var(--theme-button-accent);
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: inherit;
    white-space: nowrap;
}

:root[data-color-scheme="ink"] .user-group-level {
    --user-group-level-shine: #ffffff;
}

.user-group-level::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        transparent 30%,
        var(--user-group-level-shine) 42%,
        var(--user-group-level-shine) 50%,
        var(--user-group-level-shine) 58%,
        transparent 70%,
        transparent 100%
    );
    background-position: 0 0;
    background-size: 220px 100%;
    background-clip: text;
    content: attr(data-label);
    pointer-events: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: user-group-level-shine 6s linear infinite;
}

@keyframes user-group-level-shine {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 220px 0;
    }
}