@use "../utilities" as *;

/* START: Team CSS */
.tj-team-section-two {
	background-color: var(--tj-color-theme-bg);
	overflow: hidden;
	.sec-heading {
		max-width: 585px;
		width: 100%;
		margin-inline-start: auto;
		margin-inline-end: auto;
		.sub-title {
			background-color: var(--tj-color-common-white);
		}
	}
}
.team-item {
	&.style-2 {
		min-height: auto;
		&::before {
			display: none;
		}
		.team-images {
			overflow: hidden;
			position: relative;
			&::before {
				position: absolute;
				content: "";
				width: 100%;
				height: 100%;
				top: 0;
				inset-inline-start: 0;
				background: linear-gradient(
					180deg,
					rgba(5, 18, 41, 0) 0%,
					var(--tj-color-theme-dark) 84%
				);
				z-index: 1;
				opacity: 0;
			}
		}
		.team-content {
			position: unset;
			padding: 15px 0 0 0;
			background-color: var(--tj-color-theme-bg);
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			.team-text {
				width: calc(100% - 50px);
				.title {
					color: var(--tj-color-heading-primary);
					a {
						&:hover {
							color: var(--tj-color-theme-primary);
						}
					}
				}
				.sub-title {
					color: var(--tj-color-common-black-2);
				}
			}
		}
		.team-share {
			position: absolute;
			bottom: 50%;
			inset-inline-end: -30px;
			background-color: var(--tj-color-theme-bg);
			border-top-left-radius: 24px;
			border-bottom-left-radius: 24px;
			padding: 12px 0 12px 12px;
			opacity: 0;
			visibility: hidden;
			transform: translateY(50%);
			z-index: 2;
			@include transition(all 0.4s ease-in-out 0s);
			ul {
				gap: 9px;
				li {
					a {
						width: 28px;
						height: 28px;
						font-size: 16px;
						color: var(--tj-color-theme-bg);
						background: rgba(5, 18, 41, 0.4);
						i {
							color: var(--tj-color-theme-bg);
						}
						&:hover {
							color: var(--tj-color-common-white);
							background-color: var(--tj-color-theme-primary);
							i {
								color: var(--tj-color-common-white);
							}
						}
					}
				}
			}
		}

		&:hover {
			.team-share {
				opacity: 1;
				visibility: visible;
				inset-inline-end: 0;
			}
			.team-images {
				&::before {
					opacity: 1;
				}
				img {
					transform: scale(1);
				}
			}
		}
		@media #{$md, $sm, $xs} {
			min-height: auto;
		}
	}

	.team-btn {
		background-color: var(--tj-color-common-white);
		color: var(--tj-color-heading-primary);
		font-size: 18px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		i {
			transform: rotate(-45deg);
			transition: all 0.3s ease-in-out;
		}
		&:hover {
			background-color: var(--tj-color-theme-primary);
			color: var(--tj-color-common-white);
			i {
				transform: rotate(0);
			}
		}
	}
}
/* !END: Team CSS */