.adf-is-selected {
    background: var(--adf-comment-list-primary-color);
}

.adf {
    &-comment-img-container {
        float: left;
        width: 40px;
        height: 100%;
        display: flex;
        align-self: flex-start;
        padding-top: 18px;
    }

    &-comment-list-item {
        /* stylelint-disable */
        white-space: initial;
        /* stylelint-enable */
        display: table-row-group;
        padding-top: 12px;
        overflow: hidden;
        height: 100% !important;
        transition: background 0.8s;
        background-position: center;

        &:hover {
            background:
                var(--adf-comment-list-primary-color)
                radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%)
                center/15000%;
        }

        &:active {
            background-color: var(--adf-comment-list-ripple-color);
            background-size: 100%;
            transition: background 0s;
        }
    }

    &-comment-user-icon {
        padding: 10px 5px;
        width: 30px;
        background-color: var(--theme-primary-color);
        color: var(--theme-primary-color-default-contrast);
        border-radius: 50%;
        font-size: 16px;
        text-align: center;
        height: 20px;
        background-size: cover;
    }

    &-comment-user-name {
        float: left;
        width: calc(100% - 10%);
        padding: 2px 10px;
        font-weight: 600;
        font-size: 14px;
    }

    &-comment-message {
        float: left;
        width: calc(100% - 10px);
        padding: 2px 10px;
        font-style: italic;
        /* stylelint-disable */
        white-space: initial !important;
        /* stylelint-enable */
        font-size: 14px;
        letter-spacing: -0.2px;
        line-height: 1.43;
        color: var(--theme-foreground-text-color);
    }

    &-comment-message-time {
        float: left;
        width: calc(100% - 10%);
        padding: 2px 10px;
        font-size: 12px !important;
        color: var(--theme-foreground-text-color);
    }

    &-comment-contents {
        width: calc(100% - 10px);
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 5px;
    }

    &-people-img {
        border-radius: 90%;
        width: 40px;
        height: 40px;
        vertical-align: middle;
    }
}