@import '@financial-times/o-typography/main';
@import '@financial-times/o-spacing/main';
@import '@financial-times/o-colors/main';

.x-live-blog-post {
	border-bottom: 1px solid oColorsByName('black-20');
	margin-top: oSpacingByName('s8');
	color: oColorsByName('black-90');
	padding-bottom: oSpacingByName('s8');
}

.x-live-blog-post__title {
	@include oTypographyDisplay($scale: 5);
	margin-top: oSpacingByName('s4');
	margin-bottom: oSpacingByName('s1');
}

.x-live-blog-post__breaking-news + .x-live-blog-post__title {
	margin-top: oSpacingByName('s1');
}

.x-live-blog-post__byline {
	@include oTypographySans($scale: 0, $line-height: 1.25);
	color: oColorsByName('black-80');
	margin-top: oSpacingByName('s3');
	margin-bottom: 20px;
}

.x-live-blog-post__body {
	@include oTypographySerif($scale: 1, $line-height: 1.55);
	margin-top: oSpacingByName('s6');
}

.x-live-blog-post__body ul {
	@include oTypographyList('unordered');
}

.x-live-blog-post__timestamp {
	@include oTypographySans($scale: -1, $weight: 'semibold');
	text-transform: uppercase;
}

.x-live-blog-post__timestamp-exact-time {
	@include oTypographySans($scale: -1, $weight: 'light');
	color: oColorsByName('black-60');
	padding-left: oSpacingByName('s2');
}

.x-live-blog-post__timestamp-container:after {
	content: '';
	display: block;
	width: oSpacingByName('s4');
	border-bottom: 4px solid oColorsByName('black-90');
	padding-top: oSpacingByName('s1');
}

.x-live-blog-post__breaking-news {
	@include oTypographySans($scale: -2);
	color: oColorsByName('crimson');
	text-transform: uppercase;
	margin-top: oSpacingByName('s4');
}

.x-live-blog-post__breaking-news:before {
	content: '';
	display: inline-block;
	width: oSpacingByName('s2');
	height: oSpacingByName('s2');
	margin-right: oSpacingByName('s1');
	border-radius: 50%;
	background-color: oColorsByName('crimson');
}

.x-live-blog-post__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-top: oSpacingByName('s6');
}

.x-live-blog-post__controls .x-live-blog-post-controls__back-to-top-link,
.x-live-blog-post__controls .x-live-blog-post-controls__back-to-top-button {
	@include oTypographySans($scale: 1);
	color: oColorsByName('teal');
	text-decoration: underline;
	margin-left: auto;
}

.x-live-blog-post__controls .x-live-blog-post-controls__back-to-top-button {
	background: unset;
	border: unset;
}

.x-live-blog-post__controls .x-live-blog-post-controls__back-to-top-button:hover {
	cursor: pointer;
}

.x-live-blog-post:first-child .x-live-blog-post-controls__back-to-top-link,
.x-live-blog-post:first-child .x-live-blog-post-controls__back-to-top-button {
	display: none;
}