_feed.scss

.feed {
    &__item {
        position: relative;
        display: flex;
        padding-bottom: 20px;
        margin-bottom: 25px;
        border-bottom: 1px solid $color--mid-grey;

        &:last-child {
            border-bottom: 0;
        }

        &--collaps {
            position: relative;
            max-height: 300px;
            overflow: hidden;
        }
    }

    &__label {
        padding: 5px 10px;
        margin: 0;
        font-size: 12px;
        font-weight: $weight--bold;
        color: $color--white;
        text-align: center;

        &--note {
            background-color: $color--error;
        }

        &--determination {
            background-color: $color--ocean;
        }

        &--comment,
        &--message {
            background-color: $color--grass;
        }

        &--activity,
        &--action {
            background-color: $color--mint;
        }

        &--mobile {
            display: block;
            margin-right: 10px;

            @include media-query(small-tablet) {
                display: none;
            }
        }
    }

    &__pre-content {
        display: none;
        width: 110px;

        @include media-query(small-tablet) {
            display: block;
        }
    }

    &__content {
        width: 100%;

        @include media-query(small-tablet) {
            padding-left: 20px;
        }
    }

    &__meta {
        @include responsive-font-sizes(12px, 16px);
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        @include media-query(small-tablet) {
            margin-bottom: 10px;
        }
    }

    &__meta-item {
        margin: 0 10px 0 0;

        span {
            font-weight: $weight--bold;
        }

        @include media-query(small-tablet) {
            margin: 0 15px 0 0;
        }

        &--right {
            margin-left: auto;
        }

        &--progress {
            width: 100%;
            margin: 5px 0 0;
            font-size: map-get($font-sizes, milli);
            color: $color--black-50;

            @include media-query(small-tablet) {
                width: auto;
                margin: 0 20px 0 0;
            }

            span {
                &:first-child {
                    &::after {
                        @include triangle(right, $color--black-50, 4px);
                        display: inline-block;
                        margin: 0 5px 0 10px;
                    }
                }
            }
        }
    }

    &__related-item {
        svg {
            width: 10px;
            height: 14px;
            margin-left: 10px;
            margin-top: .35em;
            fill: $color--dark-blue;
        }
    }

    &__heading {
        margin-bottom: 0;

        @include media-query(small-tablet) {
            width: 90%;
            font-size: 18px;
        }

    }

    &__heading-status {
        padding: 3px 10px;
        font-size: map-get($font-sizes, milli);
        font-weight: $weight--bold;
        color: $color--marine;
        text-align: center;
        text-transform: uppercase;
        background-color: $color--sky-blue;
    }

    &__company {
        @extend %h6;
    }

    &__show-button {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 3em 0 .5em;
        background-image: linear-gradient(to bottom, $color--white-10, $color--white);
    }
}