// Like and Watch number component

// Common styles for all list items
@mixin list-itemtype-common {
    @include list-itemtype-track;
    border-bottom: 1px solid $whitish;
    display: flex;
    padding: .5rem;
    padding-right: 0;
    h2 {
        @include font-type(text);
        line-height: 1.4;
        margin-bottom: 0;
        text-transform: none;
    }
    p {
        @include font-type(light);
        margin-bottom: 0;
    }
    .list-itemtype-avatar {
        flex-basis: 3rem;
        flex-shrink: 0;
        margin-right: .75rem;
        min-width: 3rem;
        img {
            width: 100%;
        }
    }
}

.list-itemtype-project {
    @include list-itemtype-common;
    justify-content: space-between;
    h2 {
        @include font-size(large);
    }
    .icon-blocked-project {
        @include svg-size(.75rem);
    }
    .list-itemtype-project-data-wrapper {
        display: flex;
        .icon-private {
            fill: $gray-light;
            height: 22px;
            margin-left: .5rem;
            padding-top: .5rem;
            width: 22px;
        }
    }
    .list-itemtype-project-image {
        flex-shrink: 0;
        margin-right: .5rem;
        width: 3rem;
        img {
            width: 100%;
        }
    }
    .list-itemtype-project-members {
        align-self: flex-end;
        display: flex;
        flex-direction: row-reverse;
        flex-grow: 0;
        flex-wrap: wrap-reverse;
        margin-top: 1rem;
        img {
            border-radius: .1rem;
            margin-right: .3rem;
            width: 2rem;
        }
    }
    .tag {
        align-self: flex-end;
        margin: 0 .25rem .25rem 0;
        padding: .5rem;
    }
}

.list-itemtype-ticket {
    @include list-itemtype-common;
    position: relative;
    h2 {
        @include font-size(medium);
    }
    .ticket-type,
    .ticket-project {
        margin-right: .3rem;
    }
    .ticket-type {
        margin-left: .3rem;
        text-transform: uppercase;
    }
    .ticket-project {
        color: $gray-light;
    }
    .list-itemtype-ticket-data {
        flex: 1;
        margin-right: 1rem;
    }
    .ticket-id {
        color: $gray-light;
    }
    .ticket-blocked {
        color: $red;
        margin-right: .25rem;
    }
}


.list-itemtype-user {
    @include list-itemtype-common;
    h2 {
        @include font-size(large);
    }
    .extra-info {
        @include font-size(small);
        @include font-type(light);
        margin-top: .25rem;
    }
}