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

.content-area{
    margin:0.75rem;
}

.tile{
    width: 250px;
    .table{
        display: none;
    }
}

.main-wrapper {
    padding:1rem 1rem 0.75rem;
    margin:0;
    box-sizing: border-box;
    text-align: center;
    border:solid 1px transparent;  
    border-bottom: 1px solid $col_gray_0;
    @include flex-row;
    .icon {
        width: 1.5rem;
    }
    .thumbnail{
        width: 4rem;
        margin-left: 1rem;        
        img{
            width: auto;
            height: auto;
            max-width: 4rem;
            max-height: 4rem;
        }
    }
    .data-group{
        @include flex-column;
        align-items: flex-start;
        overflow: hidden;
        margin-left: 1rem;
        > div{
            width: 100%;
            @include text-left;
            margin-bottom: 0.1875rem;
        }
    }
    p{
        font-size: $font-size-small;
        color: $col_gray_6;
        margin:0;
        padding:0;        
        @include text-ellipsis;
        &.link{
            color:$col_trimble_blue_light;
        }
    }
    &:hover,&.active,&.selected {
        cursor:pointer;
    }
}

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

.list{
    display: inherit;
    .icon {
        width: 3.75rem;
        padding-bottom: 0 !important; 
    }
    .main-wrapper
    {
        @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;
        min-height: 3.75rem;
        background: none;
        .data-group{
             @include flex-row;
             overflow: hidden;
             margin-left: 0;
             flex: 1;
                > div{
                @include flex-row;                  
                flex-grow: 1;
                flex-basis: 0;            
                padding: 1rem;
                word-break: break-word;
                min-width: 1.25rem;
                width: 6.25rem;
                margin-bottom: 0;
                &.avatar-wrapper{
                    max-width: 6.25rem;
                    padding:1rem;
                }
            }
        }
        .data{
            @include flex-row;
            padding: 1rem;
            word-break: break-word;
            min-width: 1.25rem;
            flex-shrink: 0;            
            &.avatar-wrapper{
                max-width: 6.25rem;
                padding:0 1rem;
            }
        }
        
        .thumbnail{
            width: auto;
            margin: 0 !important;
            align-items: center;        
            img{
                width: auto;
                height: auto;
                max-width: 1.8125rem;
                max-height: 1.375rem;
            }
        }
        p{
            color:$col_gray_8;
        }
        &:hover {
			background-color: $col_trimble_blue_light;
			cursor: pointer;
			p{
                color:$col_white;
            }
            i{
                filter: grayscale(100%) brightness(5);
            }
        }

    }
}