.user-list-component {
    .user-list-wrapper {
        white-space: nowrap;
        &::after {
            content: '';
            clear: both;
            height: 0;
            display: block;
        }
    }

    .user-list, .plus-number-wrapper {
        margin: 0;
        padding: 0;
    }

    .user-list {
        margin-right: 3%;
        display: inline;
    }

    .plus-number-wrapper {
        width: 18%;
        position: relative;
        background: hsl(214,32%,91%);  /* $gray-300 */
        border-radius: 350px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;

        &::after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

        .plus-number {
            position: absolute;
            font-size: 14px;
            top: 50%;
            left: 0;
            right: 0;
            text-align: center;
            transform: translate(0, -50%);
            line-height: 0;

            &:hover {
                text-decoration: none;
                color: var(--black);
                opacity: 0.8;
            }

            &.plus-number[href="javascript:void(0);"]:hover {
                opacity: 1;
                cursor: default;
            }
        }
    }

    .title {
        font-size: 14px;
    }

    .title, .plus-number {
        color: var(--black);
    }

    div.user-list-item {
        float: left;
        list-style: none;
        width: 18%;
        margin-right: 2%;

        a {
            overflow: hidden;
            border-radius: 350px;
            display: block;

            &[href="javascript:void(0);"]:hover {
                opacity: 1;
                cursor: default;
            }

            img {
                width: 100%;
            }
        }
    }
}
