.taskboard-task {
    background: $postit;
    margin-bottom: 1rem;
    position: relative;
    .taskboard-tagline {
        @include table-flex();
    }
    .taskboard-tag {
        @include table-flex-child(1, 0, 0, 0);
        background: $postit-hover; //Fallback
        height: .3rem;
    }
    .taskboard-task-inner {
        @include table-flex();
        padding: 1rem .5rem;
    }
    .avatar {
        @include table-flex-child($flex-basis: 50px);
        a {
            @extend %small;
            display: block;
            text-align: center;
        }
        img {
            margin: 0 auto;
        }
        figcaption {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
    }
    .task-num {
        color: $postit-hover;
        margin-right: .5em;
    }
    .taskboard-text {
        @extend %small;
        @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
    }
    .icon-edit,
    .icon-drag-h {
        @extend %large;
        bottom: .2rem;
        color: $postit-hover;
        display: none;
        position: absolute;
        &:hover {
            @include transition(color, .3s, linear);
            color: darken($postit-hover, 15%);
        }
    }
    .icon-edit {
        right: .5rem;
    }
    .icon-drag-h {
        @extend %xlarge;
        cursor: move;
        right: 45%;
    }
    &:hover {
        .icon-edit,
        .icon-drag-h {
            display: block;
        }
    }
}

.task-drag {
    @include box-shadow();
}