@import 'colors.scss';
@import 'variables.scss';


.card-wrapper{
    /* display: flex;
    flex-flow:row wrap; */
    margin: 0 0.75rem 0.75rem 0.75rem;
    //margin:1rem;
}

//Move to icons scss
.icon_blue_plus{
    background-repeat:no-repeat;
    background-image:url('../images/Icons/add_default.svg');
}

.icon_blue_minus{
    background-repeat:no-repeat;
    background-image:url('../images/Icons/remove_default.svg');
}


.card-user-container
{
    @include border-radius(2px);
    background-color:$col_white;
    @include shadow-medium;
    //min-width:11rem;
    padding:1rem 1rem 0.75rem;
    margin:0 1rem 1rem 0;
    box-sizing: border-box;
    text-align: center;
    border:solid 1px transparent;

    h4{
        font-size:14px;
        font-weight: 600;
        color:$col_gray_4;
        margin:0;
        padding:0;
        @include text-ellipsis;
    }
    p{
        font-size:12px;
        color:$col_gray_6;
        margin:0;
        padding:0;
        overflow:hidden;
        text-overflow: ellipsis;
        @include text-ellipsis;
        &.link{
            color:$col_trimble_blue_light;
        }
    }
    .card-user-footer{
        margin-top:0.75rem;
        text-align: left;
        display: flex;
        flex-flow:row nowrap;
        justify-content: space-between;
        align-items:center;
        margin-right:-10px;
    }
    &:hover,&.active,&.selected{
        cursor:pointer;
        border:solid 1px $col_trimble_blue_light;
        h4,p{
            color:$col_trimble_blue_mid;
        }
    }
}

.avatar-wrapper{
    display: flex;
    flex-flow:column nowrap;
    align-items: center;
}


.list{
    display: inherit;
    .card-user-container
    {
        display: flex;
        flex-flow:row nowrap;
        align-items:center;
        box-shadow: none;
        border-bottom:solid 1px $col_gray_0;
        @include border-radius(0);
        max-width:inherit;
        padding:0;
        box-sizing: border-box;
        text-align:inherit;
        margin:0;
        padding-left:1rem;
        padding-right:1rem;
        min-height: 3.75rem;
        > div{
            display: flex;
            flex-flow: row nowrap;
			flex-grow: 1;
            flex-basis: 0;
            align-items: center;
			padding: 1rem;
			word-break: break-word;
			min-width: 20px;
            width: 100px;
            &.avatar-wrapper{
                max-width: 100px;
                padding:0;
            }
        }
        h4{
            font-size:14px;
            font-weight: 600;
            color:$col_gray_4;
            margin:0;
            padding:0;
        }
        p{
            font-size:12px;
            color:$col_gray_6;
            margin:0;
            padding:0;
        }
        .card-user-footer{
            margin-top:0;
            padding:0;
            justify-content: flex-end;
        }
        &:hover {
			background-color: $col_trimble_blue_light;
			cursor: pointer;
			h4,p{
                color:$col_white;
            }
            i{
                filter: grayscale(100%) brightness(5);
            }
        }

        .card-user-role{
            display: none;
        }
    }
}

.icon_blue_overflow{
  background-repeat:no-repeat;
  background-image:url('../images/Icons/overflow-menu.svg');
}

.page-header{
  @include page-header;
}

.filter-wrapper{
   margin: 0.75rem;
   select{
       width: 264px;
   }
}