@mixin import-project-selector {
    @include centered;
    max-width: 800px;
    .import-project-selector {

        &-service {
            img {
                display: block;
                margin: 1rem auto;
                width: 4rem;
            }
        }

        &-filter {
            align-items: center;
            background: $whitish;
            display: flex;
            padding: .5rem;

            input {
                background: $mass-white;
                border: 0;
                flex: 1;
                padding: .5rem;
            }

            svg {
                @include svg-size(1rem);
                fill: $gray;
                margin: 0 1rem;
            }
        }

        &-title {
            border-bottom: 1px solid $whitish;
            padding: 1rem;

            &:hover {
                background: rgba($primary, .1);
                cursor: pointer;
            }
        }
    }
}
@mixin import-members {
    @include centered;
    max-width: 800px;
    .avatar {
        width: 48px;
    }
    &-title {
        @include font-size(normal);
        @include font-type(bold);
        margin-bottom: 0;
    }

    &-system {
        display: flex;
        justify-content: space-between;
        margin: 1rem 0 0;
        padding: .5rem 0;

        img {
            width: 100%;
        }
    }

    &-logo {
        max-height: 3rem;
        max-width: 3rem;
    }

    &-row {
        align-items: center;
        border-bottom: 1px solid $whitish;
        border-top: 1px solid $whitish;
        display: flex;
        justify-content: space-between;
        padding: .5rem 0;

        &:hover {
            .import-project-members-delete {
                opacity: 1;
                transition: all .2s ease-in;
            }
        }
    }

    &-single {
        align-items: center;
        display: flex;
    }

    &-username {
        margin-left: 1rem;
    }

    .avatar {
        &.empty {
            background-color: $whitish;
            line-height: 3rem;
            text-align: center;
            width: 3rem;
        }
    }

    &-actions {
        align-items: center;
        display: flex;
    }
    &-delete {
        background: transparent;
        opacity: 0;
        padding: .25rem .5rem;
        svg {
            @include svg-size(.75rem);
            fill: $red;
        }
    }
    &-match {
        color: $gray-light;
        button {
            background: $white;
            border-radius: 50%;
            padding: .25rem .5rem;
            svg {
                @include svg-size(.75rem);
            }
        }
        &-true {
            border: 1px solid $primary;
            margin: 0 .1rem 0 .25rem;
            transition: background .2s;
            &:hover {
                background: rgba($primary-light, .3);
            }
            svg {
                fill: $primary;
            }
        }
        &-false {
            border: 1px solid $red;
            margin: 0 .25rem 0 .1rem;
            transition: background .2s;
            &:hover {
                background: rgba($red, .3);
            }
            svg {
                fill: $red;
            }
        }
    }

    &-choose {
        color: $primary;
        padding-right: 0;
        text-transform: lowercase;
        &:hover {
            color: $primary-light;
        }
    }

    &-selected {
        align-items: center;
        display: flex;

        &-img {
            margin-left: .5rem;
            max-width: 3rem;
        }

        img {
            width: 100%;
        }
    }

    &-submit {
        display: block;
        margin: 2rem auto 0;
        padding: .75rem 4rem;
    }
}
