@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 {
        @extend %light;
        color: $grayer;
        margin-left: .5rem;
    }
}

.assigned-to-list {
    @include user-list;
    margin-top: 1rem;
    .user-list-single {
        &:hover,
        &.selected {
            background: lighten($primary, 58%);
            cursor: pointer;
        }
        &:hover {
            transition: background .3s linear;
            transition-delay: .2s;
        }
        &.is-active {
            background: lighten($primary, 55%);
            cursor: pointer;
            margin-bottom: 1rem;
            position: relative;
            transition: background .3s linear;
            transition-delay: .1s;
            .icon-delete {
                opacity: 1;
                position: absolute;
                right: 1rem;
                top: 1.5rem;
                transition: opacity .2s ease-in;
            }
        }
    }
}

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