/**
 * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
 * project:	ets2-dashboard-skin
 * file: 	_tab-about.scss
 * Date: 	27/04/2020
 * Time: 	13:48
 */

@import "../common/variables";


.tab-about {
	text-align: center;
	@include prefixer(display, flex, ("webkit", "moz", "o"));
	@include prefixer(justify-content, center, ("webkit", "moz", "o"));
	@include prefixer(align-items, center, ("webkit", "moz", "o"));
	
	> aside {
		@include prefixer(display, flex, ("webkit", "moz", "o"));
		@include prefixer(justify-content, space-between, ("webkit", "moz", "o"));
		@include prefixer(align-items, center, ("webkit", "moz", "o"));
		padding: .5rem;
		background: transparentize($cRed, 0.8);
		border: 1px solid $cRed;
		border-radius: .5rem;
		margin: 0 .5rem;
		height: 100%;
		width: 100%;
		
		.card-content {
			z-index: 1;
			padding: 1rem 0;
			
			h2 {
				margin: 0 0 .5rem;
				font-weight: 600;
				font-size: 1.5rem;
				
				small {
					display: inline-block;
					font-size: 1rem;
					
					&.badge-author {
						font-size: .8rem;
						font-weight: normal;
					}
				}
			}
		}
		
		.icons {
			margin-top: 1.5rem;
			@include prefixer(display, flex, ("webkit", "moz", "o"));
			@include prefixer(justify-content, center, ("webkit", "moz", "o"));
			
			a {
				color: #ffffff;
				text-align: center;
				border: 1px solid #fff;
				width: 1.8rem;
				height: 1.8rem;
				font-size: 1rem;
				border-radius: 50%;
				margin: 0 .5rem;
				
				@include prefixer(display, flex, ("webkit", "moz", "o"));
				@include prefixer(justify-content, center, ("webkit", "moz", "o"));
				@include prefixer(align-items, center, ("webkit", "moz", "o"));
			}
		}
		
		&.author {
			font-family: 'Open Sans', Arial, sans-serif;
			color: $cWhite;
			border: none;
			position: relative;
			overflow: hidden;
			padding: 1rem;
			
			@include prefixer(display, flex, ("webkit", "moz", "o"));
			@include prefixer(justify-content, center, ("webkit", "moz", "o"));
			
			img.background {
				position: absolute;
				opacity: 0.9;
				filter: blur(5px);
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%) scale(2.5);
				z-index: 0;
				width: 100vw;
				height: 100vh;
				
				@include prefixer(object-fit, cover, ("webkit", "moz", "o"));
			}
			
			img.profile {
				border-radius: 50%;
				width: 75px;
				min-height: 75px;
				height: auto;
				opacity: 1;
				box-shadow: 3px 3px 20px $cBlackTransparentHigh;
				border: 2px solid $cWhiteGray;
				z-index: 1;
			}
		}
		
		&.project {
			font-family: 'Open Sans', Arial, sans-serif;
			color: $cWhite;
			border: none;
			position: relative;
			overflow: hidden;
			height: auto;
			padding: 1rem;
			background: $cBlackTransparentHigh;
			
			@include prefixer(display, flex, ("webkit", "moz", "o"));
			@include prefixer(justify-content, center, ("webkit", "moz", "o"));
			
			.card-content {
				height: 100%;
				@include prefixer(display, flex, ("webkit", "moz", "o"));
				@include prefixer(justify-content, center, ("webkit", "moz", "o"));
				@include prefixer(align-items, center, ("webkit", "moz", "o"));
			}
			
			.icons a {
				color: $cRed;
				border-color: $cRed;
			}
		}
		
		.aside-wrapper {
			@include prefixer(display, flex, ("webkit", "moz", "o"));
			@include prefixer(justify-content, center, ("webkit", "moz", "o"));
			@include prefixer(align-items, flex-start, ("webkit", "moz", "o"));
			@include prefixer(flex-direction, column, ("webkit", "moz", "o"));
			margin: 0 .75rem 0 1rem;
			
			.urls {
				margin-top: .5rem;
				
				a {
					padding: 0rem .5rem;
					font-size: 0.8rem;
				}
				
				a:first-child {
					margin-left: 0 !important;
				}
				
				a:last-child {
					margin-right: 0 !important;
				}
			}
		}
		
		&.author {
			img {
				width: 5rem;
				border-radius: 100% 100% 100% 100%;
				overflow: hidden;
			}
		}
	}
}