// =================================================================
// Post Archive Settings
// =================================================================

// Back Link Icon
//
// Controls the shape used in "back" links, such as the links you
// see at the bottom of the page when viewing a single profile.
// By default, this is an arrow.
//
// Styleguide News.News Listing.Back Link Icon
//
// Access: Public
//
// Since: 1.0.0

$back-link-before:                          "← " !default;

// Back Link Icon Color
//
// Controls the color of the arrow in "back" links, such as the links you
// see at the bottom of the page when viewing a single profile.
//
// Styleguide News.News Listing.Back Link Icon Color
//
// Access: Public
//
// Since: 1.0.0

$color-back-link-before:                    $color-grayscale-f !default;

// Post Border
//
// Controls the border style between posts on post listing templates.
//
// Styleguide News.News Listing.Post Border
//
// Access: Public
//
// Since: 1.0.0

$border-news-post:                         $border !default;

// Metadata Color
//
// Controls the color of the separators between metadata.
//
// Styleguide News.News Listing.Metadata Color
//
// Access: Public
//
// Since: 1.0.0

$color-news-meta-em:                        $color-grayscale-7 !default;

// Metadata Separator Color
//
// Controls the color of the separators between metadata.
//
// Styleguide News.News Listing.Metadata Separator Color
//
// Access: Public
//
// Since: 1.0.0

$color-news-meta-before:                    $color-grayscale-a !default;


// =================================================================
// Post Archive Styles
// =================================================================

// A placeholder to mimic the styles of the "Back" link on archive pages.
//
// Access: Public
//
// Since: 1.0.0

%back-link-styles {
	&::before {
		color: var(--back-link-color, #{$color-back-link-before});
		content: $back-link-before;
	}
}

// Controls the styles of the "Back" link on archive pages.
// Use this class to only style CSS with the back link. Use the placeholder
// to style anything that looks like a back link.
//
// Styleguide Components.News Archive.back-link
//
// Access: Public
//
// Since: 1.0.0

.back-link {
	@extend %back-link-styles;
}

.meta {
	@extend %font-size-secondary;
}

// Handles the previous and next links at the bottom of post listings.
//
// Styleguide Components.News Archive.paging-navigation
//
// Access: Public
//
// Since: 1.0.0

.paging-navigation {
	@extend %clearfix;
	border-top: var(--news-border, var(--bu-border, #{$border-news-post}));
	margin-top: var(--margin, #{$margin});
	padding-top: var(--margin, #{$margin});

	a {
		@extend %button-styles;
		@extend %button-styles-primary;
	}
}

// Handles the previous link at the bottom of post listings.
//
// Styleguide Components.News Archive.nav-previous
//
// Access: Public
//
// Since: 1.0.0

.nav-previous {
	float: left;
}

// Handles the next link at the bottom of post listings.
//
// Styleguide Components.News Archive.nav-next
//
// Access: Public
//
// Since: 1.0.0

.nav-next {
	float: right;
}

// Handles styling for posts in news listings and archive pages.
//
// Styleguide Components.News Archive.post-part
//
// Access: Public
//
// Since: 2.0.0

.post-part {
	border-top: var(--news-border, var(--bu-border, #{$border-news-post}));
	margin-top: var(--margin, #{$margin});
	padding-top: var(--margin, #{$margin});
	position: relative;

	&:first-child {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}
}

// Handles styling for headlines in the post template partial,
// usually used on post listings and archive pages.
//
// Styleguide Components.News Archive.post-headline
//
// Access: Public
//
// Since: 2.0.0

.post-headline {
	& + .meta {
		margin-top: -0.5em;
	}

	.post-thumb + & {
		margin-top: 0;
	}
}

// Handles styling for metadata in the post template partial,
// usually used on post listings and archive pages.
//
// Styleguide Components.News Archive.post-meta
//
// Access: Public
//
// Since: 1.0.0

.post-meta {
	color: var(--news-meta-color, #{$color-news-meta-before});
	
	span {
		&::before {
			color: var(--news-meta-color, #{$color-news-meta-before});
			content: "\a0\b7\a0";
		}

		&:first-child::before {
			content: "";
		}
	}
}

// Handles styling for thumbnails in the post template partial,
// usually used on post listings and archive pages.
//
// Styleguide Components.News Archive.post-thumb
//
// Access: Public
//
// Since: 2.0.0

.post-thumb {
	float: right;
}