.cox-profile-flairs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.cox-profile-flairs--compact {
    gap: 5px;
}

.cox-file-hero > .cox-profile-flairs {
    grid-column: 1 / -1;
}

.cox-portal-identity > .cox-profile-flairs {
    grid-column: 2 / -1;
}

.cox-student-teacher-card > .cox-profile-flairs,
.cox-teacher-student-list article > .cox-profile-flairs,
.cox-teacher-file-card > .cox-profile-flairs {
    margin-top: 10px;
}

.cox-dashboard-sidebar > .cox-profile-flairs {
    margin: 0 14px 14px;
}

.cox-founder-copy > .cox-profile-flairs {
    margin: 10px 0 16px;
}

.cox-profile-flair,
.cox-profile-flairs-empty {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid color-mix(in srgb, var(--cox-flair-color, #7d8796) 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--cox-flair-color, #7d8796) 16%, rgba(7, 9, 14, .92));
    padding: 5px 9px;
    color: color-mix(in srgb, var(--cox-flair-color, #d7dce4) 76%, #fff);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
}

.cox-profile-flairs--compact .cox-profile-flair {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 10px;
}

.cox-profile-flair.is-primary {
    box-shadow: inset 3px 0 0 var(--cox-flair-color, #7d8796);
}

.cox-profile-flair--gold { --cox-flair-color: #f2bf4b; }
.cox-profile-flair--red { --cox-flair-color: #ed1c24; }
.cox-profile-flair--blue { --cox-flair-color: #4b93ff; }
.cox-profile-flair--rose { --cox-flair-color: #ef6c96; }
.cox-profile-flair--cyan { --cox-flair-color: #38c6df; }
.cox-profile-flair--green { --cox-flair-color: #53c878; }
.cox-profile-flair--indigo { --cox-flair-color: #8c7cff; }
.cox-profile-flair--emerald { --cox-flair-color: #2fc89a; }
.cox-profile-flair--violet { --cox-flair-color: #bd78ed; }
.cox-profile-flair--orange { --cox-flair-color: #ee9843; }
.cox-profile-flair--gray { --cox-flair-color: #98a1ae; }

.cox-profile-flairs-empty {
    border-style: dashed;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 680px) {
    .cox-portal-identity > .cox-profile-flairs {
        grid-column: 1 / -1;
        justify-content: center;
    }
}