/* WIDGET: TEAM MEMBER
-------------------------------------------- */

.vlt-team-member {

	&__avatar {
		position: relative;
		overflow: hidden;
		border-radius: var(--vlt-border-radius-lg);
		z-index: 0; // fix rounded

		img {
			width: 100%;
			transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing);
			backface-visibility: hidden;
			will-change: transform;
		}

	}

	&__socials {
		position: absolute;
		top: px2rem(15px);
		right: px2rem(15px);
		display: flex;
		padding: px2rem(16px);
		color: var(--vlt-color-white);
		flex-direction: column;
		background-color: var(--vlt-accent-1);
		border-radius: calc(var(--vlt-border-radius-lg) / 2);
		opacity: 0;
		transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing), opacity var(--vlt-transition-duration) var(--vlt-transition-easing);
		transform: translateX(100%);
		will-change: transform, opacity;

		.vlt-social-icon + .vlt-social-icon {
			margin-top: px2rem(16px);
			margin-left: 0;
		}

		i {
			width: 1.1em;
		}

	}

	&__content {
		padding: px2rem(32px) 0 0;
	}

	&__function {
		margin: px2rem(10px) 0 0;
		color: var(--vlt-color-gray-dark);
		@include vlt_primary_regular_15;
	}

	&:hover {

		.vlt-team-member__avatar img {
			@extend %vlt_animate_image;
		}

		.vlt-team-member__socials {
			opacity: 1;
			transform: translateX(0);
		}

	}

}