.twrp-ss {
	@include twrp-block-mixin;

	@extend .twrp-reset-box;

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	&__title {
		@extend .twrp-reset-box;

		position: relative;
		margin-bottom: 0.35rem;
		color: var(--twrp-text-color);
	}

	&__first-meta-wrapper,
	&__second-meta-wrapper {
		@extend .twrp-reset-box;

		display: flex;
		align-items: baseline;

		.twrp-ss__meta:last-child {
			margin-right: 0;
		}
	}

	/* stylelint-disable-next-line */
	&__meta {
		@extend .twrp-reset-box;

		display: inline-block;
		flex-shrink: 0;
		margin-right: 0.5rem;
		overflow: hidden;
		white-space: nowrap;
	}

	&__author,
	&__date,
	&__category {
		flex-shrink: 1;
		text-overflow: ellipsis;
	}

	// If an author meta is displayed alongside a date or category, then shrink
	// only the author, If the category and date are displayed, then shrink only
	// the category. If all 3 are displayed, shrink the author only.
	// author-date: shrink author, date not excess 60%.
	// author-category: shrink author, category not excess 60%
	// category-date: shrink category, date not excess 60%
	// all 3, shrink author, date and category not excess 40% each.
	[class*="twrp-ss__flex-meta-wrapper--"][class*="author"] .twrp-ss__date,
	[class*="twrp-ss__flex-meta-wrapper--"][class*="author"] .twrp-ss__category,
	[class*="twrp-ss__flex-meta-wrapper--"]:not([class*="author"])[class*="category"] .twrp-ss__date{
		flex-shrink: 0;
		max-width: 60%;
	}
	[class*="twrp-ss__flex-meta-wrapper--"][class*="author"][class*="category"][class*="date"] .twrp-ss__date,
	[class*="twrp-ss__flex-meta-wrapper--"][class*="author"][class*="category"][class*="date"] .twrp-ss__category {
		flex-shrink: 0;
		max-width: 40%;
	}

	&__thumbnail-container {
		margin-bottom: 0.35rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	/* stylelint-disable-next-line block-no-empty */
	&__thumbnail-wrapper {}

	/* stylelint-disable-next-line block-no-empty */
	&__thumbnail {}

	// Hover, Focus state
	&__link {
		@extend .twrp-reset-box;
		@extend .twrp-reset-anchor;

		margin-top: auto;

		&:hover,
		&:focus {
			.twrp-ss__title {
				color: var(--twrp-accent-color);
			}
		}
	}
}