@import "../styles";

.c-mentor-discussion-summary {
    @apply flex items-center;
    & .c-avatar {
        height: 42px;
        width: 42px;

        @apply mr-16 flex-shrink-0;
    }
    & .info {
        @apply flex flex-col;
        overflow: hidden;
        max-width: 180px;
        @apply leading-150 font-medium;
        @apply mr-auto;

        & .handle {
            @apply flex items-center;
            @apply text-16 text-textColor2;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        & .exercise {
            @apply text-14 text-textColor6;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    & .c-tag {
        @apply ml-16;
        @apply border-darkBlue text-lightBlue bg-veryLightBlue;
    }
    & .comments {
        @apply flex flex-shrink-0 items-center justify-center ml-auto;
        @apply font-semibold text-14 leading-150 text-textColor2 text-orange;
        @apply ml-16;

        & .c-icon {
            @apply mr-6;
            height: 16px;
            width: 16px;
            filter: var(--orange-filter);
        }
    }
    & time {
        @apply ml-16 flex-shrink-0 text-textColor6;
    }
    & .action-icon {
        @apply ml-24 text-textColor6;
        height: 16px;
        width: 16px;
    }

    &.--slim {
        & .c-avatar {
            height: 32px;
            width: 32px;
        }
    }
}
