@mixin user-list {
    .user-list-single {
        align-content: center;
        align-items: center;
        background: transparent;
        border-bottom: 1px solid $whitish;
        display: flex;
        padding: .25rem 0;
        vertical-align: middle;

        &:last-child {
            border: 0;
        }
    }
    .user-list-avatar {
        flex-basis: 3rem;
        margin-right: .25rem;
        max-width: 3rem;
        img {
            width: 100%;
        }
    }
    .user-list-name {
        @include font-type(light);
        color: $grayer;
        margin-left: .5rem;
    }
}

.assigned-to-list {
    @include user-list;
    margin-top: 1rem;
    .user-list-single {
        &:hover,
        &.selected {
            background: rgba(lighten($primary-light, 30%), .3);
            cursor: pointer;
        }
        &:hover {
            transition: background .3s linear;
            transition-delay: .2s;
        }
        &.is-active {
            background: rgba(lighten($primary-light, 30%), .3);
            cursor: pointer;
            margin-bottom: 1rem;
            position: relative;
            transition: background .3s linear;
            transition-delay: .1s;
        }
        .remove-assigned-to {
            display: block;
            fill: $grayer;
            opacity: 1;
            position: absolute;
            right: 1rem;
            top: 1.5rem;
            transition: all .2s ease-in;
            &:hover {
                fill: $red;
            }
        }
    }
}

.ticket-watchers {
    @include user-list;
    margin-top: 1rem;
    .user-list-single {
        &:hover {
            .delete-watcher {
                opacity: 1;
                transition: opacity .2s ease-in;
            }
        }
    }
    .user-list-name {
        flex: 1;
        position: relative;
    }
    .delete-watcher {
        cursor: pointer;
        fill: currentColor;
        opacity: 0;
        position: absolute;
        right: .5rem;
        top: 0;
        transition: all .2s ease-in;
        &:hover {
            fill: $red;
            transition: color .3s ease-in;
        }
    }
}