.reader-feed-header .reader-feed-header__site {
	display: flex;
	margin-bottom: 16px;
	z-index: z-index(".reader-feed-header", ".reader-feed-header__site");

	h1 {
		display: inline;
	}

	// If the site title test in the link is marked a different ltr/rtl format than the interface,
	// ensure this parent site title class is set to that direction.
	&:has( h1 a[direction="ltr"] ) {
		.reader-feed-header__site-title {
			/*!rtl:ignore*/
			direction: ltr;
		}
	}

	&:has( h1 a[direction="rtl"] ) {
		.reader-feed-header__site-title {
			/*!rtl:ignore*/
			direction: rtl;
		}
	}

	@include breakpoint-deprecated( "<660px" ) {
		margin-bottom: 16px;
	}
}

.reader-feed-header.is-wide-display .reader-feed-header__site {
	align-items: center;
	margin-bottom: 36px;
}

.reader-feed-header__seen-button {
	align-items: center;
	cursor: pointer;
	color: var(--color-text-subtle);
	display: flex;
	position: relative;

	svg {
		display: inline-block;
		margin-right: 6px;
		color: var(--color-neutral-20);
	}

	&:disabled {
		cursor: text;
		opacity: 0.5;
	}
}

.reader-feed-header__site-icon {
	margin-right: 24px;

	img,
	.site-icon.is-blank {
		border-radius: 100%;
	}
}

.reader-feed-header__follow-button-and-settings {
	display: flex;
	gap: 8px;
	align-items: center;
}

.reader-feed-header .reader-feed-header__site-badge {
	color: var(--color-text-subtle);
	padding-left: 4px;
}

.reader-feed-header__site .reader-feed-header__site-title {
	font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
	font-size: $font-title-large;
	font-weight: 600;
	line-height: 1.5;

	@include breakpoint-deprecated( "<660px" ) {
		font-size: $font-title-medium;
		align-items: center;
		display: flex;
		margin-bottom: 16px;
	}

	.reader-feed-header__site-title-link,
	.reader-feed-header__site-title-link:visited {
		color: var(--color-neutral-100);
	}

	&::after {
		@include long-content-fade( $size: 15% );
		height: 16px * 1.7;
		top: auto;
	}
}

.reader-feed-header__description {
	font-size: $font-body-large;
	margin-bottom: 12px;

	@include breakpoint-deprecated( "<660px" ) {
		font-size: $font-body;
	}
}

.reader-feed-header__follow-and-settings {
	align-items: center;
	display: flex;
	gap: 24px;
	margin-bottom: 16px;
}

.reader-feed-header__follow-button {
	display: flex;
	gap: 8px;
	flex-direction: column;

	// Override follow button styles of subscribed state i.e. show icon with gray color instead of green.
	.follow-button.is-following {
		svg.reader-following-feed path {
			fill: initial;
		}

		&:hover {
			svg.reader-following-feed path {
				fill: initial;
			}
		}
	}
}

.reader-feed-header {
	z-index: z-index("root", ".reader-feed-header");

	// Follow count and Follow(ing) button
	.reader-feed-header__follow {
		z-index: z-index(".reader-feed-header__back-and-follow", ".reader-feed-header__follow");
	}

	.reader-feed-header__follow-count {
		color: var(--color-text-subtle);
		font-size: $font-body-small;
		margin-bottom: 12px;
	}

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

.reader-feed-header .card {
	background: none;
	box-shadow: none;
	padding: 0;
}

.reader-feed-header__seen-button .reader-feed-header__visibility {
	@include breakpoint-deprecated( "<480px" ) {
		display: none;
	}
}

// Loading placeholder
.reader-feed-header.is-placeholder {
	pointer-events: none;
	user-select: none;

	.site__title,
	.site__domain,
	.feed-header__description,
	.feed-header__follow-count {
		color: transparent;
		background-color: var(--color-neutral-0);
		animation: loading-fade 1.6s ease-in-out infinite;
	}
}

.stream__right-column .reader-feed-header__follow-and-settings {
	margin-bottom: 24px;
}
