.duty-assigned-to {
    display: flex;
    margin-top: 1rem;
    position: relative;
    &:hover {
        .assigned-to {
            .icon-delete {
                opacity: 1;
                transition: opacity .3s linear;
            }
        }
    }
    .loading-spinner {
        @extend %loading-spinner;
        margin: 0 auto;
        max-width: 2rem;
    }
    .user-avatar {
        flex-grow: 1;
        img {
            border-radius: 8%;
            width: 100%;
        }
    }
    .assigned-to {
        flex-grow: 3;
        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;
            }
        }
    }
}