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

.content-area{
    margin:0.75rem;
}

@mixin card-wrapper{   
    margin: 0 0.75rem 0.75rem 0.75rem;    
}

//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');
}

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

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

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

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

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

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


/* padding:1rem 1rem 0.75rem; */


.tile{
    .table{
        display: none;
    }
    .profile-card-container
    {
        @include card;
        @include card-padding; 
        @include card-states; 
        text-align: center;
        > div{
            &.name{
                display: none;
            }
        }    
        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;        
            @include text-ellipsis;
            &.link{
                color:$col_trimble_blue_light;
            }            
        }
        .profile-card-footer{
            margin-top:0.75rem;
            text-align: left;
            @include flex-row-distribute;        
            margin-right:-10px;
        }
    }
}

.avatar-wrapper{
    @include flex-column-center;
}


.list{
    display: inherit;
    @include card-wrapper;
    
    .profile-card-container
    {
        @include flex-row-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{
            @include flex-row-center;            
			flex-grow: 1;
            flex-basis: 0;            
			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_8;
            margin:0;
            padding:0;
        }
        p{
            font-size:12px;
            color:$col_gray_8;
            margin:0;
            padding:0;
        }
        .profile-card-footer{
            margin-top:0;
            padding:0;
            justify-content: flex-end;
            flex-grow:0;
        }
        &:hover {
			background-color: $col_trimble_blue_light;
			cursor: pointer;
			h4,p{
                color:$col_white;
            }
            i{
                filter: grayscale(100%) brightness(5);
            }
        }

        .profile-card-role{
            display: none;
        }
        &.thead{
            background-color: $table-head-background;
            font-weight:600;
            > div{
                .data{
                    @include text-ellipsis;				
                    font-size: $font-size-regular;
                }
                &:last-child{
                    flex: 0;
                }
            }
        }
    }
}



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

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


@media only screen and (min-width: 993px) and (max-width:1024px){
    .profile{
        &.tile{
            .col{
                &.l2{
                    width: 25%;
                    margin-left: auto;
                    left: auto;
                    right: auto;
                }
            }
        }        
    }
}