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


@mixin user-details {
    margin: 0;
    font-size: $font-size-small;
    padding: 1.25rem;
    box-sizing: border-box;
    background: $col_white;
    border-left: 1px solid $col_gray_3;
        > section {
            margin: 1rem 0 2rem 0;
            h2{
                @include text-center;
                margin-top: 0;
                color: $col_gray_6;
                margin-bottom: 0.5rem;
                @include text-ellipsis;
                font-weight: 400;
                &.name{
                    font-size: $font-header;
                    color: $col_gray_8; 
                } 
            }
            .section-title {
                height: 2.5rem;
                line-height: 2.5rem;
                @include flex-row-distribute;
               label{
                    color: $col_gray_6;
               }
               button{
                   display: flex;
               }
            }
            ul{
                li.list-item{
                    display: flex;
                    margin-bottom: 0.75rem;
                    &:last-child{
                        margin-bottom: 0;
                    }
                    span.value {
                        flex: 1;
                        @include text-ellipsis;
                        @include text-right;
                        &.role{
                            color: $col_trimble_blue_mid;
                        }
                    }
                    label.field{
                        flex: 1;
                        color: $col_gray_6;
                    }
                }
                li.list-item-image{
                    background: $col_gray_half;
                    height: 50px;
                    margin-bottom: 0.75rem;
                    @include flex-row-center;
                    padding: 0 15px;
                    .app-icon{
                        width: 2.5rem;
                        height: 2.5rem;
                        border: 2px solid $col_gray_1;
                        @include border-circle;
                        flex: 0 2.5rem;
                        img{
                            width: auto;
                            height: 100%;
                            @include border-circle;
                        }
                    }
                    .app-details{
                        @include flex-column;
                        margin-left: 1rem;
                        color: $col_gray_6;
                        min-width: 0;
                        .name{
                        font-size: $font-size-regular;
                        font-weight: $font-weight-bold;
                        color: $default-font-color;
                        @include text-ellipsis;                        
                        }
                    }
                    .app-status{
                        margin-left: auto;
                    }
                }
            }
            
        }
}

.info-panel {
    @include user-details;
}