// Styles targeted at story content
@import './content';

// Since we cannot use css variables in media queries, we need to define the valuess in scss.
$reader-full-post-sidebar-width: 220px;
$reader-full-post-story-padding: 24px;
$reader-full-post-story-max-width: 720px;
// 295 for sidebar and 16 for the right frame padding.
$global-sidebar-and-frame-width: 295px + 16px;
$reader-full-post-desktop-min: $reader-full-post-sidebar-width + $reader-full-post-story-max-width +
	( $reader-full-post-story-padding * 2 ) + $global-sidebar-and-frame-width;

// Import minimal styles for Gutenberg Columns block
@import './columns';

.is-group-reader.has-no-sidebar {
	.masterbar {
		@include breakpoint-deprecated( '<660px' ) {
			display: none; // Hides masterbar in fullpost mobile
		}
	}
}

.reader-full-post.main {
	max-width: none;
	// Turns off the implicit positioning context set up by the normal main styles
	// This allows our fixed positioned elements to be positioned relative to the main html document
	backface-visibility: visible;
	perspective: none;
	// Full post horizontal paddings/widths to use for knowing breakpoints.
	--reader-full-post-sidebar-width: #{$reader-full-post-sidebar-width};
	--reader-full-post-story-padding: #{$reader-full-post-story-padding};
	--reader-full-post-story-max-width: #{$reader-full-post-story-max-width};
}

.reader-full-post__content {
	@media ( min-width: $reader-full-post-desktop-min ) {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	max-width: 1200px;
	margin: 0 auto;

	.comment-button__icon path {
		fill: var( --color-neutral-0 );
	}
}

.reader-full-post__visit-site-container {
	align-items: center;
	background: rgba( 255, 255, 255, 0.8 );
	display: flex;
	font-size: $font-body-extra-small;
	font-weight: 600;
	height: 46px;
	justify-content: center;
	margin: 0;
	position: fixed;
	right: 0;
	top: 0;
	text-transform: uppercase;
	width: 46px;
	z-index: z-index(
		'.reader-full-post__sidebar-comment-like',
		'.reader-full-post__visit-site-container'
	);

	@include breakpoint-deprecated( '>660px' ) {
		display: none;
	}

	.external-link .gridicons-external {
		fill: var( --color-neutral-40 );
		top: 0;
	}

	.external-link {
		color: var( --color-neutral-40 );
		display: block;
		height: 18px;
		margin-left: -3px;
		position: relative;
		top: -1px;

		&:hover {
			color: var( --color-accent );

			.gridicons-external {
				fill: var( --color-accent );
			}
		}
	}

	.reader-full-post__visit-site-label {
		@include breakpoint-deprecated( '<660px' ) {
			display: none;
		}
	}
}

.reader-full-post__sidebar {
	width: var( --reader-full-post-sidebar-width );
	text-align: center;
	margin-top: 55px;

	// hide the sidebar when it cannot fit to the side of the content.
	@media ( max-width: $reader-full-post-desktop-min ) {
		display: none;
	}
}

.reader-full-post__seen-button {
	align-items: center;
	box-sizing: border-box;
	color: #646970;
	cursor: pointer;
	display: inline-flex;
	list-style-type: none;
	margin-left: -4px;
	user-select: none;

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

.reader-full-post__story {
	flex: 1;
	max-width: var( --reader-full-post-story-max-width );
	padding: 32px var( --reader-full-post-story-padding );
	margin: 0 auto;
	@media ( min-width: $reader-full-post-desktop-min ) {
		margin: 0;
	}

	@include breakpoint-deprecated( '<480px' ) {
		font-size: $font-body;
		line-height: 24px;
	}
}

.reader-full-post__story-content {
	color: var( --color-neutral-70 );
	font-size: rem( 17px );
	line-height: 28px;

	figure.wp-block-table {
		overflow: auto;
	}
	.has-text-align-center {
		text-align: center;
	}
	.has-text-align-right {
		text-align: right;
	}
	.wp-block-group p:last-child {
		margin-bottom: 24px;
	}
}

.reader-full-post__story-content img {
	&.latex {
		margin-bottom: 0;
	}
}

.reader-full-post__story-content figure img {
	margin-bottom: 0;
}

.reader-full-post .author-compact-profile {
	display: inline-flex;
	flex-direction: column;

	@include breakpoint-deprecated( '<660px' ) {
		margin-bottom: 35px;
		padding-right: 10px;
		position: relative;
		text-overflow: clip;
		white-space: nowrap;

		&::after {
			height: 40px;
		}

		&:not( .is-placeholder )::after {
			@include long-content-fade( $size: 15% );
		}
	}

	.reader-author-link {
		margin-top: 0;
	}

	@include breakpoint-deprecated( '<660px' ) {
		flex-direction: row;
		margin-top: 20px;

		.reader-avatar {
			flex: 1;
			margin: 0 0 0 -9px;

			&.has-site-and-author-icon,
			&.has-site-icon,
			&.has-gravatar {
				margin: 0 10px 5px 0;
			}

			&.has-gravatar {
				.gravatar {
					height: 32px !important;
					width: 32px !important;
					max-width: none;
				}
			}

			&.has-site-and-author-icon.has-site-icon.has-gravatar {
				margin-bottom: -15px;

				.gravatar {
					height: 24px !important;
					margin-right: 1em;
					position: relative;
					left: 18px;
					top: -18px;
					vertical-align: bottom;
					width: 24px !important;
				}
			}

			.site-icon {
				height: 32px !important;
				width: 32px !important;
				line-height: 32px !important;
				font-size: rem( 32px ) !important;

				.gridicon {
					@include breakpoint-deprecated( '<660px' ) {
						height: 32px !important;
						width: 32px !important;
						line-height: 32px !important;
						font-size: rem( 32px ) !important;
					}
				}
			}
		}

		.reader-author-link {
			font-weight: 600;
			display: inline;
			margin-right: 5px;

			&::after {
				content: ',';
				font-weight: 400;
			}
		}

		.author-compact-profile__site-link {
			flex: 1 0 0;
			display: inline;

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

		.reader-author-link,
		.author-compact-profile__site-link {
			padding-top: 5px;
		}

		.author-compact-profile__follow .follow-button {
			position: fixed;
			left: calc( 100% - 270px );
			top: 5px;

			@include breakpoint-deprecated( '<660px' ) {
				background: transparent;
				position: fixed;
				z-index: z-index(
					'.reader-full-post__sidebar-comment-like',
					'.author-compact-profile__follow .follow-button'
				);

				.gridicon {
					height: 24px;
					top: 7px;
					width: 24px;
				}
			}
		}

		.author-compact-profile__follow-count {
			display: none;
		}

		.author-compact-profile__follow .follow-button__label {
			@include breakpoint-deprecated( '<660px' ) {
				display: none;
			}
		}
	}
}

.reader-full-post .reader-full-post__sidebar {
	color: var( --color-text-subtle );

	a.reader-author-link,
	a.author-compact-profile__site-link {
		color: var( --color-primary );

		&:hover {
			color: var( --color-primary-light );
		}
	}
}

// Action buttons in full-post
.reader-full-post .reader-post-actions {
	clear: both;
	margin-bottom: 20px;

	.post-edit-button__label,
	.reader-share__button-label,
	.comment-button__label,
	.like-button__label {
		font-size: rem( 17px );
	}
}

.reader-full-post__sidebar-comment-like {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: center;
	margin-top: 10px;

	@include breakpoint-deprecated( '<660px' ) {
		align-items: flex-start;
		background: var( --studio-white );
		display: flex;
		border-bottom: 1px solid var( --color-neutral-0 );
		flex-direction: row;
		height: 47px;
		justify-content: flex-end;
		position: fixed;
		right: 60px;
		top: 0;
		width: 100%;
		z-index: z-index( 'root', '.reader-full-post__sidebar-comment-like' );
	}
	.comment-button.is-active,
	.comment-button:hover {
		svg.reader-comment path {
			stroke: var( --color-link );
		}
	}
	.like-button:hover,
	.like-button.is-active,
	.like-button.is-liked {
		svg.reader-star path {
			stroke: var( --color-link );
		}
	}
	.like-button.is-liked {
		svg.reader-star path {
			fill: var( --color-link );
		}
	}
}

.reader-full-post__sidebar .like-button {
	align-items: center;
	display: flex;
	gap: 5px;
	justify-content: center;

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

	.like-button__label-status {
		display: none;
	}
}

.reader-full-post__sidebar .comment-button__label,
.reader-full-post__sidebar .like-button__label {
	font-size: $font-body-small;
}

.reader-full-post__sidebar .comment-button {
	align-items: center;
	display: flex;
	gap: 5px;
	justify-content: center;

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

	.comment-button__label-status {
		display: none;
	}
}

// Align meta info and post title
.reader-full-post .has-author-link .author-compact-profile__avatar-link {
	display: none;
}

.reader-full-post .has-author-link.has-author-icon {
	margin-top: 25px;

	@include breakpoint-deprecated( '>660px' ) {
		margin-top: 5px;
	}

	.reader-author-link {
		margin-top: 0;
	}

	.author-compact-profile__avatar-link {
		display: block;
	}
}

.reader-full-post .has-author-link {
	margin-top: 14px;
}

.reader-full-post .has-author-link .reader-author-link {
	@include breakpoint-deprecated( '>660px' ) {
		margin-top: 4px;
	}
}

// For posts without a title
.reader-full-post__header.is-missing-title {
	.reader-full-post__header-meta {
		margin-bottom: 20px;
	}
}

.reader-full-post__header-title {
	clear: none;
	color: var( --color-neutral-70 );
	font-family: $sans;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: $font-title-medium;
	font-weight: 700;
	line-height: 34px;
	max-width: 750px;

	@include breakpoint-deprecated( '>960px' ) {
		font-size: $font-headline-small;
		line-height: 46px;
	}

	@include breakpoint-deprecated( '480px-960px' ) {
		font-size: $font-title-large;
		line-height: 40px;
	}

	.reader-full-post__header-title-link {
		display: block;
	}

	.reader-full-post__header-title-link,
	.reader-full-post__header-title-link:hover {
		color: var( --color-neutral-70 );
	}
}

.reader-full-post__header-meta {
	display: flex;
	flex-direction: row;
	font-size: $font-body;
	max-width: 750px;
}

.reader-full-post__header-follow-count,
.reader-full-post__header-date {
	line-height: 1.6;

	@include breakpoint-deprecated( '<480px' ) {
		line-height: 1.4;
	}
}

.reader-full-post__header-date-link {
	margin-right: 25px;
}

.reader-full-post__header-site-name-link,
.reader-full-post__header-site-name-link:visited,
.reader-full-post__header-date-link,
.reader-full-post__header-date-link:visited {
	color: var( --color-text-subtle );

	&:hover {
		color: var( --color-primary-light );
	}
}

.reader-full-post .reader-post-card__tag {
	background: var(--color-surface);
	border: 1px solid var(--color-neutral-5);
	padding: 0 12px 3px;
}

.reader-full-post .reader-post-card__tag-link {
	color: var( --color-neutral-80 );
	font-size: 12px;
	margin-top: 2px;
	white-space: nowrap;
	cursor: pointer;
}

.reader-full-post .reader-post-card__tag-link:hover {
	color: var( --color-primary );
}

.reader-full-post__header {
	margin-bottom: 23px;

	a {
		text-decoration: none;
	}
}

.reader-full-post__featured-image {
	display: inline-flex;
	margin: 28px 0 26px;
	position: relative;
	&::after {
		content: '';
		position: absolute;
		pointer-events: none;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
		border-radius: 5px; /* stylelint-disable-line scales/radii */
	}
	img {
		box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
		border-radius: 4px;
		position: relative;
	}
}

.reader-full-post__unavailable {
	.back-button__label {
		@include breakpoint-deprecated( '<660px' ) {
			display: inherit;
		}
	}
	.reader-full-post__content {
		@include breakpoint-deprecated( '<660px' ) {
			margin-top: 2em;
		}
	}
}
.reader-full-post__unavailable-body {
	margin-top: 2em;
}

// Placeholders
.reader-full-post__header-title,
.reader-full-post__header-date {
	&.is-placeholder {
		@include placeholder();
	}
}

.reader-full-post__header-date.is-placeholder {
	margin-top: 4px;
}

.reader-full-post__story-content-placeholder-text {
	@include placeholder();
	margin-bottom: 16px;
	min-height: 200px;
}

.post-edit-button {
	&:hover,
	&:focus,
	&:active {
		.gridicon {
			fill: var( --color-link );
		}

		.post-edit-button__label {
			color: var( --color-link );
		}
	}
}

.post-edit-button__label {
	display: none;
}

.wp-block-file {
	margin-bottom: 24px;

	.wp-block-file__button {
		display: none;
	}
}

.reader-post-actions__item {
	&:hover,
	button.is-active,
	.like-button.is-liked {
		svg.reader-external path {
			fill: var( --color-link );
		}

		svg.reader-comment path,
		svg.reader-share path {
			stroke: var( --color-link );
		}
		svg.reader-star path {
			stroke: var( --color-link );
		}
	}

	.like-button.is-liked {
		svg.reader-star path {
			fill: var( --color-link );
		}
	}
}

.wp-block-latest-posts__post-date::before {
	content: ' - ';
}

.is-reader-full-post {
	background: var( --color-surface );
}

.reader-full-post {
	.reader-full-post__header--recent {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		align-items: start;

		@media ( max-width: ($break-wide - 1) ) {
			display: flex;
			flex-wrap: wrap;
		}

		.reader-full-post__header-site-icon {
			grid-column: 1;
			margin-right: 30px;
			grid-row: 1 / 3;
			align-self: center;
			width: 80px;
			height: 80px;

			@media ( max-width: ($break-wide - 1) ) {
				flex-shrink: 0;
				width: 40px;
				height: 40px;
				margin-right: 15px;
			}

			.reader-full-post__header-site-icon-link {
				line-height: 0;
			}

			.reader-full-post__site-icon {
				border-radius: 50%;
				height: 80px;
				width: 80px;

				@media ( max-width: ($break-wide - 1) ) {
					height: 40px;
					width: 40px;
				}

				&.is-missing-icon {
					color: var( --color-neutral-70 );
				}
			}
		}

		.reader-full-post__header-title {
			grid-column: 2;
			grid-row: 1;

			@media ( max-width: ($break-wide - 1) ) {
				flex: 1;
				min-width: 0;
			}
		}

		.reader-full-post__header-meta {
			display: block;
			grid-column: 2;
			grid-row: 2;

			@media ( max-width: ($break-wide - 1) ) {
				width: 100%;
				padding-top: 10px;
			}

			span {
				line-height: 1.6;
				margin-right: 20px;
				color: var( --color-text-subtle );
				display: inline-block;
			}
			.reader-full-post__header-date {
				margin-right: 0;
			}
		}
	}

	div.reader-full-post__author-block {
		.author-compact-profile {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-areas:
				'avatar links'
				'avatar follow';
			column-gap: 5px;
			row-gap: 5px;
			margin: 20px 0 0 0;
			padding-right: 10px;
			text-overflow: clip;
			white-space: nowrap;

			&:not( .has-author-icon ).has-author-link {
				grid-template-areas:
					'links'
					'follow';
			}

			&:not( .has-author-link ):not( .has-author-icon ) {
				.reader-avatar {
					margin: 5px 0 0 0;
				}
			}

			@media ( min-width: 1300px ) {
				display: none;
			}

			&__avatar-link {
				grid-area: avatar;
			}

			.reader-avatar {
				margin: 0 10px 5px 0;
				position: relative;
				top: 2px;

				@include breakpoint-deprecated( '<480px' ) {
					position: relative;
					top: 5px;
				}

				&:not( .has-site-and-author-icon ) img {
					margin-left: -17px;
					top: 7px;
				}

				.gravatar {
					height: 24px !important;
					width: 24px !important;
					margin-right: 1em;
					position: relative;
					left: 18px;
					top: -18px;
					vertical-align: bottom;
					max-width: initial;
				}

				.site-icon,
				.gridicon {
					height: 32px !important;
					width: 32px !important;
					line-height: 32px !important;
					font-size: rem( 32px ) !important;
					margin: 0 2px;
				}
			}

			&__names {
				position: relative;
				top: -2px;

				.reader-author-link,
				.author-compact-profile__site-link {
					grid-area: links;
					display: inline;
					padding-top: 0;
					margin-right: 0;
				}

				.reader-author-link {
					@include breakpoint-deprecated( '<480px' ) {
						display: none;
					}

					&::after {
						content: ', ';
						font-weight: 400;
						white-space: pre;
					}
				}
			}

			&__follow {
				grid-area: follow;
				justify-content: initial;
				position: relative;
				top: -12px;
				margin-top: 0;
				flex-wrap: inherit;

				.author-compact-profile__follow-count {
					display: inline-block;
				}

				.author-compact-profile__follow-count,
				.follow-button {
					padding: 5px 5px 5px 0;
					position: initial;

					&__label {
						display: inline-block;
					}
				}
			}
		}
	}
}

.reader-full-post.is-reddit-post {
	.reader-full-post__story-content {
		// Remove Reddit table styles
		table {
			width: 100%;
			border-collapse: collapse;
			display: block;

			tr, td {
				display: block;
				width: 100%;
			}

			// Add a margin above the submitted by meta
			td .md {
				margin-bottom: 24px;
			}
		}
	}
}
