.UserThumb {
    display: flex;
    border-radius: 50%;

    &-image {
        border-radius: 50%;
        width: 36px;
        height: 36px;
    }

    &-placeholder {
        align-items: center;
        background-color: transparent;
        display: flex;
        height: 36px;
        text-align: center;
        width: 36px;
    }

    &.bg-midnight-5 {
        background-color: var(--midnight-5);
    }

    &.bg-blue {
        background-color: var(--blue);
    }

    &.bg-teal {
        background-color: var(--teal);
    }

    &.bg-purple {
        background-color: var(--purple);
    }

    &.bg-pink {
        background-color: var(--pink);
    }

    &.bg-orange {
        background-color: var(--orange);
    }

    &.bg-cyan {
        background-color: var(--cyan);
    }

    &.bg-sky-blue {
        background-color: var(--sky-blue);
    }

    &-title {
        flex: 1;
        color: #fff;
    }
}