@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/breakpoints';

.is-section-reader {
	.user-profile-header {
		max-width: 768px;
		margin: 0 auto;
		padding: 0 16px;
		overflow: hidden;

		&::after {
			@include long-content-fade( $size: 16px );
		}

		&__main {
			display: flex;
			padding: 0 0 24px;
			align-items: center;

			@include breakpoint-deprecated( '<660px' ) {
				padding-top: 20px;
			}
		}

		&__avatar {
			margin-right: 24px;
			flex-shrink: 0;
			width: 116px;
			height: 116px;

			img {
				border-radius: 100%;
				width: 100%;
				height: 100%;
			}

			&-mobile {
				width: 72px;
				height: 72px;
				margin-right: 16px;
				display: block;

				@include break-mobile {
					display: none;
				}
			}

			&-desktop {
				display: none;

				@include break-mobile {
					display: block;
					margin-right: 24px;
					width: 116px;
					height: 116px;
				}
			}
		}

		&__details {
			flex: 1;
			min-width: 0;
		}

		&__display-name {
			font-family: 'Noto Serif', Georgia, 'Times New Roman', Times, serif;
			font-size: $font-title-medium;
			font-weight: 600;
			line-height: 1.5;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			text-wrap: nowrap;

			@include break-mobile {
				font-size: $font-title-large;
				margin-bottom: 8px;
				display: block;
			}
		}

		&__bio {
			font-size: $font-body-large;
			color: var( --color-text-subtle );

			@include break-mobile {
				font-size: $font-body;
			}
		}

		&__bio-desc {
			margin: 0;
			position: relative;

			&-text {
				-webkit-line-clamp: 3;
				line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			&-fader {
				position: absolute;
				bottom: 0;
				right: 0;
				background: linear-gradient(to right, transparent 0%, #fff 25%);
				width: 140px;
				height: 20px;
				z-index: z-index("user-profile-header", ".user-profile-header__bio-desc-fader");
			}

			&-link {
				position: absolute;
				bottom: 0;
				right: 0;
				display: inline-flex;
				gap: 4px;
				align-items: center;
				z-index: z-index("user-profile-header", ".user-profile-header__bio-desc-link");
				color: var(--color-text-subtle);
				text-decoration: underline;
			}
		}

		.section-nav {
			box-shadow: none;
			border-bottom: 1px solid var( --color-border-subtle );
			height: auto !important;
		}

		.section-nav-tab__link {
			&:hover {
				background: none;
			}
		}

		.section-nav-tab__text {
			font-weight: 500;
			color: var( --studio-black );
		}

		/* Ensure the fader and read more link follow the same format as the content. AutoDirection will add
		the direction property to the content if it doesn't match the interface's language type. However, it
		will not adjust the fader and link since one doesn't have text content and the other is in the
		interface langauage. This prevents the fader and link from appearing on the correct side of the
		description. */
		.user-profile-header__bio-desc-text[direction="ltr"] ~ .user-profile-header__bio-desc-fader {
			/*!rtl:ignore*/
			right: 0;
			/*!rtl:ignore*/
			left: auto;
			/*!rtl:ignore*/
			background: linear-gradient(to right, transparent 0%, #fff 25%);
		}

		.user-profile-header__bio-desc-text[direction="rtl"] ~ .user-profile-header__bio-desc-fader {
			/*!rtl:ignore*/
			left: 0;
			/*!rtl:ignore*/
			right: auto;
			/*!rtl:ignore*/
			background: linear-gradient(to left, transparent 0%, #fff 25%);
		}

		.user-profile-header__bio-desc-text[direction="ltr"] ~ .user-profile-header__bio-desc-link {
			/*!rtl:ignore*/
			right: 0;
			/*!rtl:ignore*/
			left: auto;
		}

		.user-profile-header__bio-desc-text[direction="rtl"] ~ .user-profile-header__bio-desc-link {
			/*!rtl:ignore*/
			left: 0;
			/*!rtl:ignore*/
			right: auto;
		}
	}
}

