.duty-assigned-to {
    @include table-flex();
    margin-top: 1rem;
    position: relative;
    &:hover {
        .assigned-to {
            .icon-delete {
                @include transition (opacity .3s linear);
                opacity: 1;
            }
        }
    }
    &.loading {
        width: 100%;
        span {
            @include animation (loading .5s linear);
            @include animation (spin 1s linear infinite);
            font-size: 30px;
            padding: 20px 0;
            text-align: center;
            width: 100%;
        }
    }
    .user-avatar {
        @include table-flex-child(1, 0);
        img {
            border-radius: 8%;
            width: 100%;
        }
    }
    .assigned-to {
        @include table-flex-child(3, 0);
        margin-left: 1rem;
        margin-top: 15px;
        .assigned-title {
            @extend %small;
            color: $gray-light;
            display: block;
        }
        .user-assigned {
            @extend %large;
            color: $green-taiga;
            cursor: default;
            line-height: 1.5rem;
            &.editable {
                cursor: pointer;
            }
            .icon {
                vertical-align: top;
            }
        }
        .assigned-name {
            @include ellipsis(80%);
            display: inline-block;
        }
        .icon-delete {
            color: $gray-light;
            opacity: 0;
            position: absolute;
            right: 0;
            top: 0;
            &:hover {
                color: $red;
            }
        }
    }
}