/**
* @project: Console Art Cybernetic - https://cacybernetic.github.io
* @fileoverview: Console Art Cybernetic collaborators stylesheet.
* @author: Obrymec - obrymecsprinces@gmail.com
* @supported: DESKTOP, MOBILE
* @file: collaborators.scss
* @created: 2023-06-24
* @updated: 2023-09-28
* @version: 0.0.2
*/

// Custom dependencies.
@import "./_placeholders.scss";
@import "./_variables.scss";

// Collaborator section.
div.collaborator {
	@extend %collaborators-row-flexbox;
	display: none;
	gap: 24px;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		flex-direction: column;
		gap: 16px;
	}
	// Border radius for identity.
	div.cobs-border-radius {
		border-bottom-right-radius: 60px;
	}
}

// Collaborators section.
section.collaborators {
	background-color: $collaborators-bg-color;
	@extend %collaborators-column-flexbox;
	color: $collaborators-text-color;
	transform: translate3d(0, 0, 0);
	padding: 96px 5.6%;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		padding: 96px 16px;
	}
	// Header title
	div.cobs-header-title {
		color: $collaborators-text-color;
    letter-spacing: -1px;
		margin-bottom: 48px;
    line-height: 48px;
		margin-left: -2px;
    font-weight: 600;
		font-size: 40px;
		// From 1170 to 0.
		@media #{$collaborators-1170} {
			font-size: 30px;
		}
	}
	// Body.
	div.cobs-body {
		margin-bottom: 50px;
		margin-left: 16px;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			margin-bottom: 24px;
			margin-left: 0;
		}
		// Display enabled.
		div.cobs-display {
			display: flex;
		}
	}
	// Opacity disabled.
	div.cobs-opacity {
		opacity: 0;
	}
}

// Industry.
div.cobs-about {
	@extend %collaborators-row-flexbox;
	margin-top: 26px;
	font-size: 14px;
	gap: 24px;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		flex-direction: column;
		gap: 15px;
	}
	// Logo.
	div:first-child {
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			width: 50%;
		}
	}
	// Name & role container.
	div:last-child {
		line-height: 20px;
		width: 100%;
	}
	// Customer name.
	div:last-child > span {
		font-weight: 600;
	}
}

// Controls section.
div.cobs-controls {
	@extend %collaborators-column-flexbox;
	align-items: center;
	position: fixed;
	left: 1.8%;
	gap: 15px;
	top: 38%;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		flex-direction: row;
		position: relative;
		left: 0;
		top: 0;
		gap: 0;
	}
	// Top arrow.
	img:nth-child(1) {
		transform: rotate(-90deg);
		filter: brightness(0);
		display: inline-block;
		cursor: pointer;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			transform: rotate(-180deg);
			margin-right: 7px;
		}
	}
	// Customers.
	div {
		background-color: $collaborators-controls-item-bg-color;
    border-radius: 24px;
    cursor: pointer;
    margin: 0 8px;
    height: 10px;
    width: 10px;
	}
	// Selected node.
	div.cobs-selected-node {
		box-shadow: 0 0 0 3px $collaborators-text-color;
		background-color: transparent;
	}
	// Bottom arrow.
	img:nth-child(7) {
		transform: rotate(90deg);
		display: inline-block;
		filter: brightness(0);
		cursor: pointer;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			transform: rotate(0deg);
			margin-left: 7px;
		}
	}
}

// Identity section.
div.cobs-identity {
	border: 1px solid $collaborators-card-border-color;
	background-color: $collaborators-card-bg-color;
	@extend %collaborators-row-flexbox;
	border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
	width: 100%;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		flex-direction: column;
	}
	// Profile container.
	div.cobs-profile {
		position: relative;
		min-width: 230px;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			max-width: 230px;
			height: auto;
		}
	}
	// Profile image.
	div.cobs-profile > img {
		box-shadow: 0 16px 50px -24px $collaborators-controls-item-bg-color;
		border-bottom-right-radius: 66px;
		position: absolute;
		width: 220px;
		left: -16px;
		top: -16px;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			position: relative;
			margin-left: 16px;
			margin-top: 20px;
			left: 0;
			top: 0;
		}
	}
	// Profile box.
	div.cobs-profile::after {
		border-right: 1px solid $collaborators-img-color-effect;
		border-top: 1px solid $collaborators-img-color-effect;
		border-radius: 0 4px;
		position: absolute;
		display: block;
		height: 110px;
		width: 110px;
		content: '';
		right: 21px;
		top: -21px;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			right: -12px;
			top: 15px;
		}
	}
}

// Statistics section.
div.cobs-statistics {
	@extend %collaborators-column-flexbox;
	width: 36%;
	gap: 20px;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		width: auto;
	}
	// Percentage.
	div:last-child {
		border-bottom-right-radius: 60px;
	}
	// Credits and percentage.
	div:first-child,
	div:last-child {
		border: 1px solid $collaborators-card-border-color;
		background-color: $collaborators-card-bg-color;
    @extend %collaborators-column-flexbox;
    justify-content: center;
    padding: 18px 32px;
		height: 100%;
		// From 1030 to 0.
		@media #{$collaborators-1030} {
			padding: 26px 16px;
		}
		// Label.
		span {
			color: $collaborators-btn-text-color;
			letter-spacing: -1.4px;
			line-height: 60px;
			font-weight: 600;
			font-size: 50px;
		}
		// Comment.
		p {
			letter-spacing: -.8px;
			line-height: 32px;
			font-weight: 400;
			font-size: 24px;
		}
	}
	// Labels.
	div:first-child > span,
	div:last-child > span {
		// From 1170 to 0.
		@media #{$collaborators-1170} {
			font-size: 40px;
		}
	}
	// Comments.
	div:first-child > p,
	div:last-child > p {
		// From 1170 to 0.
		@media #{$collaborators-1170} {
			font-size: 20px;
		}
	}
}

// Infos container.
div.cobs-infos {
	@extend %collaborators-column-flexbox;
	padding: 48px 32px 48px 0;
	row-gap: 13px;
	// From 1030 to 0.
	@media #{$collaborators-1030} {
		padding: 16px 16px 48px 16px;
	}
	// Move right arrow.
	&:hover > button.cobs-read-more > img {
		transform: translate(6px, 1px);
	}
	// Underline the text.
	&:hover > button.cobs-read-more > span {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	// Description.
	blockquote.cobs-description {
    font-style: italic;
    line-height: 38px;
		font-size: 22.5px;
    font-weight: 400;
		cursor: pointer;
		// From 1170 to 0.
		@media #{$collaborators-1170} {
			line-height: 32px;
			font-size: 20px;
		}
	}
	// Button for read more.
	button.cobs-read-more {
		// Right arrow.
		img {
			transform: translate(0, 1px);
		}
		// Text.
		span {		
			color: $collaborators-btn-text-color;
			line-height: 38px;
			font-size: 23px;
		}
	}
}
