@import 'calypso/assets/stylesheets/shared/mixins/breakpoints';
@import '@automattic/components/src/styles/typography';

.is-section-reader {
	.user-profile {
		position: relative;

		&__404.empty-content {
			max-width: initial;
			margin: initial;
			padding-top: 150px;
		}

		div.user-profile__wrapper {
			.back-button {
				@media ( max-width: 1300px ) {
					padding: 24px 24px 0;
				}

				@media ( max-width: 600px ) {
					padding: 24px 0 0;
				}
			}

			&-content {
				padding-top: 24px;
				max-width: 768px;
				margin: 0 auto;

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

				main.main.is-user-profile {
					padding: 0;
					border-block-end: none;
				}
			}
		}

		&__lists-body {
			max-width: 768px;
			margin: 0 auto;

			&-link {
				color: var( --color-neutral-100 );
				cursor: pointer;
				display: block;
				line-height: 29px;
				text-wrap: pretty;
				text-decoration: none;

				.reader-post-card__title {
					margin-top: 0;
					font-size: 1.25rem;
					font-weight: 600;
				}
			}
		}
	}
}

// Recommended Blogs Section Styles
.user-profile__recommended-blogs-list {
	margin: 0;

	.user-profile__recommended-blog-item {
		display: flex;
		align-items: flex-start;
		border-radius: 8px;
		border: 1px solid var( --color-border-subtle );
		padding: 20px;
		margin-bottom: 20px;
		position: relative;
		gap: 20px;

		@include breakpoint-deprecated( '<660px' ) {
			border: none;
			border-bottom: 5px solid var( --color-neutral-5 );
			border-radius: 0;
			margin-bottom: 0;
		}

		.user-profile__recommended-blog-site-icon .site-icon {
			border-radius: 50%;
			flex-shrink: 0;
			border: 1px solid var( --color-border-subtle );

			img {
				object-fit: cover;
				/* !rtl:ignore */
				object-position: left center;
				height: 100%;
			}
		}

		.user-profile__recommended-blog-site-info {
			flex: 1 1 auto;
			display: flex;
			align-self: center;
			flex-direction: column;
			justify-content: center;
			min-width: 0;
			a {
				text-decoration: none;
				color: inherit;
				// Margin to not obscure the relative-absolute positioned follow button
				margin-right: 120px;
				@include breakpoint-deprecated( '<660px' ) {
					// reduce margin when follow button has no label
					margin-right: 60px;
				}
			}
		}

		.user-profile__recommended-blog-site-name {
			font-size: $font-size-header-small;
			font-weight: 600;
			margin: 0 0 6px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.user-profile__recommended-blog-site-description {
			margin: 0;
		}

		.user-profile__recommended-blog-subscribe-button {
			position: absolute;
			top: 20px;
			right: 20px;
		}
	}
}
