/*
Avatar

Avatar styles from trimble css

Markup:
Avatar:
<div class="avatar">
	<!-- <img src="" alt=""> -->
	<i class="i64 icon_solid_user"></i>
	<div class="edit-avatar">
		<i class="i16 icon_line_edit"></i>
	</div>
</div>

Styleguide UI Elements.avatar
*/

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


//Panel
@mixin avatar{
    position:relative;
    @include border-circle;
    border:solid 1px $col_gray_7;
    background-color:$col_gray_light;
    width:7rem;
    height:7rem;
    @include vertical-center;
    img{
        @include border-circle;
        width:auto;
        height:100%;
        &#avatar-output {
          display: none;
        }
    }
    .edit-avatar{
        position: absolute;
        bottom:8px;
        right:3px;
        @include border-circle;
        background-color:$col_trimble_blue_light;
        width:1.5rem;
        height:1.5rem;
        @include vertical-center;
        cursor:pointer;
        input {
          display: none;
        }
    }
}

@mixin avatar-small{
    @include avatar;
    border:none;
    width:1.75rem;
    height:1.75rem;
    margin-bottom:0;
    overflow:hidden;
}

@mixin avatar-medium{
    @include avatar;
    border:none;
    width:2.25rem;
    height:2.25rem;
    margin-bottom:0;
    overflow:hidden;
}

@mixin avatar-list{
    @include avatar;
    border:none;
    width:2.5rem;
    height:2.5rem;
    margin-bottom:0;
    overflow:hidden;
}

.avatar{
    @include avatar;
}

.avatar-small{
    @include avatar-small;
}

.avatar-medium{
    @include avatar-medium;
}

//Card
.card-avatar{
    @include avatar;
    border:solid 5px $col_gray_1;
    width:7.5rem;
    height:7.5rem;
    margin-bottom:1rem;
    overflow:hidden;
    box-sizing: border-box;
}


//List/Table
.list{
    .card-avatar{
        @include avatar-small;
    }
}