.color-box {
    min-width         : 2em;
    width             : 2em;
    height            : 2em;
    float             : left;
    border-radius     : 3px;
    margin-inline-end : .5em;

    background        : var(--b-primary);
}

.name {
    --b-grid-cell-font-weight : 700;

    &:before {
        content           : '\f007';
        font-family       : 'Font Awesome 6 Free';
        font-weight       : 900;
        font-size         : 1.5em;
        margin-inline-end : .5em;
        color             : #e0e0e7;
    }
}

.age {
    font-size       : 1.2em;
    justify-content : center;

    .badge {
        font-size     : .9em;
        width         : 2.2em;
        height        : 2.2em;
        color         : #fff;
        border-radius : 100%;
        display       : grid;
        place-items   : center;

        background    : var(--b-color-blue);
    }
}

.color .b-grid-header-text {
    animation : cycle-color 5s ease infinite;
}

@keyframes cycle-color {
    0% {
        color : black;
    }
    25% {
        color : red;
    }
    50% {
        color : purple;
    }
    75% {
        color : teal;
    }
    100% {
        color : blue;
    }
}

[data-column=name] .b-grid-header-text-content {
    display     : flex;
    align-items : center;

    label {
        flex : 1;
    }
}