/*------------------------------------------------------------------

  User Profile

-------------------------------------------------------------------*/
.youplay-user {
	.angled-img {
		display: inline-block;
		vertical-align: top;
		width: 150px;

		.img > img {
			opacity: 1;
		}
		&:hover .img > img {
			opacity: $images_hover_opacity;
		}

		.icon {
			opacity: 0;
		}
		&:hover .icon {
			opacity: 0.8;
		}
	}
	.youplay-banner .info & h2 {
		font-size: 3.5rem;
		margin-bottom: 0.5rem;
		margin-top: 0;
	}

	.user-data {
		position: relative;
		display: inline-block;
		padding: 1.8rem 3rem;
		margin-left: -4px;
		height: 151px;

		// background
		&:after {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
    		background: rgba($back_darken_color, 0.4);
    		-webkit-transform: skew(-$skew_size);
    		transform: skew(-$skew_size);
    		z-index: 1;
		}
		> * {
			position: relative;
			z-index: 2;
		}

		// location
		.location {
			font-size: 1rem;
			color: $text_mute_color;
		}
		
		// activity
		.activity {
			margin-top: 1.3rem;

			> div {
				display: inline-block;
				text-align: center;

				+ div {
					margin-left: 3rem;
				}

				.title {
					font-size: 1rem;
					color: $text_mute_color;
				}

				.num {
					font-size: 2.5rem;
					line-height: 1.2;
				}
			}
		}
	}
}

/* User Profile Navigation */
.youplay-user-navigation {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			position: relative;
			display: block;
			float: left;
			z-index: 1;

			> a {
				position: relative;
				display: block;
				font-size: 1.6rem;
				padding: 1.25rem 1.8rem;
				color: $text_color;
				text-decoration: none;
				border-radius: 0;
				background: none;
				border: none;

				&:after {
					content: '';
					position: absolute;
					top: 0; left: 0; right: 0; bottom: 0;
					background-color: transparent;
					-webkit-transform: skew(-$skew_size);
					transform: skew(-$skew_size);
					-webkit-transition: .3s background-color;
					transition: .3s background-color;
					z-index: -1;
				}

				@media #{$media-xs} {
					font-size: 1.4rem;
					padding: 1rem 1.5rem;
				}
			}
			
			&.active > a,
			&:focus > a,
			&:hover > a {
				&:after {
					background-color: rgba($text_color, 0.1);
				}
			}
			&.active > a:after {
				background: rgba($text_color, 0.1);
				background-color: $back_darken_color;
			}
		}
	}

	// additional padding for info block
	+ .info {
		padding-bottom: 50px;
	}
}


/* User Messages */
.youplay-messages {
	tbody > tr > td {
		padding: 1.5rem;
	}
	tbody > tr {
		-webkit-transition: .3s background-color;
		transition: .3s background-color;
	}

	.message-unread {
		background-color: rgba($text_color, 0.1);
	}

	.message-from {
		width: 300px;
		.angled-img {
			width: 80px;
			float: left;
			margin-right: 20px;
		}
		.angled-img img {
			width: auto;
			opacity: 1;
		}
		.message-from-name {
			text-decoration: none;
			font-size: 1.6rem;
		}
	}
	.message-description {
		.message-description-name {
			font-weight: bold;
			text-decoration: none;
			font-size: 1.6rem;
		}
		.message-excerpt {
			font-size: 1.2rem;
			margin-top: 0.5rem;
		}
	}
	.message-action {
		position: relative;
		width: 90px;

		.messages-count {
			position: absolute;
			text-align: center;
    		background-color: rgba($text_color, 0.1);
    		border-radius: 4px;
    		font-weight: bold;
			min-width: 30px;
			padding-left: 5px;
			padding-right: 5px;
			height: 30px;
			line-height: 30px;
			left: 50%;
			top: 50%;
			margin-top: -15px;
			margin-left: -15px;
		}
		.message-delete {
			float: right;
			opacity: 0;
			-webkit-transition: .3s opacity, .3s color;
			transition: .3s opacity, .3s color;
		}
	}
	tbody > tr:hover .message-action .message-delete {
		opacity: 1;
	}
}