//------------------------------------------------------------------------------
// @object: Avatar
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.0.2
// @description
//
//------------------------------------------------------------------------------

//
// @settings

// Layout Variables
$avatar-width: 60% !default;
$avatar-border-radius: 50% !default;
$avatar-online-top: 10% !default;
$avatar-attribute-size: strip-units($sp1) !default;
$avatar-border-size: 2px !default;
$avatar-border-type: solid !default;
$avatar-small-size: $default-icon-lg !default;


// Theme Variables
$avatar-border-color: $white !default;
$avatar-online-color: $lime !default;
$avatar-good-color: $default-success-color !default;
$avatar-bad-color: $default-error-color !default;
$avatar-good-color-hover: $default-success-light-color !default;
$avatar-bad-color-hover: $default-error-light-color !default;


//
// @scss
.o-avatar {
	vertical-align: middle;
	border: $avatar-border-size $avatar-border-type $avatar-border-color;
	border-radius: $avatar-border-radius;

	&-wrap {
		position: relative;
		width: $avatar-width;
		margin: 0 auto;
	}

	&-online {
		background-color: $avatar-online-color;
		border: $avatar-border-size $avatar-border-type $avatar-border-color;
		border-radius: $avatar-border-radius;
		position: absolute;
		z-index: 101;
		top: $avatar-online-top;
		right: 0;
		float: left;
		padding: ($avatar-attribute-size * 1%);
	}

	&-small {
		display: inline-flex;
		width: $avatar-small-size;
		height: $avatar-small-size;
	}

	&-rate-icon {
		margin-right: 0;
	}

	&-rate-good,
	&-rate-bad {
		border: $avatar-border-size $avatar-border-type $avatar-border-color;
		border-radius: $avatar-border-radius;
		color: $avatar-border-color;
		position: absolute;
		z-index: 101;
		bottom: 0;
		float: left;
		padding: $sp1;
	}

	&-rate-good {
		background-color: $avatar-good-color;

		&:hover,
		&:focus {
			background-color: $avatar-good-color-hover;
			color: $white;
			transition: 0.5s;
		}
	}

	&-rate-bad {
		background-color: $avatar-bad-color;
		right: 0;

		&:hover,
		&:focus {
			background-color: $avatar-bad-color-hover;
			color: $white;
			transition: 0.5s;
		}
	}
}