.home-project-list {
    li {
        border: 1px solid lighten($gray-light, 15%);
        border-radius: 3px;
        cursor: pointer;
        margin-bottom: .75rem;
        padding: 1rem;
        text-overflow: ellipsis;
        &:hover {
            border-color: $primary-light;
            transition: all .3s linear;
            p {
                color: $gray;
                transition: color .3s linear;
            }
            .private path {
                fill: $gray;
                transition: fill .3s linear;
            }
        }
    }
    a {
        display: flex;
        flex-direction: column;
        min-height: 5rem;
    }
    h2 {
        @extend %text;
        color: $gray;
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: .5rem;
        text-transform: none;
        .project-name {
            display: inline-block;
            max-width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            white-space: nowrap;
        }
    }
    p {
        @extend %text;
        @extend %xsmall;
        color: $gray-light;
        line-height: 125%;
        margin: 0;
        word-wrap: break-word;
    }
}

.projects-empty {
    text-align: center;
    svg {
        height: 100px;
        margin: 1rem auto;
        text-align: center;
        width: 100%;
        path {
            fill: $whitish;
        }
    }
    p {
        @extend %small;
    }
    .create-project-button {
        display: block;
        margin-bottom: .25rem;
    }
    .import-project-button {
        display: block;
    }
}